Chrome 和 IE 中 QuickSand（Google 字体）的字体渲染不佳

Question

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

以下是 Firefox、Chrome 和 Internet Explorer 问题的屏幕截图比较： 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

您不能对浏览器上的字体渲染做太多事情。你可以尝试使用 font-face ，如果这样可以让它变得更好，否则它无法更改。

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

-webkit-text-stroke: 1px black;

为了稍微掩盖问题，但文字会变得更容易。

Answer 2

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