まず、私は Tumblr で作業しているため、サーバー側のものに関しては多少制限されていることを述べておく必要があります。@font-face についてここにたくさんの質問があることは知っていますが、IE9 および 10 で動作させるための解決策が見つかりません。FontSquirrel 構文を使用していました。
@font-face {
font-family: 'FontName';
font-weight: 400;
font-style: normal;
src: url('fontname.eot');
src: url('fontname.eot?#iefix') format('embedded-opentype'),
url('fontname.woff') format('woff'),
url('fontname.ttf') format('truetype'),
url('fontname.svg#FontName') format('svg');
}
Firefox や IE 9/10 では動作しないことがわかるまでは、base64 エンコーディングを使用するように変換し、FontSquirrel テンプレートに基づいて base64fonts.com の .woff ファイルをエンコーディングしました。
@font-face {
font-family: 'FontName';
font-weight: 400;
font-style: normal;
src: url('fontname.eot');
}
@font-face {
font-family: 'FontName';
font-weight: 400;
font-style: normal;
src: url(data:application/x-font-woff;charset=utf-8;base64,......) format('woff'),
url('fontname.ttf') format('truetype'),
url('fontname.svg#FontName') format('svg');
}
(base64 文字の巨大な文字列を表すドットの文字列)。これはChromeとFirefoxでうまく機能し、IE8でも機能するようですが、IE10が醜いシステムフォント以外をレンダリングするほどの量のマッサージはないようです.
一重引用符、二重引用符、引用符なしを試しました。.ttf に埋め込み可能なアクセス許可があることを確認しました。私はdoctypeを取り除こうとさえしました。私は防弾構文を読んで、これらの例を試しました。そのサンプル ページを IE10 に読み込むと、いくつかを除くすべてが正常にレンダリングされます。しかし、私のページで同じ構文を使用しても機能しません。
私の巨大なコードをのぞき見したい場合は、gist.github.com/neuraldamage/5307289 (ご覧のとおり、私はたくさんのフォントを試しました) にあり、問題のサイトは neurodamage.tumblr.com にあります。何か案は？ありがとう！
編集：
これは IE 9/10 が Tumblr の静的ファイルを好まないことに問題があるのでしょうか? gist.github.com/neuraldamage/5307289 からの私のコードの実際の例:
@font-face {
font-family: 'Gudea';
font-weight: 400;
font-style: normal;
src: url('http://static.tumblr.com/6u5yyqj/cDgmgcczj/gudea-regular-webfont.eot');
src: url('http://static.tumblr.com/6u5yyqj/cDgmgcczj/gudea-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://static.tumblr.com/6u5yyqj/Qkvmgcd2c/gudea-regular-webfont.woff') format('woff'),
url('http://static.tumblr.com/6u5yyqj/LIamgcd1z/gudea-regular-webfont.ttf') format('truetype'),
url('http://static.tumblr.com/6u5yyqj/K3Nmgcd0s/gudea-regular-webfont.svg#Gudea') format('svg');
}
これを適合させるには、base64 エンコーディングを切り詰める必要がありました。
@font-face {
font-family: 'FunctionPro';
font-weight: 400;
font-style: normal;
src: url('http://static.tumblr.com/6u5yyqj/OXFmhmdhl/functionpro-light-webfont.eot');
}
@font-face {
font-family: 'FunctionPro';
font-weight: 400;
font-style: normal;
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAGvkAB......FQNRtdAAA=) format('woff'),
url('http://static.tumblr.com/6u5yyqj/8SEmhmdin/functionpro-light-webfont.ttf') format('truetype'),
url('http://static.tumblr.com/6u5yyqj/vIVmhmdi7/functionpro-light-webfont.svg#FunctionPro') format('svg');
}