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

我一直在努力使用QuickSand Google字体在所有浏览器中获得一致且漂亮的字体。 Chrome和IE显示非常锯齿状和像素化边缘，特别是在较小的字体尺寸下。放大浏览器通常会使工件消失。Chrome和IE中的QuickSand（Google字体）的字体渲染效果不佳

这里是火狐，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;}

来源

2013-05-05 Mark1270287

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

来源

2013-05-06 02:55:26 Mark1270287

嗨马克，我有完全相同的问题 - 你介意分享你的解决方案和生成的文件吗？谢谢！ – Nils 2014-02-18 13:37:33

花了半天的时间试图找到解决办法，直到我找到Mark的解决方案。只需转到http://www.fontsquirrel.com/tools/webfont-generator并上传您拥有的任何字体文件。下载webfontkit，在工具包中是stylesheet.css。您可以参考部分中的stylesheet.css。我在Safari中呈现字体时出现问题，但不是Chrome或IE，因此我最初无法找到此解决方案。感谢马克发布此。为我挽救了一大堆悲伤。 – Francis 2016-01-25 16:48:11

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

对于WebKit的（浏览器，Safari浏览器），你可以添加：

-webkit-text-stroke: 1px black;

为了掩盖问题不大，但文字会变成股票。

来源

2013-05-05 17:42:03 drip

感谢您的帮助。我最终研究了Google Font加载的嵌入式字体表面代码，结果发现它只能链接到.woff字体格式。它们的字体实现不包括支持所有浏览器的.eot，.ttf或.svg。我用字体松鼠生成丢失的文件，现在在Chrome和IE中看起来好多了。 – Mark1270287 2013-05-06 02:53:58

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

回答

相关问题