使用Google Web Fonts优先处理SVG字体

时间:2013-01-21 12:12:54

标签: google-chrome svg webfonts google-webfonts

除非您使用SVG字体,否则Windows上的Chrome浏览器中的字体 - 脸部渲染非常糟糕。但是,谷歌网络字体优先考虑WOFF文件。

有没有办法强制它提供SVG字体,还是我必须自己手动托管字体?

1 个答案:

答案 0 :(得分:17)

您需要托管文件,因为使用@import<link>方法引用仅调用WOFF文件的CSS文件(因为浏览器检测)。防爆。 http://fonts.googleapis.com/css?family=Open+Sans

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

在本地托管文件后,您可以在堆栈中移动SVG调用以确定其优先级。您可以在此处查看示例:http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

@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');
}