使用Google Web Fonts优先处理SVG字体 [英] Prioritise SVG font with Google Web Fonts

问题描述

除非您使用SVG字体，否则在Windows上的Google Chrome浏览器中进行font-face渲染非常糟糕。但是，谷歌网页字体优先考虑WOFF文件。

有什么办法可以强制它传递SVG字体，还是我必须自己手动托管字体？

解决方案

您需要使用 @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'）格式（ 'WOFF'）; 
} 
  

在本地托管文件后，可以将SVG调用该堆栈来优先化它。你可以在这里看到一个例子： http://www.fontspring.com/blog/smoother-web

  @ 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'）格式（'woff'），
 url（'webfont.ttf'）格式（'truetype'）; 
} 
  

font-face rendering in Google Chrome on windows is awful unless you use an SVG font. However google web fonts prioritises WOFF files.

Is there any way to force it to deliver the SVG fonts or do I have to manually host the fonts myself?

解决方案

You'll need to host the files as using the @import or <link> methods reference a CSS file that only calls the WOFF file (because of browser detection). Ex. 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');
}

Once you host the file locally, you can then move the SVG call up in the stack to prioritize it. You can see an example here: 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');
}

这篇关于使用Google Web Fonts优先处理SVG字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！