当你使用CSS设置字体大小事，你有很多种选择，你可以使用“keyword”，像 p { font-size: small; } 或者是一个数值。当使用数值时，你需要考虑使用哪种单位，那一种单位是最好的呢？下面让我来看看。

    Keyword

    有效地设置字体尺寸的keyword有：xx-small, x-small, small, medium, large, x-large, and xx-large 还有比较 keyword（smaller 和 larger）。

    令人惊奇的是，各种平台和浏览器都能很好的兼容 keyword font size，看一下在Opera, Firefox, IE 6, and Safari的测试页面：

    

    我们可以注意到，他们非常接近，但是在字体宽度和字体高度上有些不同。

    当使用keywords时，父标签和子标签存在着一定的相互关系。例如，当 parent 设置为 medium child 设置为 large. 只有child 的 large 会起到作用。但是，如果 parent 设置的为medium 而 child 设置的是 larger （注意是larger而不是刚才的large），child 的尺寸就会比 parents 大。改变 parent 就会改变 child。

    使用Keywords 是一种使用在 web 上的非常好的方式。在body上设置keyword font-size，然后在页面的其他地方使用相对尺寸是一种非常流行的技术。 这使得在页面上设置字体的大小（比如说是用Javascript）变得非常容易，很容易整体调整页面的尺寸。

    但是，由于 keywords 得局限性并不能非常方便的控制你的字体。

    px

    如果你想更加精细的控制字体尺寸，使用像素值 pixel values (px) 是个非常不错的选择。在一个电脑屏幕上，没有比单个像素更小的单位了，使用像素值作为字体单位，你就是告诉浏览器你的字体所占的像素值：

    Windows, Mac, Linux, IE, Firefox, Chrome, 不管是什么，当一个字体被设置成14px时，它永远是14px。但是，这并不代表没有任何差异，在下面的测试中，可以看到它和keyword一样有些差异。

    

    由于像素值的特性，他们并不是相关的，如果一个parent 标签被设置为18px，一个child被设置为16px，child就是16px。但是，字体尺寸设置可以一起设置。比如，如果一个 parent 被设置为16px 而 child 被设置为 larger，child 就会比 parent 大，如下图所示：

    

    “Larger” 把parent的16px转成20px，增加了25%。

    像素值在一段时间内在可用性和易用性方面一个非常糟糕过去，在IE 6及以下的浏览器中，使用像素值设定的大小用户不能重新设定字体的大小。这就意味着年轻的设计者将字体设置为12px正好合适，但是稍微年长点的人希望改变字体尺寸去阅读它却无法做到。这个是IE6的原因，并不是我们的原因，但是我们必须去处理它

    使用像素值设定字体尺寸是最精确的，同时也是最满意的，但是考虑到一些用户还在使用IE6，我们也要考虑到这一点。

    em

    Em 值可能是所有值中最难的，因为它是一个非常随意和抽象的概念。这里是它的定义：1em是当前标签的尺寸，如果你没有在页面上设置任何字体尺寸，那会是浏览器的默认尺寸，大部分是16px。所以默认是 1em = 16px。如果你把你的body设置为20px，那么 1em = 20 px。

    

    我认为“em”值是基于大写字母M设定的。

    当我们开始设置比较复杂的字体尺寸时，事情变得有些困难。比如说我们需要一个比价大的 header，我们可以设置为 h1 { font-size: 2em; } 其中 “2″ 实际上是em基数的倍数。如果基数是16px，那个header就是32px。这个数学公式非常清晰，但是你可以想象有时它并不是一个整数。

    一个使用em非常流行的方法是设置body的字号为62.5%。因为浏览器的默认尺寸是16px，设置完后可以使他变成10px（我们不直接把他设置为10px，因为像素值并不是相关的）。使用10作为一个基数要比使用16来的容易的多。如果你需要设置字体尺寸为18px，只需设置为 font-size: 1.8em。

    但是为什么要使用这种抽象的像素值呢？这里有三个原因：

在IE 6下可以自己设定大小它是基于一个其他尺寸的，可以通过改变基数来做到整体的改变EM像是个魔法

    其中第一个原因是主要的元婴，如果你想使用像素值来设定字体大小，但又不想有易用性方面的问题，em是你最好的选择。

    Em 不是只适用于字体，这也是一个长度单位（高、宽等）。可变宽度的网站使用em值来设定没一个值，是的网站具有可伸缩性，意味着当你改变一个尺寸的时候所有的尺寸跟着改变。em 在这种情况下和其他尺寸有一个直接的关系。如果你有一个10em的box，在它里面是1em的文字，它会占用1/10高度。这样的比例让em成为一个很好的设计技巧。

    还有一个潜在的问题，就是他的相关性，所有的em值都取决于parents的值。如果把em代替像素值来用，就会带来问题。比如，你可能将你的“p”（段落）和“li”（列表）设置为1.2em。今天看上去还不错，但是明天发布了一篇文章的段落中含有一个列表。那边列表的尺寸要比其他的都大（1.2 x 1.2）。除了移除标签，没有什么更好的方法。

    %

    百分比怎么使用相当的明显，它们的工作方式和你想象的一样。如果一个 parent 的尺寸是20px，child的尺寸是50%，那么它就是10px。就像em的规则一样。同样它也会出现和em一样的问题。

    一个非常流行的技术使用百分比来设定字体大小：所以用像“small”设定body，使用百分比来设定其他所有的元素。这样就可以通过改变 keyword 来改变页面其他地方的尺寸。

    

    pt

    最后的度量单位是point values (pt). Point values只是用于印刷! 1 point 是真实生活中的度量单位。72pts = 1 英寸. 1英寸 = 真实生活中的1英寸，不是屏幕上显示的1英寸。

    和像素值一样，point sizes 在纸上也是非常精密的。不管什么平台使用point size设置打印的字体是最好的选择。

    因为分辨率的不同，我们不在屏幕上使用point sizes。

    

    翻译自：http://css-tricks.com/css-font-size/

    

建议继续学习：

1. Vim（gvim）编程字体推荐    (阅读：6289)
2. 介绍“最好的编程字体”Monaco    (阅读：6278)
3. 等宽字体：程序员的字体    (阅读：4561)
4. 解决Chrome最小字体限制    (阅读：3016)
5. 默认Web字体样式    (阅读：2798)
6. 字体文件也属于二进制文件    (阅读：2649)
7. Google font api、web font与中文    (阅读：2382)
8. 更改 Windows 10 命令行字体    (阅读：2442)
9. 再谈 Web 默认字体    (阅读：2272)
10. 三谈 Web 默认字体    (阅读：2192)