Google网页字体在Chrome中看起来不稳定
这是一个普遍问题，似乎有一个解决方案。 问题在于网页字体在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-face css标签导入它，而不是上面。 我试过了，但因为google只提供ttf中的字体而不是svg或woff，所以停滞不前。
希望你能帮助。
如果您想应用此修补程序，则必须自己托管字体。
您的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’);
}
您是否对所有样式进行了适当的重置？
您的不一致的呈现体验可能由浏览器默认设置引起。
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时应用此技术，因为它不会将字体重量重置为休息状态.css的确如此。
将它添加到每个元素的样式表中。
opacity: .99;
例如 -
p, li {
opacity: .99;
}
我不知道为什么这个工作，但它确实。
链接地址: http://www.djcxy.com/p/65057.html