Google网络字体在Windows上的Chrome中呈现断续 [英] Google webfonts render choppy in Chrome on Windows

问题描述

我在我的网站上使用Google网页字体服务，并且非常依赖它。它在大多数浏览器上呈现正常，但在Windows的Chrome上，它特别糟糕。非常波动和像素化。

到目前为止，我发现Chrome需要首先加载.svg格式的字体。我使用的字体，称为Asap，只能在.woff中使用。我使用免费在线服务将其转换为.svg，但是当我添加到我的样式表（在.woff之前），它没有改变任何东西。

I 've also tried：

  -webkit-font-smoothing：antialiased; 
 text-shadow：0px 0px 0px; 
  

希望这两者都能帮助文本更平滑地呈现。

现在我已经用完了想法，我不想改变字体。有人有一个想法我如何可以解决这个问题？我一直在使用Adobe Browserlab来测试渲染，看到如何我只拥有一个mac。指向该网站的链接为：

2013年10月更新（感谢@ Catch22）

显示某些网站在呈现svg 时可能会遇到间歇性间距问题。因此，有一个更好的方式去皮肤。如果您使用特定于Chrome的媒体查询调用svg，间距问题就会消失：

  @media屏幕和（-webkit- min-device-pixel-ratio：0）{
 @ font-face {
 font-family：'MyWebFont'; 
 src：url（'webfont.svg＃svgFontName'）format（'svg'）; 
} 
} 
  

第一种方法解决方案：

Fontspring bulletproof语法修改为先服务于svg：

  @ font-face {
 font-family：'MyWebFont'; 
 src：url（'webfont.eot'）; 
 src：url（'webfont.eot？#iefix'）format（'embedded-opentype'），
 url（'webfont.svg＃svgFontName'）format（'svg'），
 url（'webfont.woff'）format（'woff'），
 url（'webfont.ttf'）format（'truetype'）; 
} 
  

进一步阅读：

• CSS影响类型呈现的属性


• 在Chrome for Windows中平滑的网络字体呈现


• 如何使用Bulletproof @ font-face Web字体

I use the Google Webfonts service on my website and rely heavily on it. It renders fine on most browsers, but in Chrome on Windows it renders especially bad. Very choppy and pixelated.

What i have found out so far is that Chrome requires the .svg format font to be loaded first. The font i am using however, called Asap, was only available in .woff. I converted it to .svg using a free online service, but when i added that to my stylesheet (before the .woff), it didn't change anything.

I've also tried:

-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;

Hoping that either would help the text render more smoothly.

Right now i've run out of ideas and i would hate to change fonts. Does anyone have an idea how i can solve this problem? I've been using the Adobe Browserlab to test the rendering, seeing as how i only own a mac. The link to the site is: www.symvoli.nl/about

Thanks in advance!

Edit April 11th, 2013:

Chrome 35 Beta seems to have finally solved this issue:

解决方案

Update August 2014

Google finally fixes this issue in Chrome 37 natively!!!. But for historical reasons I won't delete this answer.

Problem

The issue is created because chrome actually cannot render TrueType fonts with correct anti-aliasing. However, chrome still renders SVG files well. If you move the call for your svg file up in your syntax above the woff, chrome will download the svg and use it instead of the woff file. Some tricks like you propose work well, but only on certain font sizes.

But this bug is very well known to the Chrome developer team, and has been in fixing since July 2012. See the official bug report thread here: https://code.google.com/p/chromium/issues/detail?id=137692

Update Oct 2013 (Thanks to @Catch22)

Apparently some websites may experience intermittent spacing issues when rendering the svg. So there is a better way to skin it. If you call the svg with a media query specific to Chrome, the spacing issues disappear:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.svg#svgFontName') format('svg');
  }
}

First approach solution:

The Fontspring bulletproof syntax modified to serve the svg first:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.svg#svgFontName') format('svg'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf')  format('truetype');
}

Further reading:

• CSS properties that affect type rendering
• Smoother Web Font Rendering in Chrome for Windows
• How to Bulletproof @font-face Web Fonts

这篇关于Google网络字体在Windows上的Chrome中呈现断续的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！