🕷️ 💆 🏛️ 新しい防弾@フォントフェイス構文 ♦️ 👋 👩🏾‍🎨

「Webフォント革命」の最初から、 @ font-face宣言の優雅なハッキングに依存して、すべてのブラウザーでWebからフォントをダウンロードしました。もっと良い方法がありますか？完全に洗練され、将来のブラウザと互換性がありますか？

問題の歴史について簡単に

2009年9月、Paul Irishは@ font-face宣言を記述するための防弾構文を発表しました。構文はコンパクトで、当時のすべてのブラウザーで有効でした。最近、Androidにロードするフォントの拒否に対する苦情が時間とともに増加し始めているため、代わりにRichard Finkが作成した「 Mo 'Bulletproofer 」構文を推奨しました。残念ながら、「Mo」の防弾構文は二重記述宣言を必要とするため、そのサポートはより複雑です。

Fontspring @ Font-Face構文

しかし、このコードは最初からそのようなものでなければなりません。きれいで、明確でシンプルな：

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

なに？わかりません。

このコードを機能させる~~ハック~~トリックは、EOTファイル名の後の「？」記号です。冗談じゃない。

仕組み

Internet Explorer（9番目より前のバージョン）には、src値ハンドラーにバグが含まれていました。複数のフォント形式が“ src”に配置されている場合、IEはそれをロードできず、404エラーを報告します。理由は、IEが最初の開き括弧と最後の閉じ括弧の後に書き込まれたすべてをファイルアドレスとして使用しようとしているためです。この誤った動作を克服するには、最初にEOTを定義し、単一の「？」を追加するだけです。 IEを欺いて、残りの行はクエリ文字列であると考えさせ、EOTファイルのみをロードします。残りのブラウザーはCSS仕様に従います。「src」値のシーケンスとフォント形式の指示に基づいて、必要な形式を選択します。

ブラウザの互換性

Safari 5.03、 IE 6-9、 Firefox 3.6-4、 Chrome 8、 iOS 3.2-4.2、 Android 2.2-2.3、 Opera 11。

「data：...」アドレスのフォントはどうですか？

この構文を使用して、CSSスタイルにフォントを埋め込むこともできます。ただし、これが機能するには、2つの宣言が必要です。ただし、すでにこの道を進んでいる場合、追加の宣言は少なくとも何かを意味しますか？また、フォーマット仕様は「embedded-opentype」でなければならないことに注意してください。

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

更新1-2011年2月3日

CSSNinjaは、 IE9がEOTの代わりにWOFFフォントを選択せざるを得ないという素晴らしいアイデアを持っていました。彼はEOT形式に「＃」を追加することを提案しました。（これは、IE9が "＃embedded-opentype"形式仕様を認識しないために機能します。）その発見を考慮して、上記の構文を変更しました。埋め込みOpenType形式の表示をeotに置き換えました。IE9もこれを理解していないため、WOFFのある場所に進みます。

_{翻訳者のメモ： CSSNinjaも静止しておらず、「format（ ''）」というエントリを提案しました。} _{これは2文字短く、Paul Irishにむっちりしています。PaulIrish は、 IEをだますために「local（ ''）」というエントリを最初に提案しました。}

更新2-2011年2月4日

IEは、ページがローカルで（リーダーのディスクから）開かれている場合、Webフォントの読み込みを拒否しました。 IEは疑問符（「？」文字）を好むことがわかりました。これに対応するためにコードが修正されました。当初、このブログ投稿ではマジックグリッド（記号「＃」）が称賛されていました。

新しい防弾@フォントフェイス構文