51

我在我的网站上使用 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 似乎终于解决了这个问题：

在此处输入图像描述

4

12 回答 12

66

2014 年 8 月更新

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

问题

之所以会出现此问题，是因为chrome 实际上无法使用正确的 anti-aliasing 渲染 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 时可能会遇到间歇性间距问题。所以有更好的方法来剥皮。如果您使用特定于 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');
}

进一步阅读：

于 2012-11-22T08:45:04.140 回答
18 
-webkit-text-stroke: 0.5px;

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

于 2012-10-07T13:57:06.530 回答
8

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

于 2012-10-31T11:50:37.400 回答
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');
}
于 2013-06-21T14:37:01.043 回答
2

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

在对自己进行了实验之后，我偶然发现了一个看起来不错的、非常容易解决这个问题的方法。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’);
    }
}
于 2013-10-02T22:01:38.017 回答
1

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

于 2012-06-08T17:16:49.300 回答
0

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

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

于 2013-05-09T23:12:07.647 回答
0

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

于 2013-06-17T15:54:39.600 回答
0

我尝试了很多方法： - 使用 font-face -webkit-font-smoothening 加载 svg ...

后

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

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

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

-webkit-text-stroke: 0.5px;
于 2014-09-02T07:15:24.687 回答
0

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

This post explains a little about google chromes experimental functions. Apparently enabling the "DisableWrite" option fixes the jagged fonts. This is obviously a fix PER machine and not on a full scale.

于 2015-03-31T22:16:15.110 回答
0

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

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

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

于 2013-03-24T22:17:40.713 回答
0

谷歌似乎可能会根据浏览器和操作系统提供不同的 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

于 2014-07-30T21:58:33.843 回答