1

しばらくの間、フォント リスを使用して Web フォントを生成してきました。通常、それが提供する CSS は次のようになります。

@font-face {
    font-family: 'sancoale_slsf_norm_regunormRg';
   src: url(sancoaleslabsoft_normregular_macroman/SancoaleSlSfNormRegular-webfont.eot');
    src: url(sancoaleslabsoft_normregular_macroman/SancoaleSlSfNormRegular-webfont.eot?#iefix') format('embedded-opentype'),
         url(sancoaleslabsoft_normregular_macroman/SancoaleSlSfNormRegular-webfont.woff') format('woff'),
         url(sancoaleslabsoft_normregular_macroman/SancoaleSlSfNormRegular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

しかし、WOFF を base64 として生成して遊んでみると、出力される CSS は次のように変わります。

 @font-face {
font-family: 'sancoale_slsf_norm_boldnormBd';
src: url('sancoaleslsfnormbold-webfont.eot');
}

@font-face {
font-family: 'sancoale_slsf_norm_boldnormBd';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09 [BLABLABLA] =) format('woff'),
     url('sancoaleslsfnormbold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

@font-face 宣言が分割されている理由を知っている人はいますか? - 本当に興味があります！

4

2 に答える 2

7

Base64は、ASCII 文字列形式でバイナリ データを表すバイナリからテキストへのエンコード スキームです。

データ URIは、データをインラインで含める方法を提供する単なる URI スキームです。

基本的に、フォント ファイルを非常に長いテキスト文字列に変換し、それを font-face 宣言に直接貼り付けて、フォント ファイルのソース リンクを置き換えることができます。

データ URI スキームは次のとおりです。

data:[<mediatype>][;base64],<data>

@font-face の Base 64 ソースは次のようになります。

src: url(data:application/x-font-woff;charset=utf-8;base64,<your base64 font>) format('woff'),

Font Squirrel のジェネレーターは、バージョン 9 で Base64 の IE サポートが開始されたため、.eot ファイルを提供します (私はそう思います)。

この font-face の方法は、Paul Irish の防弾方法よりも配信可能性が高いことがわかりました。

Fonts.css
実際には、base64 でエンコードされたすべてのフォント (および太さのバリエーション) を fonts.css ファイルに入れます。これには、 IcoMoon の Web アプリを使用して base64 をビルドおよび取得する、私のアイコン フォントも含まれます。

ええ、base64 はいくつかのバルクを追加しますが、確かにきれいではありませんが、それらをすべて中央の fonts.css ファイルに入れると、リクエストが減り、FOUC が防止され、フォント ファイル タイプをブロックする愚かで攻撃的なファイアウォールをうまく回避できるようです。デフォルトとして。

私は実際にこれについて少し前に短い記事を書きました。

于 2013-12-25T11:12:02.150 に答える
0

私の推測では、これは Internet Explorer のバージョン間で異なるデータ URI サポートに対する回避策であると思われます。IE 6-7 はサポートされていません。IE 8 は一部の要素と最大 32KB のみをサポートし、IE9+ はおそらく問題なく動作します。データ URI サポートの詳細については、ウィキペディアとcaniuseを参照してください。font squirrel の「base64 CSS」オプションは、データ URI エンコーディングを使用します。

于 2013-07-31T21:46:48.490 に答える