在css样式中，可以利用“font-size”属性来设置字体大小，只需给文本元素设置“font-size:值;”样式即可。font-size属性用于设置字体大小，实际上设置的是字体中字符框的高度，其实际字符字形可能比框高或矮(通常会矮)。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css样式中，可以通过设置“font-size”属性来设置字体的大小。

通过 font-size属性可以设置元素中所包含文本的字体大小。如果一个元素没有显式定义font-size属性，则会自动继承父元素的 font-size属性的计算结果。

实际上font-size属性设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮(通常会矮)。

定义 font-size 时，可以使用预定义关键字、绝对尺寸、相对尺寸：

1)预定义关键字

预定义关键字有 xx-small、x-small、small、medium、large、x-large、xx-large，尺寸按顺序依次增大，类似于衣服的尺寸。

使用预定义关键字有两大缺陷：一是只有 7 种选择，可选择范围太小；二是跟衣服的尺寸一样，不同厂商对每个关键字对应的字体大小的精确值可能各不不同，导致在不同浏览器下，文本的大小可能不同。因此，不推荐使用预定义关键字来定义字体的大小。

2)绝对尺寸

绝对尺寸有px(像素)、pt(点，1pt 相当于 1/72in)、in(英寸)、cm(厘米)、mm(毫米)等。如：.px {

font-size: 14px;

}

.pt {

font-size: 10pt;

}

.in {

font-size: .15in;

}

.cm {

font-size: .4cm;

}

.mm {

font-size: 4mm;

}

字体大小： 14px

字体大小： 10pt

字体大小： .15in

字体大小： .4cm

字体大小： 4mm

上述代码定义了 5 种字体大小，都使用绝对单位。使用绝对长度单位后，在固定分辨率的显示器下，显示出来的都是固定大小。运行结果如下图所示：

如果以 px 为单位设置字体大小，使用IE浏览器的用户，就不能在浏览器上通过设置“文字大小”来对文本进行放大或缩小。如果文本太小，就会影响阅读，使用户体验大打折扣。

3)相对尺寸

相对尺寸有 em、%、rem，它们都是相对于某个参考基准的字体大小，来计算当前字体的大小，只是参考基准不同而已。

em 的参考基准是父元素。那么，如何计算要指定的 em 值呢？实际上，1em 总是等于父元素 font-size属性的值，这就是 em 的工作原理。据此，可以通过以下公式来确定百分比的值：

目标元素的字体大小 / 父元素的字体大小 = 值

因此，在使用 em 定义字体大小时，最好在 html 或 body 元素上建立一个基准。假设在 body 中设置的基准大小为 12px：body {

font-size: 12px;

}

如果希望 body 中所有段落的字体大小为 18px，根据上述公式：

18 / 12 = 1. 5

因此，只需将将段落的 font-size 设置为 1.5em 就可以了，这条规则就表示段落文本的字体大小为父元素文本大小的1.5 倍：body p {

font-size: 1.5em;

}

% 的参考基准也是父元素，100% 也总是等于父元素 font-size属性的值，即 1em 就等于 100%。也就是说，在用 % 定义字体大小时，只需将 em 的值换算成相应的百分数即可。因此，以下两条声明会得到相同的结果(假设两个段落具有相同的父元素)：p.one {

font-size: 1.5em;

}

p.one {

font-size: 150%;

}

需要注意的是，尽管 font-size 是可以继承的，但在使用 % 和 em 定义字体大小时，子元素继承的是计算结果的值，而不是 % 和 em 的数字。并且，% 和 em 还可以累积。考虑以下代码：p {

font-size: 12px;

}

em {

font-size: 200%;

}

strong {

font-size: 200%;

}

12px 200% 200%

上述代码中，p 为父元素，em 为 p 的子元素，strong 为 em 的子元素。em 元素的基准是 p 元素，而 strong 元素的基准是 em 元素。计算结果如下：em：12 × 200% = 24px

