谷歌网页字体在Chrome中看起来不稳定 - 如何应用修复程序

Question

这是一个普遍的问题,似乎有一个解决方案.问题是网页字体在chrome中显示不连贯.解决方案应该是在.woff调用之前移动.svg调用.在这里解释:http://www.fontspring.com/blog/smoother-web-font-rendering-chrome和这里:http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

问题是,我正在使用谷歌网络字体,并导入如下字体:

<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

我不知道,也不知道如何使用@font-facecss标签而不是上面的方式导入它.我试过了,但是因为谷歌只提供ttf中的字体而不是svg或woff而卡住了.

希望你能帮忙.

Answer 1

如果您想应用此修复，您必须自己托管字体。

\n\n

您的 Google Fonts 链接是对样式表的请求，该样式表根据您提供的参数以及浏览器检测动态构建。对于您的示例链接：

\n\n

<link href=\'http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic\' rel=\'stylesheet\' type=\'text/css\'>\n

\n\n

如果您实际上自己使用以下方式提出请求curl：

\n\n

$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic\n

\n\n

这是发回的内容：

\n\n

@font-face {\n  font-family: \'Asap\';\n  font-style: normal;\n  font-weight: 400;\n  src: local(\'Asap\'), local(\'Asap-Regular\'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format(\'truetype\');\n}\n@font-face {\n  font-family: \'Asap\';\n  font-style: normal;\n  font-weight: 700;\n  src: local(\'Asap Bold\'), local(\'Asap-Bold\'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format(\'truetype\');\n}\n@font-face {\n  font-family: \'Asap\';\n  font-style: italic;\n  font-weight: 400;\n  src: local(\'Asap Italic\'), local(\'Asap-Italic\'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format(\'truetype\');\n}\n@font-face {\n  font-family: \'Asap\';\n  font-style: italic;\n  font-weight: 700;\n  src: local(\'Asap Bold Italic\'), local(\'Asap-BoldItalic\'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format(\'truetype\');\n}\n

\n\n

最简单的方法是返回 Google Web Fonts，通过转到此处并单击下载箭头来下载相关字体。

\n\n

然后您可以使用此处建议的修复，引用您下载的字体文件：

\n\n

@font-face {\nfont-family: \xe2\x80\x98MyWebFont\xe2\x80\x99;\nsrc: url(\xe2\x80\x98webfont.eot\xe2\x80\x99); \nsrc: url(\xe2\x80\x98webfont.eot?#iefix\xe2\x80\x99) format(\xe2\x80\x98embedded-opentype\xe2\x80\x99),\n    url(\xe2\x80\x98webfont.svg#svgFontName\xe2\x80\x99) format(\xe2\x80\x98svg\xe2\x80\x99),\n    url(\xe2\x80\x98webfont.woff\xe2\x80\x99) format(\xe2\x80\x98woff\xe2\x80\x99),\n    url(\xe2\x80\x98webfont.ttf\xe2\x80\x99)  format(\xe2\x80\x98truetype\xe2\x80\x99);\n}\n

\n