谷歌网页字体在Windows上的Chrome中呈现出不稳定状态

时间：2012-06-08 16:59:46

标签： css google-chrome svg fonts google-webfonts

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

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

我也试过了：

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

希望这两种方法能够帮助文本呈现更加流畅。

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

提前致谢！

编辑2013年4月11日：

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

enter image description here

12 个答案:

答案 0 :(得分：66)

2014年8月更新

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

问题

创建该问题是因为 chrome实际上无法呈现具有正确消除锯齿功能的TrueType字体。但是，chrome仍然可以很好地呈现SVG文件。如果您使用woff上方的语法移动svg文件的调用，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');
}

进一步阅读：

答案 1 :(得分：18)

-webkit-text-stroke: 0.5px;

仅在大文字上使用它，因为它会影响您的网页效果。

答案 2 :(得分：8)

此处通过首先调用.svg文件http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

建议修复

答案 3 :(得分：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');
}

答案 4 :(得分：2)

Tom＆amp; 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’);
    }
}

答案 5 :(得分：1)

它可能只是你使用“asap”在某些尺寸下不能很好地渲染的字体。我将h1的尺寸从3.5em更改为50px，看起来好一点。可能不是完美的解决方案，但我注意到很多谷歌网页字体可能无法预测

答案 6 :(得分：0)

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

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

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

答案 7 :(得分：0)

Chrome中的Web字体呈现的另一个链接参考 -

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

答案 8 :(得分：0)

有同样的事情。除了Chrome之外的所有浏览器都很好 - 甚至IE10和9都很好。 Dreamwaeevr CS6也使用了类似版本的fontsprings代码，但最后有svg。在woff和ttf之前改变它的SVG并且世界上所有的都是好的。汤姆在那里与你的例子打成一片，实际上已经过了你的代码并映射到你需要的字体的路径，你就是在做生意！

答案 9 :(得分：0)

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

我发现，如果我从IE下载字体，它比Mac上针对特定字体在Safari上做的大10k左右。 43k vs 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

答案 10 :(得分：0)

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

后

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

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

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

-webkit-text-stroke: 0.5px;

答案 11 :(得分：0)

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

这篇文章解释了一些关于谷歌chromes实验功能。显然启用＆＃34; DisableWrite＆＃34;选项修复了锯齿状字体。这显然是修复PER机器而不是全面的。

相关问题
最新问题