触った感触を述べたいがよろしいか。

あらまし

お勉強しようと使ってみたところなぜか游ゴシックUIで表示される…。調べたらTailwindのfont-familyはUI系ゴリ押しでした。カスタマイズは規定のフォントクラスを上書きして行うようです。

postcss 8.2.4
- tailwindcss 2.0.2
  - modern-normalize 1.0.0
  - purgecss 3.1.3

プリセットを見る

ドキュメント全体にかかっている設定から見たいと思います。最初にmodern-normalize.cssがインポートされるためその書体指定もあるのですがTailwindにほぼ上書きされるのとコンセプト的に大差ないので割愛いたしました。

html {
  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";
}

body {
  font-family: inherit;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
}

pre, code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Mona...
}

大掴みに言うとゴシック体を使うことと各プラットフォームの普及フォントを使うというポリシーがあるようです。一貫した体験性を提供しようという考えのもとユーザの選択肢を奪う指定になっておりまして好みの分かれるところだと思いますがフレームワークなのでそれはいいとして問題は日本語環境のwindowsでございますあね。

system-uiはアレがアレする

system-uiはOSのネイティブUIに使われているフォントを意味する総称フォント¹でありまして現状OSの見た目に寄せたい部分に使うのが無難でしょう。たとえばPWAのメニューとか。

The purpose of system-ui is to allow web content to integrate with the look and feel of the native OS.

英語圏では可読性の高いSegoe UIが選択されるので構わないのでしょうけど、MS UI Gothicにつらなる日本語UIフォントというのはレタースペースが極小となっていてVariable fontでもなくUIパーツに全角文字を押し込むのに都合がよいですが文章となると読みづらい。実際主要ブラウザのデフォはUIじゃないほうのMeiryoですし、まあわざわざUI系フォントで閲覧している人がいないとは言い切れないですけど、そうであるにしてもノーマライズと言いつつ偏屈な特殊例を増やす残念なCSSであることには変わりありません。

このプロセスはpreflightに含まれており無効にするオプション²も紹介されていましたがこれをやると下処理がゴソっと抜けてしまうのでルート要素のフォント指定だけ変更する方法について後で触れたいと思います。

フォントファミリのクラス

上記はhtml全体のお話でしたが、要素ごとにフォントファミリを指定するためのクラスが用意されています。こちらはpreflightを止めても使用可能でした。

.font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, ...
}

.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;
}

それぞれresponsive variantも生成されますので画面サイズに応じて表示フォントを変えることができます。デバイスごとにserifとsans-serifを切り替えたい需要がどこかにあるのやもしれません。

カスタマイズについて

Tailwindのfont-familyは日本語環境にマッチしない部分がありました。またフォントクラスのvariantは標準ではまず使わないであろうものでしたのでカスタマイズが前提となっているのかなと思います。

クラス定義

tailwaind.config.jsに新しいクラスを定義するならたとえば以下のように指定します。

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['sans-serif'],
        'relics': ['Times New Roman', 'MS PGothic'],
        'ui': ['system-ui', '-apple-system']
      }
    }
  }
}

クラス名はキーの頭に.font-を足して作られます。この場合.font-sans, .font-relics, .font-uiとそれぞれのvariantが生成されます。配列の値はそのまま出力されますのでフォント名によっては³は引用符も含めて設定しておく必要があります。

全体指定の上書き

.font-sansの値はhtml要素のフォント指定としても利用されます。なのでsansを上書きすると結果的に全体設定になります。同様に.font-monoはpreなどの初期値と入れ替わります。この点についてマニュアルに該当箇所が見つけられなかったのですがCSSのコメントには一応記載がありました。

Use the user's configured `sans` font-family (with Tailwind's default sans-serif font stack as a fallback) as a sane default.

そういうわけでクラスとして使わないとしてもsansだけは設定しておくのがよいと思われます。

俺と俺のカップルチャンネル

ブログのひとこと説明を入力します。

Tailwind 2.0のfont-familyがどうなっているか確認したので