19

@font-faceサイトの単一の css ファイルに追加する場合、どこに配置するのが最適ですか? cssファイルの先頭？下？

一番上に置くとcssの読み込みが遅くなると思います。一番下に追加すると、フォントが読み込まれるまで、すべてのテキストがフォールバック フォントを読み込みますが、これも最適ではありません。では、TypeKit や GoogleFonts などを使用して使用@font-faceしない場合、どこに配置すればよいのでしょうか?

*更新 - 上記を再確認するために、これは"@font-face{font-family:'Ave Regular';src:url('fonts/ave-regular.eot?#iefix')....etc"body を配置する場所ではなく、css ファイルに配置する場所を参照しています"{ font-family: fontname, arial, serif } etc"。そして、私はそれがどこにでも行くことができて機能することを理解していること、そして私が上に置いても下に置いても真ん中に置いても「大きな」違いはありませんが、どれがどれだけ優れているかを探しています。特定のユースケースによっては、より優れています。

4

5 に答える 5

21

一番上に置くとcssの読み込みが遅くなると思います。

いいえ、違います。ブラウザーは、スタイルシートの残りの部分をロードする前に、最初にフォントをダウンロードするのを待ちません。フォントのダウンロードが非同期で開始されますが、これらのフォントのダウンロードはページのレンダリング以外には干渉しません ( FOUTを参照)。

ブラウザがスタイルシートの残りの部分よりも先にルールをダウンロードする必要があるため、ルールを一番上に置くと速度が低下するということを言いたい場合は、数十キロバイトの@font-faceルールがない限り、それは問題ではありません (非常に非常に、ほとんどありません）。

スタイルシートのどこに配置するかを規定する規則はありません@font-faceが、私は通常、整理のためにほとんどの @ 規則を一番上に置きます。

于 2012-09-11T19:38:43.157 に答える
0

上に置いても下に置いても、最終的にはしばらくロードする必要があるので、それはあまり重要ではないと思います. パフォーマンスが非常に重要な場合は、すべての CSS を 1 つのファイルにまとめて最小化することをお勧めします。このようにして、サーバーへのリクエストは 10 ではなく 1 つに制限されます (異なるフォントなどを含む 10 の異なる CSS ファイルの場合)。

これを読む：

スタイルシートを使用すると、すべてのスタイルシートがダウンロードされるまでプログレッシブ レンダリングがブロックされます。そのため、スタイルシートをドキュメントの HEAD に移動して、最初にダウンロードされ、レンダリングがブロックされないようにするのが最善です。スクリプトを使用すると、スクリプトの下のすべてのコンテンツでプログレッシブ レンダリングがブロックされます。スクリプトをページ内のできるだけ低い位置に移動するということは、より早くレンダリングされるスクリプトの上により多くのコンテンツがあることを意味します。

参考文献 http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/

于 2012-09-11T19:36:03.430 に答える
-2

I would say...you keep your font inside the body{ font-family: blahblahblah;}

于 2012-09-11T19:36:14.820 に答える
-2

慣例に反して、ファイルの先頭で font-face を使用するのが最善です。これは、頻繁に変更される可能性が低いためですが、変更された場合、アプリケーションに (視覚的に) 多くの影響を与えます。

通常、またはのいずれかに含めbody{}ますhtml{}

*パフォーマンス *に関しては、ほとんど問題にはなりません。自分自身の保守性に関しては、視覚的に効果的なものを見つけようとして CSS を探し回る必要がないように、メンタル パフォーマンスの観点からそれを一番上に置くのが最善です。

これは、この簡単なスニペットを実装する方法です。

body{margin:0; font-family: "CiN", Arial;}
@font-face {
    font-family: "CiN";
    src: url('sling.eot');
    src: local('?'), url('sling.woff') format('woff'), url('sling.ttf') format('truetype'), url('sling.svg#webfontJgTq0KbR') format('svg');
    font-weight: normal;
    font-style: normal;
}
于 2012-09-11T19:42:22.753 に答える