css – Safari字体渲染问题

如下所示，Chrome中的Texta-Light字体与Safari完全不同。 Chrome显示我喜欢的字体，但Safari在OS X和iOS上的渲染看起来太薄了。下面的Safari图像是在iOS上拍摄的，您可以看到由于某种原因，字体显示为存在两位文本。

我找了一个解决方案，但没有发现什么工作。我尝试使用-webkit-font-smoothing：subpixel-antialiased;但根据this question，代码不再工作了。

铬：

iOS上的Safari

以下是上图的代码：

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

有什么解决方案吗？

解决方法

有一个CSS属性，文本渲染，在Safari中默认设置为optimizeSpeed。你想改变的是：

text-rendering:optimizeLegibility;

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

有四个可能的值：

•自动(默认) – 浏览器对绘制文本时的速度，可读性和几何精度进行优化的教育猜测。请注意，不同的浏览器会以不同的方式解释此值。

•optimizeSpeed – 浏览器在绘制文本时强调渲染速度超过可读性和几何精度。它禁止字距和连字。

•优化权限 – 浏览器强调易于渲染速度和几何精度。这使得可以使用字体文件中可能包含的某些字体的特殊字距调整和可选连字信息。

•geometricPrecision – 浏览器强调几何精度超过渲染速度和易读性。字体的某些方面 – 如字距调整 – 不会线性缩放，因此几何精度可以使文字使用这些字体看起来不错。当SVG字体缩放时，浏览器会计算像素大小，然后舍入到最接近的整数。几何精度属性允许更多的流体缩放。注意：只有WebKit浏览器应用此流体值，Gecko会像optimLegibility一样处理该值。

还有一个额外的设置-webkit-font-feature-settings，其中一个是字距调整：

-webkit-font-feature-settings

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

原文地址：https://www.jb51.cc/css/219699.html