6

我一直在努力使用 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;}
4

2 回答 2

6

问题是由于谷歌字体没有实现所有的字体文件类型。解决方案是使用字体松鼠网络字体生成器来生成丢失的文件类型并自己托管它们。

于 2013-05-06T02:55:26.793 回答
1

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

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

-webkit-text-stroke: 1px black;

为了稍微掩盖问题，但文本会变得更清晰。

于 2013-05-05T17:42:03.633 回答