css - 相同的字体，除了粗细在不同浏览器上似乎不同

Question

文本在 Chrome 中正确显示。我希望它在所有浏览器中都以这种方式显示。我该怎么做？

我能够在 Safari 中使用 -webkit-font-smoothing: antialiased; 修复此问题

Chrome :

火狐:

h1 {
    font-family: Georgia;
    font-weight: normal;
    font-size: 16pt;
    color: #444444;
    -webkit-font-smoothing: antialiased;
}

<h1>Hi, my name</h1>

还有一个 JSFiddle:http://jsfiddle.net/jnxQ8/1/

Answer 1

确保所有浏览器的字体都相同。如果是相同的字体，则使用跨浏览器 CSS 问题无法解决。

因为每个浏览器都有自己的字体渲染引擎，所以都是不一样的。它们在更高版本或不同操作系统中也可能不同。

更新:对于那些不了解浏览器和操作系统字体渲染差异的人，read this和 this .

但是，大多数人甚至都不会注意到这种差异，用户也能接受这一点。忘记像素完美的跨浏览器设计，除非你是:

1. 尝试通过 CSS 关闭子像素渲染(并非所有浏览器都允许这样做，而且文本可能很难看...)
2. 使用图像(资源要求高且难以维护)
3. 替换 Flash(需要一些编程并且不适用于 iOS)

---

更新:我检查了示例页面。通过文本渲染调整字距应该有所帮助:

text-rendering: optimizeLegibility; 

更多引用:

1. 部分字体渲染由 font-smoothing 控制(如前所述)，另一部分是 text-rendering .调整这些属性可能会有所帮助，因为它们的默认值在不同浏览器中是不同的。
2. 对于 Chrome，如果这仍然不适合您，请尝试此 text-shadow hack .它应该可以改善您的 Chrome 字体渲染，尤其是在 Windows 中。然而，text-shadow 在 Windows XP 下会变得疯狂。小心。