2

私はさまざまなブラウザでWebフォントの問題に取り組んでおり、最新の推奨ソリューションと思われるFontSpringの推奨事項に従っています。

ただし、CDNを使用していて、別のドメインからCSSファイルを提供していると、IEもFirefoxもCDNからWebFontsをロードせず、などのエラーが発生することがすぐにわかりました@font-face failed cross-origin request。私のCSSには、次のようなものがありました。

@font-face {
    font-family: 'ClarendonRoman';
    src: url('/assets/fonts/clarendon-bt-webfont.eot?#iefix') format('embedded-opentype'),
       url('/assets/fonts/clarendon-bt-webfont.woff') format('woff'),
       url('/assets/fonts/clarendon-bt-webfont.ttf')  format('truetype'),
       url('/assets/fonts/clarendon-bt-webfont.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

ご覧のとおり、フォントへのパスはCSSを基準にしているため、フォントはCDNから読み込まれません。フォントが同じオリジンからロードされるように、サイトのドメインでスタイルシートにハードコーディングする必要がありました。したがって、私の新しいスタイルシートは次のようになります。

@font-face {
    font-family: 'ClarendonRoman';
    src: url('//mydomain.com/assets/fonts/clarendon-bt-webfont.eot?#iefix') format('embedded-opentype'),
       url('//mydomain.com/assets/fonts/clarendon-bt-webfont.woff') format('woff'),
       url('//mydomain.com/assets/fonts/clarendon-bt-webfont.ttf')  format('truetype'),
       url('//mydomain.com/assets/fonts/clarendon-bt-webfont.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

そして今、組み込みドメインを使用すると、すべてがHTTPSおよびHTTPトラフィック全体で完全に機能します。ただし、フォントファイルを提供するためにCDNを使用しなくなったため、完全に満足しているわけではありません。また、パフォーマンスを重視しています。クロスオリジンドメインの問題を回避できないように思われるため、代わりにフォントを埋め込むことを検討してきました。http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntaxを見ると、次のようにdata-uri埋め込み形式が推奨されていることがわかります。

@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot?') format('embedded-opentype');
  }

@font-face {
  font-family: 'MyFontFamily';
  url(data:font/truetype;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE)  format('truetype'),
  url(data:font/woff;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE)  format('woff'),
  url('myfont-webfont.svg#svgFontName') format('svg');    
}

だから私はこれについてかなりの数の質問があります：

  • 確かに、TTFおよびWOFF形式のBase64エンコーディングを使用してスタイルシートにフォントを2回埋め込むと、スタイルシートのデータが2倍以上になることで、埋め込みの利点が失われる可能性があるまで、スタイルシートを膨らませることになります。
  • なぜこの例ではsrc：が各url（data：...）の前に使用されていないのですか。これはタイプミスですか、それとも意図的なものですか？
  • フォントを埋め込む場合、すべてのブラウザーはEOTバージョンよりも埋め込まれたバージョンを使用するため、サーバーのラウンドトリップを節約できますか？埋め込まれたTTFまたはWOFFファイルを使用するブラウザはどれですか？
  • EOTバージョンを埋め込まないのはなぜですか？

この投稿にはかなりの部分が含まれていることに感謝しますが、この投稿が同じジレンマに直面している他の人にも役立つことを願っています。

マット

4

0 に答える 0