CSS 谷歌网络字体在 Windows 上的 Chrome 中呈现断断续续

Google webfonts render choppy in Chrome on Windows

提问by Joey

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.

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

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.

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

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

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

Thanks in advance!

提前致谢！

Edit April 11th, 2013:

2013 年 4 月 11 日编辑：

Chrome 35 Beta seems to have finally solved this issue:

Chrome 35 Beta 似乎终于解决了这个问题：

回答by Tom Sarduy

Update August 2014

2014 年 8 月更新

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

谷歌终于在 Chrome 37 中解决了这个问题！！！。但由于历史原因，我不会删除这个答案。

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.

之所以会出现此问题，是因为chrome 实际上无法使用正确的 anti-aliasing 呈现 TrueType 字体。但是，chrome 仍然可以很好地呈现 SVG 文件。如果您将 svg 文件的调用移动到 woff 上方的语法中，chrome 将下载 svg 并使用它而不是 woff 文件。像您提出的一些技巧效果很好，但仅限于某些字体大小。

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

但是 Chrome 开发团队非常熟悉这个错误，并且自 2012 年 7 月以来一直在修复。请参阅此处的官方错误报告线程：https: //code.google.com/p/chromium/issues/detail?id= 137692

Update Oct 2013 (Thanks to @Catch22)

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

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

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

@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:

Fontspring 防弹语法修改为首先服务于 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');
}

Further reading:

进一步阅读：

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

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

回答by Daniel Sachs

-webkit-text-stroke: 0.5px;

use it only on large text, since it will affect your page performance.

仅在大文本上使用它，因为它会影响您的页面性能。

回答by cmccarra

A fix has been suggested here by calling the .svg file first, http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

这里建议通过首先调用 .svg 文件进行修复，http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

回答by Josh Brown

I've tried a number of solutions and finally came up with one that works with newer versions of Chrome which don't fall for changing the order of the files:

我尝试了多种解决方案，最后想出了一个适用于较新版本的 Chrome 的解决方案，这些版本不会改变文件的顺序：

Essentially, I moved the TTF file into a Mozilla specific section.

本质上，我将 TTF 文件移动到 Mozilla 特定部分。

@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');
}
@-moz-font-face {
    font-family: 'MyWebFont';    
    src: url('webfont.ttf')  format('truetype');
}

回答by Prae

Answer by Tom & font-springdidn't do it for me for some reason. This fix by Sam Goddarddid though :

由于某种原因，Tom & font-spring 的回答没有为我做。山姆戈达德的这个修复虽然做了：

After experimenting myself, I stumbled across what appears to be a decent, very easy fix for this issue. It appears that Chrome utilises the .svg file in the @font-face kit, and doesn't like being called last. Below is the standard call for @font-face using CSS:

在亲自试验之后，我偶然发现了一个看起来不错的方法，很容易解决这个问题。Chrome 似乎使用了@font-face 工具包中的 .svg 文件，并且不喜欢最后被调用。下面是使用 CSS 对 @font-face 的标准调用：

// font-face inclusion
@font-face {
  font-family: 'font-name';
                src: url('path-to-font/font-name.eot');
                src: url('path-to-font/font-name.eot?#iefix') format('eot'),
                url('path-to-font/font-name.woff') format('woff'),
                url('path-to-font/font-name.ttf') format('truetype'),
                url('path-to-font/font-name.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

As can be seen in the example, the .svg file comes last in the list of called URLs. If we amend the code to target webkit browsers, then tell them to solely utilize the .svg file.

从示例中可以看出，.svg 文件在被调用 URL 列表中排在最后。如果我们修改代码以针对 webkit 浏览器，那么告诉他们只使用 .svg 文件。

// Usage
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: ‘font-name';
    src: url(‘path-to-font/font-name.svg') format(‘svg');
    }
}

回答by Keith

