Safari 字体渲染问题 [英] Safari font rendering issues

问题描述

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

As you can see below, the Texta-Light font in Chrome appears completely different with Safari. Chrome displays the font as I like but Safari's rendering on OS X and iOS looks too thin. The Safari image below is taken on iOS and as you can see for some reason the font appears as if there is two bits of text present.

我一直在寻找解决方案，但没有找到任何有效的方法.我尝试使用 -webkit-font-smoothing: subpixel-antialiased; 但根据 这个问题，代码不再工作了.

I've looked for a solution but found nothing which works. I tried using -webkit-font-smoothing: subpixel-antialiased; but according to this question, the code isn't working anymore.

Chrome:

iOS 上的 Safari:

这是上面图片的代码:

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

有什么解决办法吗?

推荐答案

Safari 有字体问题.解决重复文本问题的最简单方法是澄清字体粗细:

Safari has an issue with fonts. The easiest fix for the duplicate text issue is clarifying the font-weight:

font-weight: 400;

使用 Lucho 的 Javascript 文本笔画解决方案并指定字体粗细将使您的文本与 Chrome 上的文本相同.

Using Lucho's Javascript's text stroke solution along with specifying font-weight will make your text the same as it is on Chrome.

这篇关于Safari 字体渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！