概要へ移動

font-familyの概要

「文字列の種類（フォント・ファミリー）」を指定する。

一般的に複数のフォント・ファミリーを指定する。（カンマ「,」でつなげる）

なお、当サイトの font-familyは以下。

CSS : 当サイトのフォント・ファミリー
body {

    font-family:  "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;

}

指定の順番は「先に書いたもの」が優先される。上記の例ではヒラギノ角ゴ ProN W3が最優先で、sans-serifは最後の選択肢である。

最後の選択肢は汎用フォント・ファミリーを指定しておくことが望ましい。（sans-serifは汎用フォント・ファミリーの一種）

汎用フォント・ファミリーは「必ず見つかる」ということになっている。よって、「何も見つからない」という状態を避けることができる。

最初に書いてあるヒラギノ角ゴ ProN W3はMacにはインストールされているが、普通のWindowsにはインストールされていない。

Macから使っているユーザには、このサイトはヒラギノ角ゴ ProN W3で表示されているハズである。

一方、Windows10から使っているユーザには游ゴシックで表示されているだろう。

一般的に日本語のサイトでは「Mac（およびiOS）用の日本語フォント」→「Windows用の日本語フォント」→「英語用のフォント」→「汎用フォント・ファミリー」の順番で指定することが多い。

汎用フォント・ファミリー

下記の５種類である。system-ui、math、emoji、fangsongの追加が検討されているが草案段階なので記載しない。

（表） 汎用フォント・ファミリー一覧
汎用フォント・ファミリー名説明（それぞれのフォントを使用。見つからない場合、serifで表示）例
serif「serif」は明朝体（セリフ体）。本文で使われることが多い。Font
sans-serif「sans-serif」はゴシック体（サンセリフ体）。タイトルで使われることが多い。Font
cursive「cursive」は筆記体。Font
fantasy「fantasy」はファンタジー。かわいい系の文字であるが、多用するとウザい。Font
monospace「monospace」は等幅。横幅が一定なので、プログラミングコードなどの表記で使われる。Font

フォント・ファミリー一覧

※ 確認する文字列を変えるには、ここ（↓）の文字列を変える。
フォント・ファミリー例注釈
Arial {{ mystr.trim() }} 英語向き。
sans-serif系。
オススメ。
"Arial Black" {{ mystr.trim() }} 英語向き。
sans-serif系。
"Book Antiqua" {{ mystr.trim() }} 英語向き。
serif系。
Century {{ mystr.trim() }} 英語向き。
serif系。
"Century Gothic" {{ mystr.trim() }} 英語向き。
sans-serif系。
"Comic Sans MS" {{ mystr.trim() }} 英語向き。
cursive系。
Courier {{ mystr.trim() }} 英語向き。
monospace系。
"Courier New" {{ mystr.trim() }} 英語向き。
monospace系。
"Franklin Gothic" {{ mystr.trim() }} 英語向き。
sans-serif系。
Georgia {{ mystr.trim() }} 英語向き。
serif系。
オススメ。
Helvetica {{ mystr.trim() }} 英語向き。
sans-serif系。
オススメ。
Impact {{ mystr.trim() }} 英語向き。
fantasy系。
"Lucida Console" {{ mystr.trim() }} 英語向き。
monospace系。
オススメ。
"Lucida Sans Unicode" {{ mystr.trim() }} 英語向き。
sans-serif系。
"Palatino Linotype" {{ mystr.trim() }} 英語向き。
serif系。
Sylfaen {{ mystr.trim() }} 英語向き。
serif系。
Tahoma {{ mystr.trim() }} 英語向き。
sans-serif系。
Times {{ mystr.trim() }} 英語向き。
serif系。
オススメ。
"Times New Roman" {{ mystr.trim() }} 英語向き。
serif系。
オススメ。
"Trebuchet MS" {{ mystr.trim() }} 英語向き。
sans-serif系。
Verdana {{ mystr.trim() }} 英語向き。
sans-serif系。
オススメ。
"Yu Gothic" {{ mystr.trim() }} 日本語向き。
ゴシック体。
游ゴシックと同じ。
游ゴシック {{ mystr.trim() }} 日本語向き。
ゴシック体。
Yu Gothicと同じ。
游ゴシック体 {{ mystr.trim() }} 非推奨。
Windows10で機能しない。
YuGothic {{ mystr.trim() }} 非推奨。
Windows10で機能しない。
"Yu Mincho" {{ mystr.trim() }} 日本語向き。
明朝体。
游明朝と同じ。
游明朝 {{ mystr.trim() }} 日本語向き。
明朝体。
Yu Minchoと同じ。
游明朝体 {{ mystr.trim() }} 非推奨。
Windows10で機能しない。
YuMincho {{ mystr.trim() }} 非推奨。
Windows10で機能しない。
Meiryo {{ mystr.trim() }} 日本語向き。
Windows10。
メイリオと同じ。
メイリオ {{ mystr.trim() }} 日本語向き。
Windows10。
Meiryoと同じ。
"MS PGothic" {{ mystr.trim() }} 日本語向き。
Winのゴシック体。
時代遅れで非推奨。
"MS PMincho" {{ mystr.trim() }} 日本語向き。
Winの明朝体。
時代遅れで非推奨。
"MS Gothic" {{ mystr.trim() }} 日本語向き。
Windows10。
ゴシック体のmonospace系。
時代遅れで非推奨。
"MS Mincho" {{ mystr.trim() }} 日本語向き。
Windows10。
明朝体のmonospace系。
時代遅れで非推奨。
"Arial unicode ms" {{ mystr.trim() }} 多言語向き。
Windows10。
日本語が汚い。
非推奨。
"MS Sans Serif" {{ mystr.trim() }} Windows10。
非推奨。
日本語に未対応。
sans-serif系。
"MS Serif" {{ mystr.trim() }} Windows10。
非推奨。
日本語に未対応。
serif系。
HiraKakuProN-W3 {{ mystr.trim() }} 日本語向き。
Apple（iOS）。
"ヒラギノ角ゴ ProN W3" {{ mystr.trim() }} 日本語向き。
Apple（Mac）。
HiraKakuProN-W6 {{ mystr.trim() }} 日本語向き。
Apple（iOS）。
"ヒラギノ角ゴ ProN W6" {{ mystr.trim() }} 日本語向き。
Apple（Mac）。
HiraMinProN-W3 {{ mystr.trim() }} 日本語向き。
Apple（iOS）。
"ヒラギノ明朝 ProN W3" {{ mystr.trim() }} 日本語向き。
Apple（Mac）。
HiraMinProN-W6 {{ mystr.trim() }} 日本語向き。
Apple（iOS）。
"ヒラギノ明朝 ProN W6" {{ mystr.trim() }} 日本語向き。
Apple（Mac）。
HiraKakuProN {{ mystr.trim() }} 実験中
"ヒラギノ角ゴ ProN" {{ mystr.trim() }} 実験中
HiraMinProN {{ mystr.trim() }} 実験中
"ヒラギノ明朝 ProN" {{ mystr.trim() }} 実験中
SimSun {{ mystr.trim() }} 中国語向き。

※ フォントが適用されない場合は、「monospace」で表示されるように設定している。

追加してほしいfont-familyがあれば、下の「Twitter」のリンクからツイートしてください。

Emmet : ff

記述Visual Studio Code
fffont-family: serif;
ffssfont-family: sans-serif;
ffcfont-family: cursive;
ffffont-family: fantasy;
ffmfont-family: monospace;