除了它的重量,相同的字体在不同的浏览器上看起来不同

文字在Chrome中正确显示。 我希望它能够在所有浏览器中以这种方式显示。 我该怎么做?

铬:
铬

更新:在Safari中用-webkit-font-smoothing: antialiased;修正-webkit-font-smoothing: antialiased;

火狐:
火狐

这是CSS:

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

和小提琴: http : //jsfiddle.net/jnxQ8/1/

确保所有浏览器的字体都一样。 如果是相同的字体,那么使用跨浏览器的CSS没有问题了。

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

更新 :对于那些不理解浏览器和操作系统字体渲染差异的人,请阅读本文和本文 。

然而,大多数人的差异并不明显,用户也接受这一点。 忘记像素完美的跨浏览器devise,除非你是:

  1. 尝试closuresCSS的子像素渲染(并非所有的浏览器都允许这样做,文本可能很丑陋…)
  2. 使用图像(资源要求高,难以维护)
  3. replaceFlash(需要一些编程,不能在iOS上运行)

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

 text-rendering: optimizeLegibility; 

更多参考资料:

  1. 字体渲染的一部分由font-smoothing (如前所述)控制,另一部分是text-rendering 。 调整这些属性可能会有所帮助,因为它们的默认值在浏览器中不一样。
  2. 对于Chrome浏览器,如果这仍然不能正常显示,请尝试使用这种文字阴影 。 它应该改善您的Chrome字体渲染,特别是在Windows中。 但是,在Windows XP下文本阴影会变得疯狂。 小心。

为了在浏览器中最好地实现@ font-faceembedded字体的标准化,请尝试在@ font-face声明或者字体样式中包含以下内容:

 speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; 

目前在所有平台和浏览器版本上看来都没有通用的修复方法。 经常说所有的浏览器/操作系统都有不同的文本渲染引擎。

这里有一些很棒的信息: https : //bugzilla.mozilla.org/show_bug.cgi?id = 857142

仍在尝试,但迄今为止,只针对FF的微创解决scheme是:

 body { -moz-osx-font-smoothing: grayscale; } 

尝试-webkit-font-smoothing: subpixel-antialiased;

我不认为在屏幕上使用“点”字体大小是一个好主意。 尝试在字体大小上使用px或em。

从W3C :

不要以pt或其他绝对长度单位指定字体大小。 它们在不同的平台上呈现不一致,用户代理(例如浏览器)无法resize。

尝试text-rendering: geometricPrecision;

text-rendering: optimizeLegibility;不同text-rendering: optimizeLegibility; ,缩放字体时需要处理字距问题,而最后一个string可以使用字距和连字。