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

Question

5

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

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

在我的Mac上的Safari浏览器中，该网站的字体看起来我想要的样子：

。但是，在Windows电脑上的IE和Chrome浏览器中，字体不像上面那样，请参见：

。我的问题是，如何使所有浏览器和操作系统中的字体都看起来像上面第一个截图？谢谢您的帮助。

- LookingForHelp7

3个回答

2

尽管您可以测试所使用的字体的变化并重新考虑您的字体选择，但您无法对此做任何事情。在不同的平台和浏览器中，字体呈现方式也有所不同。请参见例如A Closer Look At Font Rendering。

字体呈现还可能取决于系统和/或浏览器设置。当我在Windows上测试您的样式表时，看到的与您的屏幕截图非常不同。

- Jukka K. Korpela

0

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

- Jules

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mohamed Anis Dahmani · Accepted Answer

这是字体平滑化的问题，不同浏览器之间有所不同，它们不能以相同的方式“读取”字体。

这里有一篇文章解释了这个过程：字体平滑化解释。

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

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

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