CSS font-size属性值px、em、rem详解

在Ghost默认主题CSS代码中发现font-size:1rem,有点疑惑。印象中字体大小用px的多,对em怎么用还没搞清楚现在又来个rem。于是重新翻书和Google搜索学习font-size属性。

开始

首先回顾font-size属性的基本说明:

[xx x small medium large x xx] smaller larger length % inherit

初始值

medium

应用于

所有元素

继承性

百分数

根据父元素到字体大小来计算

计算值

绝对长度

“xx-small, x-small, small, medium, large, x-large, xx-large”这些属于绝对大小。 medium 为浏览器默认字体16px(几乎所有桌面浏览器默认的标准字体大小都是 16px),以此为基准 large 就是比16大一点,x-large 是更大一点,small 同理。至于大多少小多少的缩放因子由浏览器决定,通常在1.1-1.5之间。

larger 和 smaller 相对父元素字体大小按固定比例进行放大缩小.大多数浏览器的这种比例是1.2 。例如父元素font-size为 20px,子元素字体大小设置为 larger 则计算结果就是 20x1.2px . 子元素的子元素若依然 larger 则大小是 20x1.2x1.2px .

百分数和larger相似,也是从父元素继承后进行百分比计算,100% 就是和父元素字体大小一样。只不过百分比控制继承的大小更精确,如font-size可以为:80%,90%,120%,125%,130%。

px

字体 px 单位是最常见,好处是稳定、精确,设定多大就多大,但是使用 px 设置字体大小后在浏览器中自定义字体大小就会完全失效,如下图操作,当在浏览器中设置文字大小为较大时,使用px作为单位的文字段落字体大小不会有任何变化(可打开此页面进行测试字体大小)。 font-size-in-浏览器

em

em 就是百分数换个名字,它们对字体大小控制规则相同,都是以父元素为基准进行计算,1em 则等于父元素字体大小。可以这么理解:字体设置【多少】em,那大小就是父元素字体乘以【多少】em。 如果父元素也是用 em 单位,则继续往上寻找到可以到计算实际值得元素。

如果在网页中任何地方都没有设置字体大小,那普通元素字体为浏览器默认大小 16px,所以通常认为 1em = 16px。一个流行的技巧是设置html元素字体大小为62.5% (即默认大小16px的62.5%,等于10px)。这样做方便计算,1em=10px、1.2em=12px 。 注意:默认状态的1em等于16px或者10px,仅对 body 的子元素有效,如果 body 里有个 p 字体大小为 2em。 那么对p的子元素 span 来说1em就等于p的2em。说到这里可以感觉到 em 的局限性,对元素使用进行 em 设置字体时,得首先知道他父元素的字体大小,在元素复杂的页面中很容易陷入不知所措。

CSS3 的 rem

rem即 root element,rem 和 larger,百分数,em 不一样。它的大小是相对根元素来计算,不同元素可能有不同父元素,但是所有元素都只有一个根元素 html。 还引用上面的技巧,设置 html 字体为font-size:62.5% 则 1rem=10px。 此后页面任何位置引用 1rem 都是 10px,1.2rem 就是 12px,不会受其他设置影响。rem的兼容性