在Chrome和Chrome上使用锯齿形和锯齿形的Google web字体 [英] Jagged and choppy Google webfonts in Chrome and Firefox on Windows

问题描述

我使用的是google webfonts，并且在FF和chrome（IE11使它们变得更好）中出现了锯齿状和不连续的字体渲染问题。

可以找到示例这里： http://jsfiddle.net/PNYfR/

 < link type =text / css =stylesheethref =http://fonts.googleapis.com/css?family=Exo:300,400,700&子集=拉丁> 
 
打开Sans是由Ascender公司的类型总监Steve Matteson设计的以人为主义的无衬线字体。这个版本包含完整的897 
< / p> 
  

我已阅读相关问题，但其中任何一个都不提供简单的快速项目解决方案：

提供的webfont解决方案

• Google webfonts和windows xp

复杂一点，我们的设计师使用Mac来正确呈现字体。

问题：

• 有没有谷歌webfonts列表渲染好吗？


• 或者，有没有一个快速的一步一步的解决方案，如何正确呈现字体？
  
• 最后，是否有一个替代免费的webfont提供商，哪个服务字体好？

解决方案

我发现下载我要使用的字体，使用字体松鼠（网络应用程序，谷歌它）将它们转换为.svg并将它们托管在Web服务器上似乎解决了这个问题。在代码中，将.svg字体链接放在其他字体上方，Chrome将/应该先抓住它。

I am using google webfonts and have come accross an issue with jagged and choppy font rendering in FF and chrome (IE11 renders them better).

Example can be found here: http://jsfiddle.net/PNYfR/

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Exo:300,400,700&subset=latin">
<p style="font-family: 'Exo', serif; font-weight: 400; font-style:normal; font-size:31px; color:white; background-color: #0085B2; line-heigth:1.42857; padding:100px">
Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897
</p>

I've read related questions, but any of them don't offer simple solutions for quick projects:

• Google webfonts render choppy in Chrome on Windows
• Well rendered webfont solution
• Google webfonts and windows xp

To complicate a bit more, our designer is using Mac, which renders fonts correctly.

Questions:

• Is there a list of google webfonts which render OK?
• Or is there a quick step by step solution on how to get fonts render correctly?
• And last, is there an alternative free webfont provider, which serves fonts OK?

解决方案

I've found that downloading the fonts I want to use, converting them to .svg using font squirrel (web application, google it) and hosting them on the web server seems to solve the issue. In the code, place the .svg font link above the others and Chrome will/should grab that first.

这篇关于在Chrome和Chrome上使用锯齿形和锯齿形的Google web字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！