CSS字体大小: em与px、pt、百分比之间的对比

原文：kyleschaeffer.com

CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性。在CSS中,你能够用四个不一样的单位度量来显示在web浏览器中的文本 大小。这四个单位哪种最适合Web? 这个问题引发了普遍的争论。找到一个肯定的答案是困难的, 由于这个问题,自己就是如此难以回答。

接触这些单位

 1. “Ems”(em):“em”是一个可伸缩的单位, 用于web文档媒体展现。一个em等于当前的字体大小,例如,若是文档的字体大小是12 pt,1 em等于12 pt。Ems在本质上是可伸缩的,因此2 em至关于24 pt，.5 em至关于6 pt等。ems因为其可伸缩性和适应移动设备的特性在web文档中正变得愈来愈受欢迎。

2. 像素(px):像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站。像素单元的一个问题是,它没有为视障读者 的扩展,以适应移动设备。

3. 点(pt):点一般用于印刷媒体(任何打印在纸上的媒体,等等)。一个点等于一英寸的1/72。点更像像素,他们是固定大小的单位,不能伸缩。

4. 百分比(%):百分比单位更像“em”单位,除了一些根本性的差别。首先,当前的字体大小等于100%(好比12 pt = 100%)。当使用百分比单位,你的文字在移动设备上仍然保持彻底的可伸缩性和可访问性。

那么，区别是什么呢?

　　当你动态地观察他们就很容易理解字体大小单位之间的区别。通常来讲,1 em = 12 pt = 16 px = 100%。当使用这些font-size, 增长基础本字体大小(使用CSS选择器)从100%到120%，让咱们看看会发生什么。

　　正如你所看到的, 随着基本字体大小增长em和百分比单位变大,但px 和 pt 没有变化。为你的文本设置一个绝对的大小很容易,但它是更容易在你的访客使用可伸缩的文本,能够显示任何设备或机器上。出于这个缘由,em和百分比单位是web文档文本的首选。

em和percent的对比

　　咱们定义点和像素单位不必定是最适合web文档,留下来是的em和百分比单位。在理论上,em和百分比单位是相同的,但在应用程序中,他们实际上有一些细微的差异须要着重考虑。

　　在上面的示例中,咱们使用百分比单位做为咱们的基础字体大小(body上标记)。若是你把你的字体大小从百分比变为ems(即body{font- size:1 em;}),你可能不会注意到有什么差异。让咱们看看当“1 em”是咱们的body字体大小,当客户端改变浏览器的“文字大小”设置(这在一些浏览器中可用,如Internet Explorer)会发生什么。

　　当客户端的浏览器文本大小设置为“medium”, ems和百分比之间没有区别。然而,当设置改变,差异是至关大的。“Smallest”设置,ems比百分比小得多,而当设置为“Largest”,这时 偏偏相反,ems比百分比显示地更大。有些可能会说,当真正去扩展时em单位在扩展,在实际的应用程序中,em文本尺度变化太大, 在一些客户端机器上最小的文本变得不是很清晰。

结论

　　理论上,em单位是网上新的和即将到来的字体大小标准,但在实践中,百分比单位彷佛给用户提供一个更加一致的和可访问的显示。当客户端设置改变,百分比文本以合理的比例扩展,容许设计师保持可读性,可访问性和视觉设计。

赢家:百分比(%)。

附录(2011年1月)

　　从我写这篇文章已经有几年了,我想总结那段时间所发生的讨论。通常来讲,当我开始一个新的设计,我将在body元素上使用百分比(body { font-size: 62.5%; })，而后使用em单位大小来比较。只要body使用百分比单位设置,您能够选择使用百分比或ems或其余任何CSS规则和选择器而且在你的基础字体大小 上保持使用百分比的好处。在过去的几年中,这确实成为设计的标准。

　　像素如今被认为是可接受的字体大小单位(用户可使用浏览器的“缩放”功能读小文本),虽然因为移动设备很是高的密度屏幕(一些Android和 iPhone设备每英寸超过200到 300个像素,让你11 - 12-pixel字体很难看到!)他们也开始引发一些问题。所以,我将继续使用百分比做为web文档中的基础字体大小。一如既往,鼓励和欢迎讨论和想法， 感谢在过去的两年里关于这个问题的全部评论！