文本在 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/
最佳答案
确保所有浏览器的字体都相同。如果是相同的字体,则使用跨浏览器 CSS 问题无法解决。
因为每个浏览器都有自己的字体渲染引擎,所以都是不一样的。它们在更高版本或不同操作系统中也可能不同。
更新:对于那些不了解浏览器和操作系统字体渲染差异的人,read this和 this .
但是,大多数人甚至都不会注意到这种差异,用户也能接受这一点。忘记像素完美的跨浏览器设计,除非你是:
- 尝试通过 CSS 关闭子像素渲染(并非所有浏览器都允许这样做,而且文本可能很难看...)
- 使用图像(资源要求高且难以维护)
- 替换 Flash(需要一些编程并且不适用于 iOS)
更新:我检查了示例页面。通过文本渲染调整字距应该有所帮助:
text-rendering: optimizeLegibility;
更多引用:
- 部分字体渲染由
font-smoothing
控制(如前所述),另一部分是text-rendering
.调整这些属性可能会有所帮助,因为它们的默认值在不同浏览器中是不同的。 - 对于 Chrome,如果这仍然不适合您,请尝试此 text-shadow hack .它应该可以改善您的 Chrome 字体渲染,尤其是在 Windows 中。然而,text-shadow 在 Windows XP 下会变得疯狂。小心。
关于css - 相同的字体,除了粗细在不同浏览器上似乎不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5082632/