google-chrome - 使用 Google Web Fonts 优先使用 SVG 字体

Question

除非您使用 SVG 字体，否则 Windows 上 Google Chrome 中的字体渲染非常糟糕。然而，谷歌网络字体优先考虑 WOFF 文件。

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

Answer 1

您需要使用 @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');
}