web-dev-qa-db-ja.com

GoogleWebフォントでSVGフォントを優先する

googleでのfont-faceレンダリングChromeはひどいです。ただし、GoogleWebフォントはWOFFファイルを優先します。

SVGフォントを強制的に配信する方法はありますか、それとも自分でフォントを手動でホストする必要がありますか？

google-chromesvgwebfontsgoogle-webfonts
25
9point6

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