It could just be the font your using "asap" doesn't render all that well at certain sizes. I changed the size of your h1from 3.5emto 50pxand it looks a little better. May not be the perfect solution but I have noticed that a lot of google webfonts can be unpredictable

它可能只是您使用“asap”的字体在某些尺寸下不能很好地呈现。我把你的尺寸h1从3.5em改为50px，看起来好多了。可能不是完美的解决方案，但我注意到很多 google webfonts 可能是不可预测的

回答by Max West

I develop in Firefox. My experience is that FF displays ttf fonts very well without any extra rules (beyond the @font-face calling the url for the font file). Chrome, however, is a different story. Even with with the -webkit-font-smoothing: antialiased; rule it still displays any font quite raggedly. Safari doesn't seem to have that problem, so it's not inherently Webkit that can't render a font cleanly, it's a Chrome problem.

我在 Firefox 中开发。我的经验是 FF 可以很好地显示 ttf 字体，没有任何额外的规则（除了 @font-face 调用字体文件的 url）。然而，Chrome 则是另一回事。即使使用 -webkit-font-smoothing: antialiased; 规则它仍然显示任何字体相当参差不齐。Safari 似乎没有这个问题，所以并不是 Webkit 天生就不能干净地呈现字体，而是 Chrome 的问题。

I haven't tried adding the -webkit-text-stroke: 0.5px; rule, but will.

我还没有尝试添加 -webkit-text-stroke: 0.5px; 规则，但会。

Of the answers above I really like Tom Sarduy's answer best. Aside from a good description of the problem, he gives a great @font-face stack to use to cover all the major browsers.

在上面的答案中，我最喜欢 Tom Sarduy 的答案。除了对问题的一个很好的描述之外，他还提供了一个很棒的 @font-face 堆栈，用于覆盖所有主要浏览器。

回答by VGruenhagen

Another link reference for web font rendering in chrome -

chrome 中 Web 字体渲染的另一个链接参考 -

http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

回答by Simon Pointer

Had the same thing guys. Good in all browsers except chrome - even IE10 and 9 were fine. Dreamwaeevr CS6 also uses a similar version of fontsprings code, but has the svg at the end. Change it round for SVG before woff and ttf and all in the world is good. Tom is bang on with hos example there, in fact past that into your code and map paths to the fonts you need, and you're in business!

有同样的事情伙计们。在除 chrome 之外的所有浏览器中都很好——甚至 IE10 和 9 也很好。Dreamwaeevr CS6 也使用了类似版本的 fontsprings 代码，但在末尾有 svg。在 woff 和 ttf 之前将其更改为 SVG，世界上一切都很好。汤姆在那里用了 hos 示例，实际上将其传递到您的代码中，并将路径映射到您需要的字体，然后您就可以开展业务了！

回答by Rick Paul

It seems that Google might serve different woff files depending on the browser and OS.

似乎 Google 可能会根据浏览器和操作系统提供不同的 woff 文件。

I found that if I download the font from IE, it's about 10k bigger than if done on Safari from the Mac for a particular font. 43k vs 33k. Also, the IE version seems to look fine on the Mac, but the Mac version doesn't seem to work fine on the PC. The Mac version looks the worst in Mozilla Firefox on the PC.

我发现如果我从 IE 下载字体，它比在 Mac 上为特定字体在 Safari 上下载的字体大约 10k。43k 与 33k。另外，IE 版本在 Mac 上看起来不错，但 Mac 版本在 PC 上似乎不能正常工作。Mac 版本在 PC 上的 Mozilla Firefox 中看起来最糟糕。

Try this: http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic

试试这个：http: //fonts.googleapis.com/css?family=Source+Sans+Pro: 400,600,400italic,600italic

SourceSansPro-Regular.woff PC version 27k

SourceSansPro-Regular.woff PC 版 27k

SourceSansPro-Regular.woff Apple version 24k

SourceSansPro-Regular.woff 苹果版 24k