フォントファミリー

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

Class reference

Class
Properties
.font-sansfont-family: 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-seriffont-family: Georgia, Cambria, "Times New Roman", Times, serif;
.font-monofont-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

Sans-serif

.font-sansを使用して、Webセーフなsans-serifフォントファミリを適用します。

I'm a sans-serif paragraph.

<p class="font-sans text-lg text-gray-800 text-center">
  I'm a sans-serif paragraph.
</p>

Serif

.font-serifを使用して、Webセーフなserifフォントファミリを適用します。

I'm a serif paragraph.

<p class="font-serif text-lg text-gray-800 text-center">
  I'm a serif paragraph.
</p>

Monospaced

.font-monoを使用して、Webセーフなmonospacedフォントファミリを適用します。

I'm a monospaced paragraph.

<p class="font-mono text-lg text-gray-800 text-center">
  I'm a monospaced paragraph.
</p>

レスポンシブ

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

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

<p class="font-sans sm:font-serif md:font-mono lg:font-sans xl:font-serif">
  <!-- ... -->
</p>

I'm a paragraph.

カスタマイズ

フォントファミリー

デフォルトでTailwindは、クロスブラウザーsans-serifスタック、クロスブラウザーserifスタック、およびクロスブラウザー等幅スタックの3つのフォントファミリーユーティリティを提供します。 Tailwindコンフィグのtheme.fontFamilyセクションを編集することで、これらを変更、追加、または削除できます。

  // tailwind.config.js
  module.exports = {
    theme: {
      fontFamily: {
-       'sans': ['-apple-system', 'BlinkMacSystemFont', ...],
-       'serif': ['Georgia', 'Cambria', ...],
-       'mono': ['SFMono-Regular', 'Menlo', ...],
+       'display': ['Oswald', ...],
+       'body': ['Open Sans', ...],
      }
    }
  }

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

{
  // Array format:
  'sans': ['Helvetica', 'Arial', 'sans-serif'],

  // Comma-delimited format:
  'sans': 'Helvetica, Arial, sans-serif',
}

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

{
  // Won't work:
  'sans': ['Exo 2', ...],

  // Add quotes:
  'sans': ['"Exo 2"', ...],

  // ...or escape the space:
  'sans': ['Exo\\ 2', ...],
}

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはfont family utilitiesのために作られます。

あなたはどのバリアントがfont family utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのfontFamilyプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

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

無効にする

もしfont family utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのfontFamily propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!