Google网页字体在Windows上的Chrome中呈现波涛汹涌
我在我的网站上使用Google Webfonts服务，并严重依赖它。 它在大多数浏览器上呈现良好，但是在Windows上的Chrome中呈现得尤其糟糕。 非常波涛汹涌，像素化。
到目前为止，我发现Chrome需要首先加载.svg格式的字体。 然而，我使用的字体Asap仅在.woff中可用。 我使用免费的在线服务将其转换为.svg，但是当我将它添加到我的样式表（.woff之前）时，它没有改变任何东西。
我也试过：
-webkit-font-smoothing: antialiased; text-shadow: 0px 0px 0px; 希望能够帮助文本更加stream畅地呈现。
现在我已经用尽了想法，我不想改变字体。 有没有人有一个想法，我可以解决这个问题？ 我一直在使用Adobe Browserlab来testing渲染，看到我只拥有一个mac。 链接到该网站是： www.symvoli.nl/about
提前致谢！
编辑2013年4月11日：
Chrome 35 Beta似乎终于解决了这个问题：
2014年8月更新
Google最终本机修复了Chrome 37中的这个问题!!! 但由于历史原因，我不会删除这个答案。
问题
由于chrome实际上无法使用正确的抗锯齿渲染TrueType字体，所以创build该问题。 但是，铬仍然渲染SVG文件。 如果你把你的svg文件移动到woff上面的语法中，chrome会下载svg并用它来代替woff文件。 一些像你这样的技巧提议工作得很好，但只限于某些字体大小。
但是这个bug在Chrome开发者团队中是非常有名的，并且自2012年7月以来一直在修复。请参阅官方bug报告主题： 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'); } }
第一种解决scheme：
Fontspring bulletproof语法首先被修改为服务于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'); }
进一步阅读：
- 影响types呈现的CSS属性
- Chrome for Windows中更stream畅的Web字体渲染
- 如何防弹@ font-face网页字体
-webkit-text-stroke: 0.5px;
只在大文本上使用它，因为它会影响你的页面性能。
一个修补程序已经build议通过调用.svg文件， http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
我已经尝试了一些解决scheme，最后想出了一个适用于更新版本的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'); }
通过汤姆和字体spring没有为我这样做是由于某种原因。 山姆·戈达德 （ Sam Goddard）的这个修正虽然做了
经过自我实验之后，我偶然发现了这个问题似乎是一个体面的，非常简单的解决scheme。 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; }
它可能就是你使用的“asap”字体在某些尺寸下不能很好地呈现的字体。 我把你的h1的大小从3.5em改成了50px ，看起来好一点。 可能不是完美的解决scheme，但我注意到，很多谷歌的网页字体可能是不可预知的
我在Firefox中开发。 我的经验是，FF显示ttf字体，没有任何额外的规则（超过@ font-face调用字体文件的url）。 然而，Chrome是另外一回事。 即使使用-webkit-font-smoothing：antialiased; 规则它仍然显示任何字体相当粗糙。 Safari似乎没有这个问题，所以Webkit本身并不能清晰地呈现字体，这是一个Chrome问题。
我还没有尝试添加-webkit-text-stroke：0.5px; 规则，但会。
在上面的答案中，我真的很喜欢Tom Sarduy的回答。 除了对这个问题的一个很好的描述之外，他还提供了一个很棒的@ font-face堆栈来覆盖所有主要的浏览器。
另一个链接引用的网页字体呈现在铬 –
http://www.fontspring.com/blog/smoother-web-font-rendering-chrome
有同样的事情家伙。 所有浏览器都很好，除了IE浏览器 – 甚至IE10和9都没问题。 Dreamwaeevr CS6也使用类似版本的fontsprings代码，但最后有svg。 在woff和ttf之前，把所有的东西都转换成SVG。 汤姆在那里的主机例子，实际上是通过你的代码和映射到你需要的字体的path，你是在做生意！
看来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苹果版本24k
我已经尝试了很多方法： – 用font-face -webkit-font-smoothening加载svg …
后
-webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0);
旋转更顺畅，但主要问题没有消失。
对我来说，解决scheme是增加：
-webkit-text-stroke: 0.5px;
https://www.gettingthingstech.com/how-to-fix-jagged-font-rendering-in-google-chrome/
这篇文章解释了一些关于google chrome的实验function。 显然启用“DisableWrite”选项可以修复锯齿状的字体。 这显然是一个固定的PER机器，而不是全面的。
