Chrome和IE中的QuickSand（Google字体）字体呈现效果不佳

Question

我一直在努力使用QuickSand Google字体在所有浏览器中获得一致且美观的字体。 Chrome和IE显示非常锯齿状和像素化的边缘，特别是在较小的字体大小。缩放浏览器通常会使工件消失。

以下是与Firefox，Chrome和＆amp; IE浏览器： https://dl.dropboxusercontent.com/u/29865983/imagehost/jsfiddle/QuickSandFont.png

这是一个重现实验问题的jsfiddle：

http://jsfiddle.net/vXd2F/

#main-nav ul li a, #main-nav ul li a:link, #main-nav ul li a:active {
color: white;
display: inline-block;
padding: 19px 10px;
font: 400 12px/14px 'Quicksand', Helvetica, Arial, sans-serif;
text-transform: uppercase;}

Answer 1

问题是由于Google字体未实现所有字体文件类型。解决方案是使用font squirrel web字体生成器生成缺少的文件类型并自己托管它们。

Answer 2

你不能对浏览器上的字体渲染做太多。你可以尝试使用font-face，如果可以使它更好，但不能改变它。

对于webkit（Chrome，Safari），您可以添加：

-webkit-text-stroke: 1px black;

为了掩盖这个问题，但文本将成为自动收报机。