字体渲染差异:Firefox 与 IE 与 Safari

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费积分!

在使用 CSS 声明文本的外观时,您可以非常具体。

p {
  font-family: Verdana;
  background-color: #7A2121;
  color: #B93333;
  text-decoration: underline;
  word-spacing: Normal;
  text-align: left;
  letter-spacing: 1px;
  text-indent: 15px;
  line-height: 16px;
  font-size: 10px;
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
}

而且这还不是全部… 但即使你如此具体,不同浏览器在实际渲染文本时仍然存在很大差异。这里的重要教训是,无论你试图对文本施加多少控制,最终你都无法获得多少控制。更不用说大多数浏览器都允许用户实时调整和覆盖字体设置。

以下是几个浏览器中完全相同页面的截图。

Mac Firefox 2
firefoxtext.png

Mac Safari 2:(有点模糊)
safaritext.png

Mac Opera 9
opera923.png

Mac IE 5
macie52.png

PC IE 6(Windows 2000)

PC IE 7

PC IE 8

PC Opera

PC Firefox

这些差异似乎非常细微,但看看将这些截图彼此叠加,并在 Photoshop 中应用一些透明度后会发生什么。

事实上,这些差异在单行文本中非常细微,但你可以看到,当这些差异叠加在一起时,它们会导致相当大的差异。最重要的是,不要指望文本用于特定的布局定位,正如你在这两条线上的图像中看到的那样,它们在不同浏览器中的位置会有所不同。

查看制作这些屏幕截图的页面。

特别感谢 Erik 在我丢失这些图像后重新创建了这篇文章的图像!