网页中设置 Font-size 的那些事儿

Question

一听到说使用 CSS 设置字体很容易，其实要是真做起来却不那么容易，我们的网站开发人员使用全力，不断的去调整字体的大小尺寸，以适应不同浏览器最佳的显示效果。实际上只要深入的理解一下字体中的一些知识，这些都不是问题了。

Font-size 属性

任何一个 HTML 标签都可以设置 Font-size 属性，即使是不能包含文本的标签也可以设置它，他可以被赋予各种各样的值，可以是具体的数字+单位，也可以绝对关键字，也可以是百分数相对大小。

一个元素的 Font-size 属性会自动继承它父节点元素的 Font-size 属性值，除非你覆盖了它。当你给 Font-size 设置相对大小的时候理解这一点很重要。

以下几个绝对字体大小的设置是有效的。当然他们是浏览器预定义设置的。给元素指定了绝对关键字 Font-size 的时候，该元素就不会继承父元素的 字体大小。

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

尽管大多数的浏览器支持上面的关键字，但是他们的精确的大小是不相同的。

Font-size 绝对大小

Fone-size 能被设置成下面列出的绝对大小：

• mm: 毫米，例如：10mm.
• cm: 厘米 ，例如：1cm ( = 10mm).
• in: 英寸（inch）,例如 ： 0.39in ( ~= 10mm).
• pt: point（点）, 1pt 相当于 1/72 英寸， 例如： 12pt.
• pc: pica（十二点活字）, 1pc 是 12pt
• px: pixel（像素）, 例如： 14px.

一般说来上面得这些度量单位都有些问题。比如：毫米\厘米\英寸是对于不同媒体介质是不精确地，由于分辨率的设置不同，pt 和 pc 就是相对不可靠地。pix 来起来是最合适的，但是它能导致一些辅助性问题：IE 下不能重新调整字体的大小。

Font-size 相对大小

Font-size 属性能被设置成相对于父节点的字体大小的相对大小。

• em: 1em 相当于当前字体的 1 倍大小的字体。2em 相当于当前字体的 2 倍字体大小的字体。
• %: 100% 相当于当前字体大小, 200% 相当于 2 倍字体的大小。
• ex: 1ex 相当于当前字体中字母 x 高度值一样大小的字体。

很少的开发者使用 ex ，实际上某些情况下 ex 还是相当好用的，比如当你需要更精确的字体的大小的时候，1ex 要比 0.525em 更好更精确。

% 和 em 的值是等价的，比如 50% = 0.5em\100% = 1em\120% = 1.2em 等等，尽管会有很少的一些浏览器有些微妙的差别，但是毕竟那是很少见的问题。如果你想要保存更小的字节，就需要用更短的名字去定义 Font- size 的值。比如 50% 要比 0.5em 占用字节少，1em 要比 100% 占用的字节少。

文本字体的大小和页面放缩

这是附加复杂深入部分，大多数浏览器允许用户在浏览器中做如下操作：

• 增加或减少基本字体大小（图片除外）
  页面放缩是所有的文字和图片也相应发生放缩变化。
• 不但允许字体放缩，而且还允许页面放缩

备注（深入理解）：在 IE 中如果页面中的元素的字体被用 px（像素）赋值了，那么该元素的字体在页面放缩的时候不会发生变化。

如果您是有印刷行业背景的设计师将要转移到 Web 设计，那就建议您不要给予用户过多的权利否则他们会打乱您的设计作品。您的设计作品被放大到 200% 的时候，或者字体减少至 50%，就会被破坏掉。

Font-size 设置建议

• 一般来说，大多数情况下使用 em 或者 %，这样字体就能被浏览器用更精细比例的字体支持。我个人建议使用百分比 % 来定义 Font-size 大小，这种做法在一些老的浏览器中支持的也会更好。
• 当你在开发一个网站的时候有下面的一组建议提供给您：
  1. 在 Testing 之前，重置所有浏览器的字体的大小。
  2. 尽量合理的定义字体的大小，以便于在页面放缩的时候页面仍然保持良好的可读性