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

问题描述

我在我的网站上使用 Google Webfonts 服务并且非常依赖它.它在大多数浏览器上呈现良好，但在 Windows 上的 Chrome 中呈现特别糟糕.非常断断续续和像素化.

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

我也试过:

-webkit-font-smoothing:抗锯齿；文字阴影:0px 0px 0px；

希望两者都能帮助文本渲染更流畅.

现在我的想法已经用完了，我不想改变字体.有谁知道我如何解决这个问题?我一直在使用 Adob​​e Browserlab 来测试渲染，看看我如何只拥有一台 mac.该网站的链接是:

2013 年 10 月更新(感谢@Catch22)

显然，某些网站在呈现 svg 时可能会遇到间歇性间距问题.所以有一个更好的方法来给它换肤.如果您使用特定于 Chrome 的媒体查询调用 svg，间距问题就会消失:

@media screen and (-webkit-min-device-pixel-ratio:0) {@字体脸{字体系列:'MyWebFont';src: url('webfont.svg#svgFontName') 格式('svg');}}

第一种方法解决方案:

修改了 Fontspring 防弹语法以首先为 svg 提供服务:

@font-face {字体系列:'MyWebFont';src: url('webfont.eot');src: url('webfont.eot?#iefix') 格式('embedded-opentype'),url('webfont.svg#svgFontName') 格式('svg'),url('webfont.woff') 格式('woff'),url('webfont.ttf') 格式('truetype');}

进一步阅读:

• 影响类型渲染的 CSS 属性
• Windows 版 Chrome 中更流畅的 Web 字体渲染
• 如何防弹@font-face 网络字体莉>

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

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