3

CSS で @font-face を使用すると、ブラウザーはページのテキストをフォントの前に読み込むため、フォントが 1 つのスタイルから別のスタイル (Arial から myfont) にジャンプします。たとえば、圧縮されたフォントを使用すると、問題は視覚的に非常に顕著になります。

@font-face で選択した 1 つのフォントのみを表示したい。これを行う最善の方法は何ですか？

4

3 に答える 3

2

これは FOUT と呼ばれます。私の経験では、Google のフォント ローダーを使用するのが最善の方法です。

https://developers.google.com/webfonts/docs/webfont_loader

基本的に、ページを通常どおりにロードすることです (ボディが非表示になっている間、またはスタイル付きフォント ブロックが非表示になっている間は、選択します)。ロードされると、ページのボディにクラスが追加され、スタイル付きの表示がトリガーされます。フォント。

スクリプトはこれらのクラスを追加して、適切にスタイルを設定できるようにします。

 .wf-inactive - failed to load
 .wf-loading - during load
 .wf-active - loaded fine

唯一の欠点は、Javascript が必要なことです。

于 2012-04-06T03:42:47.063 に答える
0

これは、Flash Of Unstyled Textとして知られており、おっしゃったように、フォント ファイルがページの残りの部分と並行して読み込まれるためです。そのテキストは、新しいフォント フェイスが読み込まれるまでデフォルトまたはフォールバック フォントでスタイル設定されます。適用されます。

この影響の発生を最小限に抑える最善の方法は、クライアントがカスタム フォントの読み込みに費やす時間を最小限に抑えることです。これを達成するために実行できる 2 つの方法は、gZip を介してフォント ファイルを圧縮することと、ビューアーのブラウザーによる長期キャッシュ用のフォント ファイルを指定して、遠い未来の期限切れヘッダーを介して後続のビューを表示することです。

FOUT が依然としてユーザーにとって不快な場合は、ほとんどのビューアーのマシンにインストールされている可能性が高い同様の形状のフォントをフォールバックとして指定して、カスタム フォントの読み込み時にページ サイズを比較的一定に保つことができます。たとえば、コンデンス フォントの場合、ほとんどの視聴者はすでに Impact を利用可能なフォントとして持っているか、Arial Narrow を使用しており、どちらも「コンデンス」スタイルに準拠しています。

他のすべてが失敗した場合は、ドキュメントのテキスト全体をいつでもスタイルcolor: rgba(0,0,0,0)設定し、JavaScript を使用してタイマーの最後にそのルールを削除できます。

于 2012-04-06T03:37:31.107 に答える
0

これは、一部のブラウザー (Firefox 3.5/3.6、IE 7-9) ではよく知られている問題です。WebINKには、この問題を回避できる JavaScript ファイルが用意されています。

于 2012-04-06T01:45:05.760 に答える