Google webfonts 在 Windows 上的 Chrome 中呈现断断续续

Posted 2023-03-06

【中文标题】Google webfonts 在 Windows 上的 Chrome 中呈现断断续续

【英文标题】：Google webfonts render choppy in Chrome on Windows

【发布时间】：2012-06-12 18:14:57

【问题描述】：

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

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

我也试过了：

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

希望两者都能帮助文本呈现更流畅。

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

提前致谢！

2013 年 4 月 11 日编辑：

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

【问题讨论】：

哦，哇，感谢您提出这个问题，我以前从未注意到它。谷歌网络字体在我自己的网站上看起来也很不稳定。

只是谷歌网络字体出现了这个问题吗？还是所有@font-face 字体？

我写了一篇关于这个的详细博客文章。修复：How to fix the ugly font rendering in Google Chrome，这里也有人问过：***.com/q/11487427/1114320

什么 Chrome 35？现在是 2014 年 4 月 4 日，我还有最新的 34 个。我很困惑。

Chrome 35 Beta，即。 thenextweb.com/google/2014/04/10/…

【参考方案1】：

2014 年 8 月更新

Google 终于在 Chrome 37 中原生修复了这个问题！！！。但由于历史原因，我不会删除这个答案。

问题

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

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

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

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

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

第一种方法解决方案：

修改后的 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');

延伸阅读：

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

【讨论】：

很遗憾，这仍然是一个问题（最后更新于 2013 年 4 月 24 日）code.google.com/p/chromium/issues/detail?id=137692#c104

我实际上不必修改 Fontsquirrel/Fontspring 防弹语法——我只是按原样使用它，它修复了渲染问题。

如果只有 TTF 可用，从哪里获取 SVG 文件？

为什么如果你从谷歌 cdn 调用（这是更快和更好的做法）他们会在 svg 之前发送真实类型。糟糕的谷歌

Fontspring 博客文章已更新，建议使用 Chrome 特定的媒体查询以避免在使用 SVG 时出现一些间距问题 - fontspring.com/blog/smoother-rendering-in-chrome-update

【参考方案2】：

-webkit-text-stroke: 0.5px;

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

【讨论】：

这在非 Windows Chrome 上看起来如何？

【参考方案3】：

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

【参考方案4】：

我尝试了多种解决方案，最后想出了一个适用于新版本 Chrome 的解决方案，它不会因为更改文件的顺序而受到影响：

基本上，我将 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');

【参考方案5】：

Tom 和font-spring 的回答出于某种原因没有为我做这件事。 Sam Goddard 的这个修复虽然做到了：

在进行了自己的实验后，我偶然发现了一个看起来不错且非常容易解决此问题的方法。 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;

从示例中可以看出，.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’);
    

【讨论】：

最好添加相关示例或信息，而不是简单地提供链接。如果链接死了；你会得到一个没有实质内容的答案。

【参考方案6】：

这可能只是您使用“asap”的字体在某些尺寸下不能很好地呈现。我将您的h1 的大小从3.5em 更改为50px，看起来好多了。可能不是完美的解决方案，但我注意到很多谷歌网络字体可能是不可预测的

【讨论】：

但不幸的是，这并不能解释为什么它可以在基于 OS X 的浏览器中完美呈现，令我惊讶的是，在 Internet Explorer 中。但如果有的话，我肯定会研究这个解决方案，至少试着把它弄平一点

谷歌浏览器使用抗锯齿，但文本看起来比其他浏览器更像素化，因为它只支持水平抗锯齿。

【参考方案7】：

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

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

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

【参考方案8】：

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

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

【参考方案9】：

伙计们也有同样的经历。在除 chrome 之外的所有浏览器中都很好 - 甚至 IE10 和 9 也很好。 Dreamwaeevr CS6 也使用类似版本的 fontsprings 代码，但末尾有 svg。在 woff 和 ttf 之前将其更改为 SVG，世界上一切都很好。 Tom 非常喜欢那里的 hos 示例，事实上，在您的代码中并将路径映射到您需要的字体中，然后您就开始做生意了！

【参考方案10】：

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

我发现如果我从 IE 下载字体，它比在 Mac 上的 Safari 上下载特定字体的字体大 10k。 43k 对 33k。此外，IE 版本在 Mac 上看起来不错，但 Mac 版本在 PC 上似乎无法正常工作。 Mac 版在 PC 上的 Mozilla Firefox 中看起来最差。

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

SourceSansPro-Regular.woff PC 版本 27k

SourceSansPro-Regular.woff Apple 版本 24k

【参考方案11】：

我尝试了很多方法： - 使用字体加载 svg -webkit-字体平滑 ...

之后

-webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0);

旋转更顺畅，但主要问题还没有消失。

对我来说，解决方案是添加：

-webkit-text-stroke: 0.5px;

【参考方案12】：

https://www.gettingthingstech.com/how-to-fix-jagged-font-rendering-in-google-chrome/

这篇文章解释了一些关于谷歌浏览器实验功能的信息。显然启用“DisableWrite”选项可以修复锯齿状字体。这显然是一个修复 PER 机器，而不是全面的。