font-size

语法

font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length

取值：

xx-small :　 绝对字体尺寸。根据对象字体进行调整。最小

x-small :　 绝对字体尺寸。根据对象字体进行调整。较小

small :　 绝对字体尺寸。根据对象字体进行调整。小

medium :　 默认值。绝对字体尺寸。根据对象字体进行调整。正常

large :　 绝对字体尺寸。根据对象字体进行调整。大

x-large :　 绝对字体尺寸。根据对象字体进行调整。较大

xx-large :　 绝对字体尺寸。根据对象字体进行调整。最大

larger :　 相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的 em 单位计算

smaller :　 相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的 em 单位计算

length :　 百分数 | 由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。请参阅 长度单位

说明

设置或检索对象中的字体尺寸。

font-size的使用说明如下表所示：^[1]

示例：

p { font-style: normal; }

p { font-size: 12px; }

p { font-size: 20%; }

单位

px: 基于像素的单位。像素是一种有用的单位，因为在任何媒体上都可以保证一个像素的差别确实是可见的。

em : 一般用来测量长度的通用单位(例如元素周转的页边空白和填充)，当用于指定字体大小时，em单位是指父元素的字体大小。

比如

如果使用em来指定填充，填充的宽度是相对于DIV元素的字体大小而定的。

pt: 印刷业上常使用的单位，磅的意思。一般也用于页面打印排版。

px是像素单位，em是相对单位，pt是绝对单位。它们各自的好处是：px可以在计算机屏幕上，能达到预期的效果，在打印机和其它的高分辨率设备上，它又能取得所希望的效果。em的优点很多，比如在一个页面上，你给定了一个父元素的字体大小，这样就可以通过调整一个元素来成比例的改变所有元素大小。它可以自由缩放，比如用来制作可伸缩的样式表。pt是一种固定长度的度量单位，是能够使用测量设备测得的长度。绝对单位作用有限，因为它们不能够缩放，通常只用在已经知道是用在哪种输出媒体的情况下才使用。但大多数情况下最好使用相对单位。一般都是用px和em这两种种配搭比较好。

应用

IE5.0+ currentStyleCUSTOMruntimeStyle

IE5.5+ defaults

示例

.test p {

margin: 15px 0;

border: 1px solid#000;

}

.xx - small p {

font - size: xx - small;

} /*尺寸大小为xx - small：xx - small尺寸的文字。*/

.x - small p {

font - size: x - small;

} 尺寸大小为x - small：x - small尺寸的文字。

.small p {

font - size: small;

}/*尺寸大小为small：small尺寸的文字。*/

.medium p {

font - size: medium;

}/*尺寸大小为medium：medium尺寸的文字。*/

.large p {

font - size: large;

}尺寸大小为large：large尺寸的文字。

.x - large p {

font - size: x - large;

}尺寸大小为x - large：x - large尺寸的文字。

.xx - large p {

font - size: xx - large;

}尺寸大小为xx - large：xx - large尺寸的文字

.smaller p {

font - size: smaller;

}尺寸大小为samller：samller尺寸的文字。

.larger p {

font - size: larger;

}尺寸大小为larger：larger尺寸的文字。

.float p {

font - size: 20px;

}尺寸大小为20px：20px尺寸的文字。

.percentage {

font - size: 20px;

}尺寸大小为20px：父对象20px尺寸的文字。

.percentage span {

font - size: 60 % ;

}我的尺寸只是父对象的60 %

参考资料

[1] CSS font-size 属性 · W3Cschool[引用日期2018-03-20]