css – 相同的字体,但它的重量似乎不同的不同的浏览器

前端之家收集整理的这篇文章主要介绍了css – 相同的字体,但它的重量似乎不同的不同的浏览器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
文字在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 thisthis

然而,大多数人甚至没有注意到差别,用户也接受。忘记像素完美的跨浏览器设计,除非你:

>尝试通过CSS关闭子像素渲染(不是所有的浏览器都允许这样做,文本可能是丑陋的…)
>使用图像(资源要求很高,难以维护)
>更换Flash(需要一些编程,在iOS上无法使用)

更新:我检查了示例页面。通过文本呈现调整字距调整应该有助于:

text-rendering: optimizeLegibility;

更多参考:

>部分字体渲染由font-smoothing(如上所述)控制,另一部分为text-rendering.调整这些属性可能有助于在不同浏览器中其默认值不同。
>对于Chrome,如果这仍然没有显示为OK,请尝试这个text-shadow hack.它应该改善您的Chrome字体渲染,特别是在Windows。但是,在Windows XP下,文本阴影会疯了。小心。

猜你在找的CSS相关文章