css - Safari 字体渲染问题

Question

如下所示，Chrome 中的 Texta-Light 字体与 Safari 中的字体完全不同。 Chrome 按我喜欢的方式显示字体，但 Safari 在 OS X 和 iOS 上的渲染看起来太细了。下面的 Safari 图像是在 iOS 上拍摄的，正如您所看到的，出于某种原因，字体看起来好像有两位文本。

我一直在寻找解决方案，但没有找到任何有效的方法。我尝试使用 -webkit-font-smoothing: subpixel-antialiased; 但根据 this question ，代码不再有效。

Chrome:

iOS 上的 Safari:

这是上面图片的代码:

h2 {
    font-family: 'Texta-Light', sans-serif;
    font-size: 3.5em;
    line-height: 1.2em;
}

有什么解决办法吗？

Answer 1

有一个 CSS 属性，text-rendering，在 Safari 中默认设置为 optimizeSpeed。您要更改的是:

text-rendering:optimizeLegibility;

来自 https://css-tricks.com/almanac/properties/t/text-rendering/

有四种可能的值:

• 自动(默认)- 浏览器在绘制文本时对何时优化速度、易读性和几何精度进行有根据的猜测。请注意，不同的浏览器对该值的解释不同。

• optimizeSpeed - 浏览器在绘制文本时强调呈现速度而不是易读性和几何精度。它禁用字距调整和连字。

• optimizeLegibility - 浏览器强调渲染速度和几何精度的易读性。这使得可以使用特定字体的字体文件中可能包含的特殊字距调整和可选的连字信息。

• geometricPrecision - 浏览器强调几何精度而不是渲染速度和易读性。字体的某些方面(例如字距调整)不是线性缩放的，因此 geometricPrecision 可以使使用这些字体的文本看起来不错。缩放 SVG 字体时，浏览器会计算像素大小，然后四舍五入到最接近的整数。 geometricPrecision 属性允许更流畅的缩放。注意:只有 WebKit 浏览器应用此流动值，Gecko 会像优化易读性一样处理该值。

还有一个额外的设置-webkit-font-feature-settings，其中一个是kerning:

-webkit-font-feature-settings

h2 {
     -webkit-font-feature-settings: "kern" 1;
}