除了它的重量之外,相同的字体在不同的浏

Question

文本在Chrome中正确显示.我希望它在所有浏览器中以这种方式显示.我怎样才能做到这一点？

我能够在Safari中解决这个问题 -webkit-font-smoothing: antialiased;

铬:

火狐:

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的解决方案.

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

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

然而,大多数人都不会注意到这种差异,用户也会接受这种差异.忘记像素完美的跨浏览器设计,除非你是:

1. 试图通过CSS关闭子像素渲染(并非所有浏览器都允许这样,文本可能很难看......)
2. 使用图像(资源要求高,难以维护)
3. 更换Flash(需要一些编程,但在iOS上不起作用)

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

text-rendering: optimizeLegibility; 

更多参考资料:

1. 部分字体渲染由font-smoothing(如上所述)控制,另一部分是text-rendering.调整这些属性可能有所帮助,因为它们的默认值在不同浏览器中是不同的.
2. 对于Chrome,如果仍然无法显示,请尝试使用此文本阴影黑客.它应该可以改善您的Chrome字体呈现,尤其是在Windows中.但是,在Windows XP下,text-shadow会发疯.小心.

Answer 2

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

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

目前,所有平台和浏览器构建似乎都没有通用修复.如所述,所有浏览器/ OS都具有不同的文本呈现引擎.

Answer 3

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

仍在试验,但到目前为止,仅针对FF的微创解决方案是:

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

Answer 4

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

Answer 5

我收集并测试了讨论的解决方案

Windows10教授x64:

* FireFox v.56.0 x32 
* Opera v.49.0
* Google Chrome v.61.0.3163.100 x64-bit

macOs X Serra v.10.12.6 Mac mini(2010年中):

* Safari v.10.1.2(12603.3.8)
* FireFox v.57.0 Quantum
* Opera v49.0

半(Safari中的微脂肪)解决了脂肪字体:

text-transform: none; // mac ff fix
-webkit-font-smoothing: antialiased; // safari mac nicer
-moz-osx-font-smoothing: grayscale; // fix fatty ff on mac

没有视觉效果

line-height: 1;
text-rendering: optimizeLegibility; 
speak: none;
font-style: normal;
font-variant: normal;

视觉效果错误:

-webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari
text-rendering: geometricPrecision !important; //more fatty in safari

不要忘记在测试时设置!important,或确保您的样式没有被覆盖