px – em – % – pt – keyword

截取部分翻译,图片来源http://css-tricks.com/

原文地址:px – em – % – pt – keyword

Keyword

大部分浏览器支持的关键字有:

smaller, xx-small, x-small, small, medium, large, larger, x-large, xx-large

大部分浏览器对这些关键字解析都差不多,并且有继承性。

keywordcrossbrowser

虽然看起来差不多,但是在断行(line break)处还与整个段落的高度上还存在着差异。

px

更精准的控制,把字体设置为px可以让浏览器精准的渲染其高度。

pixelstall

虽说可以说更精确的渲染,但是在不同浏览器下依然会有差异

pixelvariation

px不具有继承性

combinepxandkeyword

px在过去被认为是在可用性与可访问性非常友好。在IE6(以下),字体被设置为px后不能够被用户缩放。

em

em也许是最难理解的,因为他的概念比较抽象。

一般来说:1em是等于当前字体大小。如果没有设置字体大小,而使用浏览器默认(16px),那么1em=16px。如果你在body上设置字体大小为20px,那么1em=20px。

IE5-7 em font-resizing bug

emboxes

%

与em相似,具有继承性。

一个比较流行的方法是给body一个合理的font-size性比如说:small。然后对其他元素用%。可以用这个方法还做一个局部字体放大与缩小的功能。

fontresizer

pt

Point Values are only for print CSS!

72pts=1inch(英寸),1inch=真实世界的1英寸,不是你显示器的1英寸。

并且在不同的浏览器下pt所显示的并不相同。

pointsizeonscreen

此条目发表在 try it, 实验室 分类目录,贴了 标签。将固定链接加入收藏夹。