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

问题描述

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

我找了一个解决方案，但没有发现任何作品我尝试使用 -webkit-font-smoothing：subpixel-antialiased; 但根据，代码不再有效。

Chrome：

iOS上的Safari浏览器：

以下是上述图片的代码： / p>

  h2 {
 font-family：'Texta-Light'，sans-serif; 
 font-size：3.5em; 
 line-height：1.2em; 
 
 
 $ 
 
 
 
有没有解决方法？
解决方案
 Safari有一个字体问题。对于重复文本问题，最简单的修正是澄清字体重量： 
 
 
  font-weight：400; 
  
使用Lucho的Javascript文本笔画解决方案以及指定字体重量将使您的文本与原文一样在Chrome上。
 
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.

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:



Safari on iOS:



Here is the code for the images above:
h2 {
    font-family: 'Texta-Light', sans-serif;
    font-size: 3.5em;
    line-height: 1.2em;
}
Is there any solution to this?
解决方案
Safari has an issue with fonts. The easiest fix for the duplicate text issue is clarifying the font-weight:
font-weight: 400;
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屋！