web-dev-qa-db-ja.com

Google Webフォントがピクセル化されているのはなぜですか？

シンプルなウェブサイトでグーグルフォントを使おうとしています。私が使用しているタグは

 <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' >

Cssは

body {

  padding: 0;
  text-align: center;

  line-height: 180%;

  background: #1a2426;
  color: #f7f7f7;

  font-family: 'Lobster', serif;

}

問題は、Chromeでフォントを引き上げると、フォントがピクセル化して見えることです。誰かが理由を説明できるかどうか疑問に思いましたか？

例

cssgoogle-webfonts
12
jamesamuir

それはブラウザの問題ではなく、ウィンドウの問題です。

これを確認してください https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-font-are-you-using-that-are

14
sandeep

この問題のChrome開発チーム 認識 ）のようです。彼らは、彼らが取り組んでいるバグと見なしています。

私が見つけた最善の解決策は、推奨されるCSSハック（わずかなドロップシャドウなど）を実行するのではなく、フォントスタックを再配置して.svgバージョンがChromeはまだTrueTypeフォントを完全にはサポートしていません。

例えば：

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

詳細は この記事 をご覧ください。

フォントの読み込み順序を整理できます。 http://fonts.googleapis.com/css?family=Lobster'rel='stylesheet'type='text/css '>を呼び出すことで、次のような外部スタイルシートを取り込むことを理解する必要があります。

/* latin */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'), url(http://fonts.gstatic.com/s/lobster/v11/G6-OYdAAwU5fSlE7MlBvhVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

そのため、その呼び出しをスタイルシートに直接含めるだけで、注文の読み込みを制御できます。

20
Gray