💤

【Tailwind和訳】TYPOGRAPHY/Font Family

2021/10/24に公開約4,000字

この記事について

この記事は、TYPOGRAPHY/Font Familyの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Font Family

要素のフォントファミリーを制御するためのユーティリティ。

クラス プロパティ
font-sans font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-serif font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-mono font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

Sans-serif

font-sansを使うと、ウェブセーフな sans-serif フォントファミリーが適用されます。

<p class="font-sans ...">The quick brown fox jumps over the lazy dog.</p>

Serif

font-serifを使うと、Web セーフなセリフ系フォントファミリーが適用されます。

<p class="font-serif ...">The quick brown fox jumps over the lazy dog.</p>

Monospaced

font-mono を使って、ウェブセーフな等幅フォントファミリーが適用されます。

<p class="font-mono ...">The quick brown fox jumps over the lazy dog.</p>

レスポンシブ

特定のブレークポイントにおける要素のフォント・ファミリーを制御するには、既存のフォント・ファミリー・ユーティリティー・クラスに{screen}: というプレフィックスを追加します。例えば、md:font-serif を使うと、中程度の画面サイズ以上でのみfont-serifユーティリティを適用できます。

<p class="font-sans md:font-serif">
  <!-- ... -->
</p>

Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

カスタイマイズ

フォントファミリー

デフォルトでは、Tailwind は 3 つのフォントファミリーユーティリティを提供しています:クロスブラウザのサンセリフスタック、クロスブラウザのセリフスタック、クロスブラウザの等幅スタックです。これらを変更、追加、削除するには、Tailwind 設定のtheme.fontFamilyセクションを編集します。

tailwind.config.js
  module.exports = {
    theme: {
      fontFamily: {
-       'sans': ['ui-sans-serif', 'system-ui', ...],
-       'serif': ['ui-serif', 'Georgia', ...],
-       'mono': ['ui-monospace', 'SFMono-Regular', ...],
+       'display': ['Oswald', ...],
+       'body': ['"Open Sans"', ...],
      }
    }
  }

フォントファミリーは、配列またはカンマ区切りの単純な文字列として指定できます。

{
  // 配列形式:
  'sans': ['Helvetica', 'Arial', 'sans-serif'],
  // カンマ区切りのフォーマット:
  'sans': 'Helvetica, Arial, sans-serif',
}

なお、Tailwind はフォント名を自動的にエスケープしてくれません。 もし、無効な識別子を含むフォントを使用している場合は、引用符で囲むか、無効な文字をエスケープしてください。

{
  // 動作しない:
  'sans': ['Exo 2', ...],
  // 引用文を追加:
  'sans': ['"Exo 2"', ...],
  // ...またはスペースからのエスケープ:
  'sans': ['Exo\\ 2', ...],
}

Variants

デフォルトでは、レスポンシブバリアントのみがフォントファミリーユーティリティーに対して生成されます。

tailwind.config.jsファイルのvariantsセクションにあるfontFamilyプロパティを変更することで、フォントファミリーユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、このコンフィグはホバーとフォーカスのバリアントも生成します:

tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       fontFamily: ['hover', 'focus'],
      }
    }
  }

無効化

プロジェクトでフォントファミリーユーティリティーを使用しない場合は、設定ファイルのcorePluginsセクションでfontFamilyプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     fontFamily: false,
    }
  }

Discussion

ログインするとコメントできます