Safari字体呈现问题

如下所示,Chrome中的文本A浅字体与Safari完全不同。Chrome显示我喜欢的字体,但是Safari在OSX和iOS上的渲染看起来太薄了。下面的Safari图像是在iOS上拍摄的,您可以看到,由于某种原因,字体看起来好像有两位文本

我一直在寻找解决办法,但没有找到有效的办法。我尝试使用-webkit字体平滑:亚像素抗锯齿</但是根据这个问题,代码不再工作了

铬:

iOS上的Safari:

以下是上面图像的代码:

h2{
字体系列:“Texta Light”,无衬线;
字体大小:3.5em;
线高:1.2米;
}

有什么解决办法吗

有一个CSS属性,文本呈现,在Safari中默认设置为optimizeSpeed。您想要更改的是:

文本呈现:优化易读性;

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

有四个可能的值:

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

•优化速度-在绘制文本时,浏览器强调渲染速度,而不是易读性和几何精度。它禁用紧排和连字

•优化易读性-浏览器强调易读性而不是渲染速度和几何精度。这允许对某些字体使用字体文件中可能包含的特殊字距和可选连字信息

•几何精度-浏览器强调几何精度而不是渲染速度和易读性。字体的某些方面(如字距调整)不会线性缩放,因此几何精度可以使使用这些字体的文本看起来很好。缩放SVG字体时,浏览器会计算像素大小,然后舍入到最接近的整数。几何精度特性允许更多流体缩放。注意:只有WebKit浏览器应用此流体值,Gecko将此值视为可识别性

还有一个附加设置-webkit字体功能设置,其中一个是字距调整:

-webkit字体功能设置

h2{
-webkit字体功能设置:“kern”1;
}

发表评论