web-dev-qa-db-ja.com

ソースが同じ場合、ブラウザは複数のフォントフェースをどのように処理しますか？

ウェブサイトのリソースが既に豊富な場合、特にモバイルでは（複数の携帯電話は基本的にミニコンピューターであるため）、フォントフェイスで複数の異なるフォントを使用すると、パフォーマンスに大きな影響を与えることがわかります。

この場合、私はWebアプリについて話しているので、これは通常のWebサイトではないため、パフォーマンスは非常に重要です。

基本的に、フォントに「header-stats」、「header-quote」などの名前を付け、意味のあるすべてのセクションにフォントフェースを付けることを考えています。

@font-face {
    font-family: "section1";
    src: url("/dist/fonts/example.woff");
}
@font-face {
    font-family: "section2";
    src: url("/dist/fonts/example.woff");
}

同じフォントのセクションが2つありますが、名前を変えるだけで後で編集しやすくなり、後でそのセクションのフォントを変更したい場合があります。これはsassなどの時代では大きな問題ではないことに注意してください。私のcssファイルはすべてとにかく異なるフォルダー/ファイルにグループ化されますが、それが可能であればいいでしょう。変数を使用してこれを簡単に行うことができますが、このケースを特別に疑問に思っているだけです。代替案を提案しないでください。

これがブラウザのパフォーマンスにどのように影響するかについての情報はありますか？それは2つの異なるフォントと同じですか、ほとんどの主要なブラウザがこれを説明していますか？

cssperformancefonts
2
S00

可能な解決策：

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

The order is important, the bold/italic style must come last.

性能

確かではありませんが、これに従うと近似値を得ることができます：

ブラウザがHTMLドキュメントを要求する
ブラウザはHTML応答の解析とDOMの構築を開始します
ブラウザはCSS、JS、その他のリソースを検出し、リクエストをディスパッチします
ブラウザは、すべてのCSSコンテンツを受信するとCSSOMを構築し、
DOMツリーと組み合わせてレンダーツリーを構築します
ページ上で指定されたテキストをレンダリングするためにどのフォントバリアントが必要かをレンダリングツリーが示すと、フォント要求がディスパッチされます。
ブラウザはレイアウトを実行し、コンテンツを画面に描画します
フォントがまだ利用できない場合、ブラウザはテキストピクセルをレンダリングしない場合があります
フォントが使用可能になると、ブラウザはテキストピクセルをペイントします

勧告

ブラウザーはフォントを処理しますが、list-style-typeは別の方法で処理されますが、2つのHTTPリクエストを作成します。
また、同じフォントを使用している場合、異なるセクションに宣言する必要はありません。bodyのデフォルトにするだけで、そうしない限り、ウェブサイトのすべてのセクションに適用されます。異なるフォントを含む他のfont-familyプロパティを配置します。
そして最後になりましたが、グーグルフォントを使用してください。

1
knif3r