谷歌网络字体在Chrome中显示不流畅 - 如何应用修复

Question

谷歌网络字体在Chrome中显示不流畅 - 如何应用修复

8

这是一个普遍的问题，看起来有解决方案。问题在于Chrome中的Web字体显示不流畅。解决方法应该是在 .woff 调用之前移动 .svg 调用。在这里解释：http://www.fontspring.com/blog/smoother-web-font-rendering-chrome 和http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

问题在于我正在使用Google Web字体，并像这样导入字体：

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

我不知道，也找不出如何使用@font-face css标签导入它，而不是使用上面的方法。我已经尝试过，但卡在这里，因为谷歌只提供ttf格式的字体，没有svg或woff格式。

希望你能帮忙。

- Farsen

3个回答

0

你是否正确地重置了所有样式？

浏览器默认设置可能会导致不一致的渲染体验。

reset.css 将所有元素设置回默认值，从而减少跨浏览器不一致性。有许多 reset.css 的示例，其中最受欢迎的之一是 meyerweb reset css。另一种减少不一致性的方法是使用 normalize.css。

两种方法的区别简而言之是，reset.css 只重置所有特定于浏览器的样式，而 normalize.css 通过创建跨浏览器默认值具有更广泛的范围。

两者之间的差异由 normalize.css 的开发人员在此处解释。

如果所有这些链接都没有帮助，请确保始终正确设置字体粗细并导入所有必要的字体粗细。

您可以在 http://css-tricks.com/watch-your-font-weight/ 中阅读有关字体粗细的信息。当您使用 normalize.ccs 时，也应该应用此技术，因为它不像 rest.css 那样重置字体粗细。

- os_1

-1

将以下代码添加到每个元素的样式表中。

opacity: .99;

例如 -

p, li { 
  opacity: .99; 
}

我不知道为什么这个有效，但它确实有效。

- Kathy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Duncan Lock · Accepted Answer

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

您的 Google 字体链接是一个样式表请求，它基于您提供的参数以及浏览器检测进行动态构建。对于您的示例链接:

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

如果您使用curl自己发出请求：

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

这是返回的内容：

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

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

然后，您可以使用这里提供的修复建议，引用您下载的字体文件。

@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘webfont.svg#svgFontName’) format(‘svg’),
    url(‘webfont.woff’) format(‘woff’),
    url(‘webfont.ttf’)  format(‘truetype’);
}