「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は疑問符
（「？」文字）を好むことがわかりました
。 これに対応するためにコードが修正されました。 当初、このブログ投稿ではマジックグリッド
（記号「＃」）が称賛されていました
。