0
我在测试环境中加载了以下page。具有适当授权和声明的网络字体的字体像素化
要启动，字体适当许可，并从myfonts.com已经下载并声明如下：
@font-face {font-family: 'HelveticaNeueLT';src: url('css/webfonts/3019F7_2_0.eot');src: url('css/webfonts/3019F7_2_0.eot?#iefix') format('embedded-opentype'),url('css/webfonts/3019F7_2_0.woff2') format('woff2'),url('css/webfonts/3019F7_2_0.woff') format('woff'),url('css/webfonts/3019F7_2_0.ttf') format('truetype');}
@font-face {font-family: 'HelveticaNeueLT-Bold';src: url('css/webfonts/3019F7_1_0.eot');src: url('css/webfonts/3019F7_1_0.eot?#iefix') format('embedded-opentype'),url('css/webfonts/3019F7_1_0.woff2') format('woff2'),url('css/webfonts/3019F7_1_0.woff') format('woff'),url('css/webfonts/3019F7_1_0.ttf') format('truetype');}
@font-face {font-family: 'HelveticaNeueLT-Light';src: url('css/webfonts/3019F7_3_0.eot');src: url('css/webfonts/3019F7_3_0.eot?#iefix') format('embedded-opentype'),url('css/webfonts/3019F7_3_0.woff2') format('woff2'),url('css/webfonts/3019F7_3_0.woff') format('woff'),url('css/webfonts/3019F7_3_0.ttf') format('truetype');}
如果你看一下在Chrome的页面为PC（V47），你会看到，文字高度像素化，最明显的是Contact Us button。在Chrome for Mac中，按钮非常清晰。作为一个粗略的估计，这是30％，因为浏览器Mac版渲染引擎渲染页面更清晰，70％是因为我下面的代码添加到按钮的CSS规则：
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:grayscale;
没有人有任何的想法至于这里发生了什么？您可以查看stylesheet以查看是否有帮助解决问题的方法。
也许这个话题可以帮助你，尤其是第二个答案：http://stackoverflow.com/questions/9272073/why-are-my-google-web-fonts-pixelated –
@StefanNeuenschwander我查了链接并实施第二个答案中提出的解决方案。不幸的是，它并没有解决问题，因为我仍然看到相同水平的像素化。我是新手开发人员，所以如果你可以检查我的样式表，看看建议的修复是否正确实施，那会很好。 – zgall1
2016年的小贴士：停止使用所有不必要的格式，现在几年都不需要;一切都支持WOFF。你可以放弃EOT，因为微软已经放弃了所有不做WOFF的IE版本，你可以抛弃SVG，因为它被大家*年前的字体格式抛弃，你可以放弃TTF/OTF原件，因为WOFF是逐字节包装它们（但是具有无损压缩）。所以：只需使用WOFF，简化你的生活。和你的网站有效载荷。它也意味着只有一个渲染怪癖调试的来源。 –