@ font-faceを使用したIEの非構造化コンテンツのフラッシュ

Question

EOT、SVG、WOFFおよびTTFフォントファイルとFont Squirrelによって生成されたスタイルシートを使用して、本文テキストにOpen Sansタイプフェイスを使用するサイトで作業しています。私は自分のフォントを最初にページヘッダに含めました。しかし、私がIE7、IE8、そしてIE9でサイトを見ると、Open Sansが登場する前にTimes Romanのすべてがフラッシュされます。これは他のブラウザでは起こりません。

誰も私がこれをやめる方法を示唆することはできますか？ここにフォント用に使用しているフォントリスCSSがあります。

@font-face { 
    font-family: 'OpenSansRegular'; 
    src: url('opensans-regular-webfont.eot'); 
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-regular-webfont.woff') format('woff'), 
     url('opensans-regular-webfont.ttf') format('truetype'), 
     url('opensans-regular-webfont.svg#OpenSansRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 1

カスタムフォントのダウンロード中に表示される内容は、上記のコードでは定義されていません。これは、あなたの他のfont-family命令で定義されています。

'OpenSansRegular'の値の後にコンマで区切って他のフォントを追加します。右から左：

• あなたのフォントファミリ。 serif,sans-serif,monospaceまたはcursive（yayコミックSans！）。ここでは、OpenSansSthは... sans-serifです。
  お使いのブラウザは、これらのファミリ、Arial、Verdana、またはLinuxのその他のフォントのデフォルトを持っています。あなたが彼のために選んでいないとき、それはユーザーの選択です。既定のファミリはserifで、Windowsの既定のフォントは 'Times New Roman'です。だからあなたはIEでFOUCとしてTimes New Romanを見るのです。
• あなたのカスタムフォントに可能な限り近いwebsafeフォント。ここでは、VerdanaやArialのようなサンセリフフォントがあります。おそらくsans-serifとVerdanaは同じものですが、特にLinuxユーザの場合は特にそうではないので、両方を追加してください
• カスタムフォントとwebsafeの間に、かなりインストール可能なフォントを追加できますいくつかのOSはMS Office、Adobe Reader、OS X、Adobe Creative Suiteなどと一緒にインストールされたもののようにWebセーフではありません。訪問者のコンピュータの10〜90％は100％ではありません。すべての人がCreative Suite（Webプロフェッショナルと他のデザイナーのみ）とMS Office（私はLibreOfficeを使用しています）をインストールするのではなく、XP、Vista、7に異なるフォントがインストールされています。
• 最後に左端の値は、あなたのカスタムフォント。サイト内OpenSansRegular

例：

  nav { font-family: 'Custom_at-font-face','closest font to the font-face one but certainly rarely found on computers by default', 'less close, 'not close but same family', Verdana,sans-serif; 
     } 

割合（多分少し古い）http://www.codestyle.org/css/font-family/
との互換性テーブルは10の値を使用しないでください、多分6から3には十分でしょう。）2012年@ font-faceは、ブラウザとOS（エイリアス）によってレンダリングの問題を引き起こすことがありますが、非常にうまくサポートされているので、フォントファミリーを短くすることができます。

Answer 2

jQueryのプラグインを隠す@font-faceのFOUCはここにあります：How to know if a font (@font-face) has already been loaded?私はそこにそれを更新しているので、このスレッドからコードブロックを削除しました。