【Tailwind和訳】TYPOGRAPHY/Font Smoothing

この記事について

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

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

Font Smoothing

要素のフォントのスムージングを制御するためのユーティリティ。

Class	Properties
antialiased	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
subpixel-antialiased	-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;

Subpixel Antialiasing

subpixel-antialiasedユーティリティーを使うと、サブピクセル・アンチエイリアシングを使ってテキストをレンダリングできます。

<p class="subpixel-antialiased ...">The quick brown fox ...</p>

Grayscale Antialiasing

アンチエイリアスユーティリティーを使って、グレースケールのアンチエイリアスを使ってテキストをレンダリングします。

<p class="antialiased ...">The quick brown fox ...</p>

レスポンシブ

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

<p class="antialiased sm:subpixel-antialiased md:antialiased ...">
  The quick brown fox jumped over the lazy dog.
</p>

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

カスタマイズ

バリアント

デフォルトでは、フォントスムージングユーティリティーのためにレスポンシブバリアントのみが生成されます。

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

例えば、この設定は、ホバーとフォーカスのバリアントも生成します。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       fontSmoothing: ['hover', 'focus'],
      }
    }
  }

無効化

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

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+     fontSmoothing: false,
    }
  }