このツールについて
CSS フォントスタック生成ツールは、訪問者の端末にすでにインストールされているフォントから、そのまま貼り付けられる font-family の値を作成します。ネイティブのシステム UI フォント、Inter や Helvetica のようなネオグロテスク、Charter のようなトランジショナル・セリフ、コード向けの等幅フォントなどのスタイルを選ぶと、各プラットフォームで最適なフォントを正しい順序で並べます。
スタックは有名な Modern Font Stacks コレクションに準拠しており、今も多くのサイトで使われている従来型の -apple-system, BlinkMacSystemFont, "Segoe UI" スタックも用意しています。簡体字中国語、繁体字中国語、日本語、韓国語、アラビア語、タイ語、ヒンディー語のテキスト用フォールバックや、末尾へのカラー絵文字フォントの追加もできます。
使い方
- フォントスタック を選びます。左側のプレビューに、今使っている端末での見た目が表示されます。プレビューのテキストは編集して自分の言葉で試せます。
- ページに中国語・日本語・韓国語・アラビア語・タイ語・ヒンディー語のテキストが含まれる場合は その他の文字のフォント を選びます。
- 絵文字フォントを追加 をオンまたはオフにします。
- 出力形式 を選びます：通常の
font-family宣言、CSS カスタムプロパティ、Tailwind のfontFamilyエントリ、または単純なリスト。 - 結果をコピーするか、
.cssファイルとしてダウンロードします。
スペースを含む名前や数字で始まる名前には自動で引用符が付きます。system-ui や sans-serif などの CSS キーワードには決して引用符を付けません。引用符で囲むと、存在しないフォント名として扱われてしまうためです。
例
簡体字中国語のフォールバック付きシステム UI：
font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";ヒント
- 本文用に 1 つ、コード用に等幅のスタックを 1 つ使いましょう。システムフォントのスタックなら 2 つ使っても読み込みコストはかかりません。
- プレビューは自分の端末にインストールされているフォントに依存するため、Windows やスマートフォンでもページを確認してください。
- 後から Web フォントを追加する場合は、リストの先頭に置き、システムフォントのスタックをフォールバックとして残します。
よくある質問
› フォントスタックとは何ですか？
CSS の font-family プロパティに並べるフォントファミリーのリストです。ブラウザは端末にインストールされている最初のフォントを使い、なければ次のフォントにフォールバックし、最後は sans-serif などの総称ファミリーに行き着きます。
› 中国語・日本語・韓国語のフォントを追加するのはなぜですか？
Inter や Charter のような欧文フォントには CJK のグリフがありません。総称ファミリーの前に PingFang SC、Microsoft YaHei、Noto Sans SC などを並べておくと、中国語のテキストがシステム任せではなく、スタイルに合ったフォントで表示されます。アラビア語、タイ語、ヒンディー語（デーヴァナーガリー）も同様です。ロシア語、ウクライナ語、ギリシャ語、ベトナム語、トルコ語、ポーランド語など、ラテン文字やキリル文字の言語は追加の設定が不要です。どのスタックにも含まれるシステムフォントと Noto フォントがすでに対応しています。
› 絵文字フォントが sans-serif の後ろにあるのはなぜですか？
絵文字フォントは絵文字しかカバーしていません。最後に置くことで、通常の文字や数字が絵文字フォントで描画されることはなくなり、絵文字はどのプラットフォームでもカラーグリフで表示されます。
› これらのスタックには Web フォントのダウンロードが必要ですか？
いいえ。どのスタックも Windows、macOS、iOS、Android、主要な Linux ディストリビューションに標準搭載されているフォントだけを使うため、フォントのリクエストはゼロでページが読み込まれます。