本文摘自PHP中文网，作者青灯夜游，侵删。
在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（毫米）等。如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
1 2 3 4 5 |
|
上述代码定义了 5 种字体大小，都使用绝对单位。使用绝对长度单位后，在固定分辨率的显示器下，显示出来的都是固定大小。运行结果如下图所示：
如果以 px 为单位设置字体大小，使用IE浏览器的用户，就不能在浏览器上通过设置“文字大小”来对文本进行放大或缩小。如果文本太小，就会影响阅读，使用户体验大打折扣。
3）相对尺寸
相对尺寸有 em、%、rem，它们都是相对于某个参考基准的字体大小，来计算当前字体的大小，只是参考基准不同而已。
em 的参考基准是父元素。那么，如何计算要指定的 em 值呢？实际上，1em 总是等于父元素 font-size属性的值，这就是 em 的工作原理。据此，可以通过以下公式来确定百分比的值：
目标元素的字体大小 / 父元素的字体大小 = 值
因此，在使用 em 定义字体大小时，最好在 html 或 body 元素上建立一个基准。假设在 body 中设置的基准大小为 12px：
1 2 3 |
|
如果希望 body 中所有段落的字体大小为 18px，根据上述公式：
18 / 12 = 1. 5
相关阅读 >>
更多相关阅读请进入《css样式》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
