谷歌网络字体在Windows上的Chrome浏览器中呈现出不流畅的情况

Question

谷歌网络字体在Windows上的Chrome浏览器中呈现出不流畅的情况

52

我在我的网站上使用Google Webfonts服务并且非常依赖它。大多数浏览器都可以正常渲染，但在Windows上的Chrome中渲染效果尤其差。非常不流畅和像素化。

目前我所了解到的是，Chrome要求先加载.svg格式的字体。然而我正在使用的字体叫做Asap，只有.woff格式。我使用了一个免费的在线转换工具将它转换为.svg格式，但当我将其添加到我的样式表中（放在.woff文件之前），它并没有改变任何东西。

我还尝试过：

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

希望其中任意一种方法能让文本渲染更加平滑。目前我已经想不出其他办法了，也不想改变字体。请问有没有人有办法解决这个问题？因为我只有一台苹果电脑，所以一直在使用Adobe Browserlab来测试渲染效果。该网站的链接是：www.symvoli.nl/about。提前谢谢！2013年4月11日编辑：Chrome 35 Beta似乎终于解决了这个问题： enter image description here

。

- Joey

5

哦，哇，谢谢你提出这个问题，我以前从未注意到。我的网站上谷歌网络字体看起来也很不流畅。 - Cody Bonney

这个问题只出现在Google webfonts上吗？还是所有的@font-face字体都有这个问题？ - Simon East

2

我写了一篇详细的博客文章，包括修复方法：如何解决Google Chrome中丑陋的字体渲染问题，这个问题也在这里被问到过：https://dev59.com/EWgu5IYBdhLWcg3wOUkk。 - Sliq

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

Chrome 35 Beta已经发布。该版本增加了开发者控制触摸输入和新的JavaScript API功能。 - Joey

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Pointer · Answer 1

伙计们，我也有同样的问题。在除了chrome之外的所有浏览器中都很好 - 甚至IE10和9也很好。Dreamweaver CS6也使用了类似于fontsprings代码的版本，但将svg放在最后。将其更改为SVG在woff和ttf之前，那么一切都会很好。汤姆在他的示例中完全正确，实际上将其复制到您的代码中并映射到所需的字体路径，您就可以做生意了！

- xs1337gx · Answer 2

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

之后

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

旋转更加平滑了，但主要问题还存在。

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

-webkit-text-stroke: 0.5px;