strong：24 × 200% = 48px

得到的运行结果如下图所示：

在这种多层嵌套的情况下，如果某一个计算结果不是整数，浏览器可能就会取整，子元素再继承取整后的值。如果嵌套很深，下层的字体大小就越来越偏离实际计算值。并且，由于参考基准总是随着元素发生变化，嵌套越深，计算起来也就越困难。

鉴于此，CSS3中新增的一个相对单位 rem(root em的简称)，它总是以文档的根元素(即 html 元素)为参考基准，来设置其它元素的字体大小，即 1rem 相当于 html 元素 font-size属性的值。考虑以下代码：html {

font-size: 10px;

}

p {

font-size: 1.4rem;

}

上述声明中，p 元素的字体大小将是 html 字体大小的1.4倍，则计算得到 p 元素的字体大小就是1.4 × 10px = 14px。

这样一来，无论嵌套多少层，参考基准始终不变，计算字体大小就变得容易多了。不过，需要注意的是，rem 是CSS3新增的一个相对单位，IE9 以下版本的老浏览器却不支持它，这也是很多编程人员尚未使用 rem 的原因。

在定义字体大小时，笔者建议在 html 元素中定义绝大多数元素所需要的字体大小，并让所有子元素继承 html 的字体大小。如果某个子元素需要要改变字体大小，则使用相对尺寸 em 或 % 或 rem 重新定义。

这样做的好处是，一方面，绝大多数元素都不必定义字体大小，减少不必要的定义；另一方面，如果完成所有的文字排版后，又要统一调整页面文字大小，就可以只修改 html 中的字体大小，其它所有文字的字体大小会自动变化，修改起来就很容易。

说明：

在某些特殊场景下，需要把 font-size 的值设置为0，来隐藏某些文本。但是，在IE6和IE7中，font-size: 0 的文本却变成了小黑点，并没有完全隐藏。

解决这个问题的最简单办法，就是在 font-size: 0 的同时，把 text-indent 属性设置为一个很大的负值，让这些文本显示在屏幕之外，自然就被隐藏起来。

(学习视频分享：css视频教程)

div字体大小设置 css设置div中字体大小尺寸样式设置篇

在css div布局中常常对div字体大小设置，这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置，通过直接在div标签加字体大小属性样式和对div加class设置外部CSS字体大小样式，让大家掌握div内字体大小样式设置。

一、div字体尺寸大小使用什么CSS单词？- 字体大小设置CSS单词

无论哪种方式对字体大小设置，都要用到字体尺寸大小样式单词为font-size。

二、两种div里字体大小实例

这里为大家介绍两种对div字体大小样式设置，通过小实例让大家掌握div内字体尺寸大小布局实现。

1、div字体大小布局实例说明

一种直接对div标签内使用style设置font-size字体大小属性来实现(通俗称为div标签内直接设置字体大小样式)；另外一种对div使用class设置外部CSS font-size来实现字体大小(通俗称为外部样式实现字体大小布局)。这里是对DIV使用class类方式实现字体大小设置，当然也可以使用id来实现文字大小，只是一般小局部小实例使用class比较好。

2、div的文字大小实例代码

.example{font-size:18px}

/* 设置一个命名为example类(使用class=example)字体大小为18px */

这里是两种对div内文字实现字体大小样式设置CSS+HTML代码。

3、字体大小实例截图

div字体大小CSS样式布局实例，div设置字体大小截图

4、在线演示与打包下载

div内文字的字体大小设置实例在线演示

div内文字的字体大小设置实例打包下载

三、div里字体大小样式设置小结

无论对什么对象或标签设置CSS字体大小，均使用font-size样式实现布局，根据需求选择标签内直接使用字体大小font-size样式，或使用外部CSS实现DIV中字体大小。

html css设置字体大小的方法：首先新建一个html页面；然后在这个html页面上创建一个