前回の記事
で、かなりの修正・加筆が必要になり、あまりに読みにくくなったので、新しい記事に作り直しました。
scivola さんには重要なご指摘をいただき、感謝いたします。
1. 気でも狂ったのか！？
何をとち狂ったのか、
「MSゴシックファミリー」を「最優先フォント」にしているサイトが、
少なからず存在する。
やめてくれ！
文字がかすれて非常に見にくいのだ！
Chromeの標準フォント指定は無効化されて効かない！
「MSゴシックファミリー」は、Windows XP以降の全てのWindowsパソコンに標準搭載されているので、これを最優先にすると、
ほぼ全てのWindowsユーザーの表示が「かすれ」てしまうのだ！
これは、ある大手グループ会社のCSSである。
/*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;*/
font-family: "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
ご丁寧に、「MS Pゴシック」を最優先フォントに指定してくれている！
すると、どのようなWebページになるか。
MS Pゴシック
比較のために、Windows 11に搭載されているゴシック体フォントである
「游ゴシックミディアム」を指定すると、
游ゴシックミディアム
両者を比較すると、
「MS Pゴシック」がどれほど読みづらいかわかるだろう。
これが、Webページの全体にわたって使われているのだ。
2. CSS フォント指定の誤解
どうして、こんな「とち狂った」フォント指定が存在するのか、想像してみた。
- CSSは、後からの指定で上書きされる。
- フォントファミリーの指定は、同じ行の中では前の指定が優先される。
どういうことか、説明する。
CSSスタイルの指定は、
各行ごとに、順番に読み込まれ、
後ろの行で指定されると、上書きされる。
font-family:③;（③は②で上書きされ、指定が無かったことになる）
font-family:②;（②は①で上書きされ、指定が無かったことになる）
font-family:①;（最終的に、①だけが指定されたことになる）
（「同じ詳細度での指定」が前提。「詳細度」については、参考文献をご覧下さい。）
ところが、
フォントファミリーの指定の場合、同じ行の中で複数の指定ができる。
その同じ1行の中では、
先に指定したフォントにその文字のフォント情報があれば、それが使われ、
後に指定したフォントは、その文字のフォント情報が、それまでに指定されたフォントで見つからなかった場合のみ、使われる可能性がある。
(補足)
例えば、
「欧文フォント」と呼ばれる「英数字」中心のフォントを先に指定し、
「和文フォント」と呼ばれる「日本語・漢字・仮名・（全角・半角）英数字など」を含むフォントを後に指定することで、
「英数字」は「欧文フォント」、「それ以外の日本語の文字」は「和文フォント」、
に指定することができる。
だが、端末によっては、そのフォントがインストールされていない場合もあり、
その場合は、順に後ろのフォント指定が検討されることになる。
font-family:①,②,③;
（数字は優先順位）
結局、複数の行で指定がある場合、こんな感じになる。
font-family:⑦,⑧,⑨;（次の指定で上書きされる）
font-family:④,⑤,⑥;（次の指定で上書きされる）
font-family:①,②,③;（この行の指定だけが生き残る）
（数字は優先順位）
ということは、先ほどのCSSの例で、ご丁寧に上の行をコメントアウトしてあるようだが、
/*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;*/
font-family: "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
これは全く無意味なのだ。
なぜなら、次の行の指定で「上書き」されるから、
この行をコメントアウトすること自体無意味なのだ。
恐らく、このCSSは、CSSの優先順位を知らない人が作成したのだろう。
大手グループ会社とは言っても、Webページの製作で金をケチって（？）、トホホなことになっている例がたくさんあるのだ。
(CSS はややこしくて難しい。わたしもエラそうなことは言えない）
CSSの指定では、「詳細度」といって、
どの要素に対してどのように指定するか
などによっても、優先順位が変わってくる。
IDやクラス、親要素の追加指定などによっても、優先順位が変わる。
Javascript による上書きの方が優先される、というのもある。
ご参考までに、CSSの優先順位に詳しい書籍を紹介する。
参考文献
CSS完全ガイド 第2版（オライリー）
2005年出版の古い本だが、CSSの優先順位の説明がとてもわかりやすかった。
3. 「MSゴシックファミリー」が使われた背景
「MSゴシックファミリー」は、Windows XPの時代まで、Windowsのブラウザ標準ゴシック体フォント
として使われてきた。
- MSゴシック （等幅フォント）
- MS Pゴシック（プロポーショナルフォント）
この２つが代表格だ。
でも、当時は「文字がかすれて見にくい」
なんてことはなかった。
しかし、今では「見にくいフォントの代表格」として扱われる。
なぜだろう？
わたしは、「ディスプレイの高精細化」が影響しているのだと思っている。
Windows XP 時代のディスプレイは、
画面の解像度が800×600ドットまたは1,024×768ドット（１Ｋ）
であったようだ。
でも今は、少なくとも２Ｋ（1,920x1,080）、場合によっては４Ｋ（3,840x2,160）の解像度が主流になっている。
恐らく、「MSゴシックファミリー」のフォントは、「ドット数」が少ないのだ。
「ドット数」が少ないフォントだから、「ドット数」が少ないディスプレイではうまく表示できても、
たくさんのドットが表示できる最近のディスプレイで表示すると、
文字の表示に使われる「ドット数」が少な過ぎて、
文字がかすれて見えるのだろうと思う。
ちなみに、あまり使われていないが、
「MS明朝ファミリー」というのもある。
- MS明朝 （等幅フォント）
- MS P明朝（プロポーショナルフォント）
これらも、MSゴシックファミリー同様に、文字がかすれる恐れがある。
古いフォントは指定しないのが無難だ。
4. 最後に
Windows XP の延長サポートが終了したのが2014年4月。
それから１０年以上が経過して、Windows のブラウザ標準のゴシック体フォントは、
以下のように変遷してきた。
| OS | フォント |
|---|---|
| Windows XP | MS Pゴシック |
| Windows Vista | メイリオ |
| Windows 7 | メイリオ |
| Windows 8 | メイリオ |
| Windows 8.1 | 游ゴシック |
| Windows 10 | 游ゴシック |
| Windows 11 | 游ゴシック |
MS Pゴシック
メイリオ
游ゴシック
游ゴシックミディアム
「游ゴシック」は、Mac でも搭載されているので、
端末が違っても表示が同じフォントとして有用とされている。
ところが、「游ゴシック」には、Windows版とMac版とで「太さの表示が違う」という問題があった。
そのため、Windowsでは、「游ゴシックミディアム」と指定する必要がある。
現状、お勧めできる（ゴシック体）フォントファミリーの指定は、
font-family:"游ゴシックミディアム",sans-serif;
これでいいだろう。
「游ゴシックミディアム」が無い環境では、「sans-serif」によって、
ブラウザの標準フォントが自動的に指定される設定になる。
この指定なら、
「游ゴシックミディアム」が無い環境で、望ましいフォントが自動設定されなかったとしても、
ブラウザの標準フォント変更機能によって、ユーザーごとに、
望ましいフォントに変更することができる。
あるいは、
font-family:sans-serif;
ゴシック体フォントで表示したいなら、これだけでも十分と思える。
最近のブラウザは、標準フォント変更機能によって、ユーザーごとに、
望ましいフォントに変更することができるからだ。
ただし、Webページが指定するフォントがシステムに存在する場合、
この機能が働かなくなってしまうことがある。
なので、特定のフォントを指定する場合は、
優先順位に特に注意して、フォント指定を行うべきだ。
「MSゴシックファミリー」を決して指定しないように。
もし、そんなことをしてしまったら、ブラウザの機能では修正できない場合があるのだ。
（Chrome, Edge の場合など）