5

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

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

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

http://i.imgur.com/mywDZ.png

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

http://i.imgur.com/aL0vi.jpg

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

在此先感谢您的帮助。

4

3 回答 3

5

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

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

这是一个 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”属性

于 2012-10-28T01:53:04.797 回答
2

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

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

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

于 2012-10-28T06:47:33.260 回答
0

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

于 2012-10-28T04:43:16.023 回答