CSSシステムフォントスタックリファレンス

投稿日: 2022-04-20 2022-10-24
タグ: css

Webサイトのフォントは、ブラウザが最終的な外観と形式でページを表示できるようになる前にダウンロードする必要があるバンドルの合計サイズの大部分を簡単に占める可能性があります。さらに、悪名高いスタイルなしテキストのフラッシュ（FOUT）など、あらゆる種類のことを心配する必要があります。ただし、 font-displayプロパティのおかげで、この問題全体の一部が解決されたことは間違いありません。

それに加えて、Webサイトで見つかったテキストはほとんどの場合最も重要な部分であるため、見栄えが悪いテキストや読みにくいテキストは必要ありません。パフォーマンスとルックアンドフィールの両方を満たすために精通したWebデザイナーは何をしますか？

1つの解決策は、ユーザーのデバイスにすでにインストールされているフォントを実際に使用することです。以前は、一部の一般的なシステムには美しいフォント面が組み込まれていなかったため、これはあまり洗練されたソリューションではありませんでした。ただし、現在は状況が異なり、すべての主要なオペレーティングシステムには、見た目も読みやすい sansserifシステムフォントが付属しています。

したがって、トリックは、システムフォントを使用する必要がある要素の font-family プロパティの値として、これらすべてのデフォルトのシステムフォント名を提供することです。ブラウザは、現在のシステムで検出できる最初のブラウザを使用します。これは、テキストが読み取られているシステムに基づいてテキストが異なって見えることも意味することに注意してください。ただし、これは必ずしも悪いことではありません。テキストは、読み取られているOSにネイティブであると感じるからです。

サンセリフシステムフォントスタック

面倒なことはありませんが、このWebサイトで使用されているシステムフォントスタックのバージョンは次のとおりです。

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen-Sans, Ubuntu, Cantarell,
               "Helvetica Neue", sans-serif;
}

そのスタックはWordPressで使用されているものと同じであり、これまでのところAlligator.ioのコンテンツでかなりうまく機能しています。このサイトでは、タイトルは Recursive variable font を使用してもう少し万能ですが、コンテンツ自体はシステムフォントを使用しています。

興味がある場合は、これらのフォント/キーワードの内訳を次に示します。

-apple-systemおよびBlinkMacSystemFont：Appleデバイス（通常は San FranciscoまたはHelveticaNeue）のシステムフォントを参照するために使用されるキーワード。オペレーティング·システム。一部の新しいブラウザでは、キーワード system-ui を使用して、これら2つのキーワードの機能を実行できるようになりました。
Segoe UI ：Windowsシステムで使用されます。
Roboto ：Androidデバイス用のシステムフォント。
Oxygen-Sans ：KDEを使用するLinuxシステム。
Ubuntu ：Ubuntu Linux
Cantarell ：Gnomeを使用するLinuxシステム（Ubuntu以外）。
Helvetica Neue ：以前のシステムがすべて失敗した場合に備えて、多くのシステム（特にAppleシステム）で使用できる一般的なフォールバックフォント。
sans-serif ：他のすべてが失敗した場合は、デフォルトのブラウザーsans-serifフォントにフォールバックします。多くの場合、最も満足のいく結果ではないため、単に使用しない理由 font-family: sans-serif.

人生のほとんどのものと同様に、システムフォントスタックにはさまざまなフレーバーがあり、それぞれが少し異なります。たとえば、GitHubが使用するスタックは次のとおりです。

モノスペースシステムフォントスタック

セリフベースのフォント用のシステムフォントスタックはありませんが、モノスペースフォント用のシステムフォントスタックがあります。これは、コードスニペットなどに非常に役立ちます。 Bootstrap v4 で使用されるは次のとおりです（GitHubでも非常によく似たバージョンを使用しています）。

code {
  font-family: SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", 
               "Courier New", monospace;
}

System Fonts Using @font-face

CSSの複数の場所で複数のフォント名の同じ文字列を繰り返すことにうんざりしている場合は、このCSS-トリックの記事に記載されているトリックがあり、@fontを利用できます。 -face at-ruleは、スタック全体を参照する単一の名前を定義します。

getdocs

13036