9

Google Fonts ディレクトリのフォント コレクションを使用したいと考えています。スタイルを選択linkし、プロジェクトのテンプレートに CSS タグを含めました。

または、Google Fonts を使用してコレクションをダウンロードすることもできます。得られるのは、すべてのフォント スタイルを含む zip ファイルです。

Google から HTML に含めるように提供されたものと同等の CSS を作成できるので、訪問者が Google Font API にアクセスできない場合に備えて、セルフ ホステッド フォント ファイルをフォールバックとして提供したいと考えています。

これをどのように設定し、Google フォント ファイルと自己ホスト型フォント ファイルの両方がダウンロードされないようにするにはどうすればよいですか? ユーザーが Google Fonts にアクセスできる場合、ブラウザはフォントの自己ホスト型バージョンをダウンロードすべきではありません。

4

2 に答える 2

13

セルフホストすることをお勧めします。これは、fontspringsの「防弾」フォント面構文です。

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

これらの4つすべてを設定すると、ブラウザー間で確実に機能します。フォントは4種類すべてになっていることを確認してください。Font Squirrelには、fontface用の優れたキットもあります。

于 2012-07-16T21:56:16.523 に答える
8

次の 3 つのオプションがあります。

  1. 2 セットの@font-face@ 規則を使用し、異なるfont-family名前 (例:"Droid Sans"と"Droid Sans Local") を使用し、次に のようなフォント スタックを使用します"Droid Sans", "Droid Sans Local", Helvetica, Arial, sans-serif。ただし、これにより両方のフォントがダウンロードされるため、読み込み時間が長くなります。
  2. @font-face@ -規則の 1 つのセットを使用しますが、src属性の 2 つのセットを使用します。これも、ブラウザが指定されたすべてのフォント ファイルをダウンロードすることを決定した場合、読み込み時間が長くなる可能性があります。
  3. ほとんどの CDN が行うように、DNS を介してネットワーク層でミラーリングを行います。これにはネットワークのセットアップが必要ですが、CSS は変更されず、ブラウザーに対して最も透過的であり、追加のダウンロードは必要ありません。

Google Web Fonts はすでに 3 番目のオプションを採用しているため、個人的には、CDN でホストされているソースを既に使用している場合でも気にしません。ただし、信頼性の低いソースからのフォントを使用している場合は、価値があるかもしれません。しかし、フォントにこれを設定する努力をするつもりなら、すべての静的リソース (画像、スタイルシート、JS など) に設定してみませんか? 最も論理的な行動は、無料または有料の CDN を取得して、すべての静的アセットをホストすることです。

于 2012-07-16T14:52:14.073 に答える