我在我的网站上使用Google Webfonts服务并且非常依赖它。大多数浏览器都可以正常渲染，但在Windows上的Chrome中渲染效果尤其差。非常不流畅和像素化。
目前我所了解到的是，Chrome要求先加载.svg格式的字体。然而我正在使用的字体叫做Asap，只有.woff格式。我使用了一个免费的在线转换工具将它转换为.svg格式，但当我将其添加到我的样式表中（放在.woff文件之前），它并没有改变任何东西。
我还尝试过：
-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;
。谷歌最终在Chrome 37中本地修复了此问题！但由于历史原因，我不会删除这个答案。
该问题的产生是因为Chrome实际上无法正确抗锯齿渲染TrueType字体。但是，Chrome仍然可以很好地渲染SVG文件。如果您在语法中将对SVG文件的调用命令放在woff文件之前，Chrome将下载SVG并使用它而不是woff文件。您提出的一些技巧确实有效，但仅适用于特定的字体大小。
但是，Chrome开发团队非常熟悉这个错误，并且从2012年7月以来一直在修复中。请参见官方错误报告线程：https://code.google.com/p/chromium/issues/detail?id=137692
显然，一些网站在呈现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');
}
-webkit-text-stroke: 0.5px;
只在大文本上使用它，因为它会影响页面性能。
@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');
}
Tom和font-spring的回答对我来说没有用，不知道为什么。但是Sam Goddard的修复方法有效：
经过自己的试验，我偶然发现了一个看起来相当简单的解决这个问题的方法。似乎Chrome使用@font-face kit中的.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;
}// 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’);
}
}
这可能只是你使用的字体在某些大小下无法很好地呈现。我将你的h1标签从3.5em更改为50px，看起来好了一些。这可能不是完美的解决方案，但我注意到许多谷歌网络字体可能是不可预测的。
我在Firefox中进行开发。我的经验是，FF可以很好地显示ttf字体，无需任何额外的规则（除了@font-face调用字体文件的url）。然而，Chrome则不同。即使使用-webkit-font-smoothing: antialiased;规则，它仍然会将任何字体显示得相当粗糙。Safari似乎没有这个问题，所以它并不是Webkit本身不能清晰地呈现字体，而是Chrome的问题。
我还没有尝试添加-webkit-text-stroke: 0.5px;规则，但会尝试。
在上面的答案中，我真的很喜欢Tom Sarduy的答案。除了对问题的良好描述外，他还提供了一个很棒的@font-face堆栈，可用于覆盖所有主要浏览器。
Chrome中用于网页字体渲染的另一个链接参考 -
http://www.fontspring.com/blog/smoother-web-font-rendering-chrome
看起来谷歌可能会根据浏览器和操作系统提供不同的woff文件。
我发现如果我从IE下载字体，与从Mac上的Safari下载相比，它会大约多出10k。对于特定的字体来说，43k对比33k。此外，IE版本在Mac上看起来很好，但是Mac版本在PC上似乎无法正常工作。在PC上，Mac版本在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
https://www.gettingthingstech.com/how-to-fix-jagged-font-rendering-in-google-chrome/
本文介绍了一些关于Google Chrome实验性功能的内容。显然启用“DisableWrite”选项可以解决字体锯齿问题。这显然是一种针对单个机器而非全面的修复方法。
@font-face字体都有这个问题？ - Simon East