5

私は最近、主に Windows の Google Chrome でスムーズな Google Web フォントを実現するのに苦労しています。

私は以前、Google Web Fonts が提供する URL (たとえば、Google が提供するもの) から取得した直接のスタイルシート コードを使用していました。

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

URL にアクセスして、次のコードを使用します。

@font-face {
   font-family: 'Titillium Web';
   font-style: normal;
   font-weight: 200;
   src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr-K9kSItTeDn2USN0q77Oh4.woff) format('woff');
}

これは、Google にリクエストを送信するのではなく、もう少しスピードを節約するための生意気な方法であると考えました。Google は、フォントを調達するために別のリクエストを作成するようです。

最近、これがレンダリングの問題の原因であることを発見しました (プロセスを使用して作成したテスト ページと比較して、Windows Chrome ブラウザーが Web フォント ページでどのようにレンダリングするかについては、次の例を参照してください: http://imgur.com/OV2U1 ,ema2B )

私の質問は、 <link /> バージョンが私の速記方法で同じフォントを調達しているのに、なぜフォントを滑らかにするのですか? また、リクエスト時間を短縮できると考えたこのアプローチを使用する必要がある理由はありますか?

4

2 に答える 2

7

あなたの質問に答えるかもしれないいくつかの問題があります。主なものは、リンクされたURLが実際にはブラウザごとに異なるCSSを表示することです。そのため、Chromeで開いてそのCSSをコピーすると、Internet Explorer（特にバージョン9より前）では機能しない場合があります。

また、「軽量」の太さである200のフォントの太さを使用しています。通常のテキストのデフォルトは400です。したがって、フォントの太さ200を指定しない限り、特定のブラウザでフォントが表示されない可能性がわずかにあります。次のような方法が役立ちます。

body {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
}
于 2013-02-06T18:18:03.060 に答える
1

これを CSS ファイルに追加します。

@import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');
于 2012-11-27T17:44:15.753 に答える