css - 如何让字体在所有浏览器中正确显示？

Question

我的网站的 CSS 文件中有以下内容：

body {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.125em;
line-height: 1.5em;
}

在我 Mac 上的 Safari 中，该网站的字体看起来像我想要的那样：

但是，在 IE 和 Chrome 中的 Windows 计算机上，字体与上述​​不同，请参阅：

我的问题是，如何让字体在所有操作系统上的所有浏览器中看起来都一样，就像上面的截图 #1 一样？

在此先感谢您的帮助。

Answer 1

这是一个字体平滑的问题，这与浏览器不同，它们不会以相同的方式“读取”字体。

这是一篇解释该过程的文章，字体平滑解释。

这是一个 CSS hack，您可以尝试以在任何地方获得相同的结果：

html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

进一步阅读：4.2 字体平滑：W3C 的 CSS 3 字体模块规范中的“font-smooth”属性

Answer 2

尽管您可以测试您使用的字体的变化并可能重新考虑您的字体选择，但您对此无能为力。某些字体比其他字体更受这些差异的影响。

在不同的平台上，在某种程度上，在不同的浏览器中，字体的呈现方式是不同的。参见例如A Closer Look At Font Rendering。

渲染也可能取决于系统和/或浏览器设置。我在 Windows 上看到的在普通文本上测试您的样式表时，与您的屏幕截图非常不同。

Answer 3

Windows以其糟糕的字体平滑而闻名；一个可靠的跨浏览器替代方案是用 .png 图像替换您的整个内容（因为 .jpg 在文本中往往很糟糕）。自然，这不是一个可行的替代方案，因此在所有浏览器都支持该font-smoothing属性之前（如上所示），您将陷入当前情况。