8

这是一个普遍问题，似乎有解决方案。问题是网络字体在 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 字体而被卡住了。

希望你能帮忙。

4

3 回答 3

2

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

您的 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’);
}
于 2013-05-16T21:38:50.427 回答
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 可以。

于 2013-08-01T21:22:03.823 回答
-1

将此添加到每个元素的样式表中。

opacity: .99;

例如 -

p, li { 
  opacity: .99; 
}

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

于 2014-01-02T18:42:30.430 回答