2

私は現在@font-faceでaspサイトを構築していますが、InternetExplorer9で恐ろしいFlashOfUnstyled Textのバグに遭遇しました。これまでのところ、スクリプトをcssファイルの下に移動し、防弾構文を使用しています。私がルールに従ってプレイしたことがわかる限り、この問題を解決するものは何もないようです。私の質問はこれです：このバグは回避可能ですか、それともこれらの方法はすべて、ブラウザにフォントをより速くダウンロードさせることで制御を損なうだけですか？同様の質問があることに気づきましたが、@ font-faceを待っている間に、フォールバックフォントをロードするというInternetExplorerの自然な傾向と戦っているだけかどうかを知ることは重要です。残念ながら、私はグーグルのウェブフォントを使用することができず、数秒間コンテンツを非表示にしてjQueryで表示したくありません（実際には修正されていません！）。

私のファイルのサイズに興味がある人のために約33kです。

4

2 に答える 2

6

IE9でFOUTを防ぐために、base64-encodingを介してCSSにTTF-Font-Fileを埋め込むことができます （このソリューションはすべてのブラウザーで機能します）

EOTファイルをIE<=8に配信するように注意してください

<!--[if (lte IE 8) & (!IEMobile) ]>
    <link rel="stylesheet" media="screen" href="styles/fontface-ielte8.css" />
<![endif]-->

@ font-face-ruleを入力します（fontsquirrelを推奨）

@font-face {
    font-family: 'MaidenDataURITest';
    src: url('MaidenOrange-webfont.eot');
    src: url('MaidenOrange-webfont.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

次のステップでは、他のすべてのブラウザの@ font-face-declarationを含めます（IE9 +はメディアクエリをサポートしています。詳細情報：

<link rel="stylesheet" media="screen and (min-device-width: 1px)" href="styles/fontface.css" />

DataURI（base64-encoding）を介してTTFファイルを使用して@font-face-ruleを入力します。

@font-face {
    font-family: 'MaidenDataURITest';
    src: url('data:application/octet-stream;base64, [your-base64-data]') format('truetype');
    font-weight: normal;
    font-style: normal;
}

したがって、fontsquirrelを使用してDataURI->エキスパートモードを生成します。
知っておきたいこと：IE8は32KiBまでdataURIをサポートしています。IE9にはそのような制限はありません。

すべてのタイプのファイル用のDataURIジェネレーター：ここをクリック

上からのライブデモ»

ダウンロード時間を改善するには

unicode-rangeを介して必要な文字だけを配信します。http ：//www.w3.org/TR/css3-fonts/#unicode-range-desc これにより、ダウンロードに必要なダウンロード時間とファイルサイズが削減されます（ IE9 +以降のブラウザで動作します。それ以外の場合は、フォント全体がダウンロードされます）

@font-face {
    font-family: foo;
    src: url('foo.woff');
    unicode-range: U+31-33;
}

次のステップでは、これを適用して、Apacheサーバーの.htaccessを介して有効期限を設定し、Webブラウザーにフォントファイルをキャッシュする必要があることを通知できます。これにより、スタイルのないコンテンツのフラッシュが確実に再訪されます。

<IfModule mod_expires.c>
    ExpiresActive On
    <FilesMatch "\.(eot|woff|ttf|svg)$>
        ExpiresDefault "access plus 10 years"
    </FilesMatch>
</IfModule>

次に、フォントファイルを圧縮して（.htaccess-fileを介して）ダウンロードを高速化します。

AddOutputFilterByType DEFLATE  application/vnd.ms-fontobject application/x-font-ttf image/svg+xml

WOFFファイルにはすでにgzip圧縮が組み込まれています。

サーバー上に.htaccessファイルを作成し、このプロパティをに書き込むことができます。Apache-Serversでうまく機能します:)

詳細：

実例： http： //georgepantazis.com/demos/fontface-datauri/

FOUTについてのPaulIrish：http: //paulirish.com/2009/fighting-the-font-face-fout/

互換性の詳細とチェックリスト：http ：//www.aaronpeters.nl/blog/IE9-performance-checklist

于 2012-05-31T15:41:31.323 に答える
1

フォント宣言を別のcssファイルに配置し、このファイルへのインポートをcssの上部に配置することで、FOUTを防ぐことができます。これは、@ importがブロックされているために機能し、パフォーマンスに影響します。

于 2013-01-10T17:46:12.457 に答える