文字在Chrome中正确显示。我希望它在所有浏览器中以这种方式显示。我如何做到这一点?
铬:
UPDATE:在Safari中修复了-webkit-font-smoothing:antialiased;
Firefox:
这是CSS:
font-family: Georgia; font-weight: normal; font-size: 16pt; color: #444444; -webkit-font-smoothing: antialiased;
和一个小提琴:http://jsfiddle.net/jnxQ8/1/
解决方法
确保所有浏览器的字体都相同。如果是相同的字体,那么问题没有解决方案使用跨浏览器CSS。
因为每个浏览器都有自己的字体渲染引擎,他们都是不同的。它们也可能在以后的版本,或不同的操作系统不同。
更新:对于那些不了解浏览器和操作系统字体呈现差异的用户,read this和this。
然而,大多数人甚至没有注意到差别,用户也接受。忘记像素完美的跨浏览器设计,除非你:
>尝试通过CSS关闭子像素渲染(不是所有的浏览器都允许这样做,文本可能是丑陋的…)
>使用图像(资源要求很高,难以维护)
>更换Flash(需要一些编程,在iOS上无法使用)
更新:我检查了示例页面。通过文本呈现调整字距调整应该有助于:
text-rendering: optimizeLegibility;
更多参考:
>部分字体渲染由font-smoothing
(如上所述)控制,另一部分为text-rendering
.调整这些属性可能有助于在不同浏览器中其默认值不同。
>对于Chrome,如果这仍然没有显示为OK,请尝试这个text-shadow hack.它应该改善您的Chrome字体渲染,特别是在Windows。但是,在Windows XP下,文本阴影会疯了。小心。