修正・加筆により、ものすごく読みにくくなったので、全体を書き直しました。
よろしければ、こちらをご覧下さい。
修正後
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に搭載されているゴシック体フォントである
「游ゴシックミディアム」を指定すると、
游ゴシックミディアム
字がはっきり表示されて、見やすくなっている。
2. CSS フォント指定の誤解
どうして、こんな「とち狂った」フォント指定が存在するのか、想像してみた。
scivola さんのコメント通り、
「2. CSS フォント指定の誤解」の中に
誤り・誤解を招くかもしれない表現があるので訂正します。
いやはや、CSSは難しい...
「詳細度」については、
本記事の趣旨から外れるのであまり説明しません。
参考文献をご覧下さい。
-
CSSは、後からの指定が優先される。（ご指摘により、訂正） - CSSは、（同等以上の詳細度の場合、）後からの指定で上書きされる。（ご指摘により、訂正）
- フォントファミリーの指定は、同じ行の中では前の指定が優先される。
どういうことか、説明する。
CSSスタイルの指定は、
各行ごとに、順番に読み込まれ、
後ろの行で指定する方が優先される。（ご指摘により、訂正）
（同じ詳細度で）後ろの行で指定されると、上書きされる。~~（ご指摘により、訂正）
font-family:③;（③は②で上書きされ、指定が無かったことになる）
font-family:②;（②は①で上書きされ、指定が無かったことになる）
font-family:①;（最終的に、①だけが指定されたことになる）
（数字は優先順位）
ところが、
フォントファミリーの指定の場合、同じ行の中で複数の指定ができる。
その同じ1行の中では、
先に指定したフォントがあれば、それが優先して使われ、
後に指定したフォントは、同じ行中のそれまでに指定されたフォントが、システムに存在しない場合のみ、使われることになる。
(補足)
「文字ごとに」、
先に指定したフォントのファイルに情報があれば、その文字に関しては、そのフォントが採用され、
後に指定したフォントは、それより前の指定に文字情報が無かった場合に限り、採用される。
例えば、
「欧文フォント」と呼ばれる「英数字」中心のフォントを先に指定し、
「和文フォント」と呼ばれる「日本語・漢字・仮名・（全角・半角）英数字など」を含むフォントを後に指定することで、
「英数字」は「欧文フォント」、「それ以外の日本語の文字」は「和文フォント」、
に指定することができるのだ。
だが、端末によっては、そのフォントがインストールされていない場合もあり、
その場合は、順に後ろのフォント指定が検討されることになる。
font-family:①,②,③;
（数字は優先順位）
つまり、フォントファミリーの指定については、
その１行の指定の中では、前に指定すればするほど優先され、
それが改行され、別の行で新たに指定が行われれば、
その別の（後ろの）行が優先され、
その後ろの行中の指定では、前の指定ほど優先される。
つまり、こんな感じだ。
font-family:⑦,⑧,⑨;
font-family:④,⑤,⑥;
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;
これは全く無意味なのだ。
なぜなら、
２行目の最後に「sans-serif」指定があるので、
この「sans-serif」指定は、そのシステムに存在する「標準のゴシック体フォント」のことなので、
すべての端末で、これより優先順位が低いゴシック体指定の全てを無意味にしてしまうのだ。
「ヒラギノ角ゴ Pro W3」や「Osaka」はゴシック体フォント（sans-serif の一種）なので、
この指定が無効なのはもちろん、
この行をコメントアウトすること自体無意味なのだ。
恐らく、このCSSは、CSSの優先順位を知らない人が作成したのだろう。
大手グループ会社とは言っても、Webページの製作で金をケチって（？）、トホホなことになっている例がたくさんあるのだ。
(わたしもエラそうなことは言えない）
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ゴシックファミリー」のフォントは、「ドット数」が少ないのだ。
「ドット数」が少ないフォントだから、「ドット数」が少ないディスプレイではうまく表示できても、
たくさんのドットが表示できる最近のディスプレイで表示すると、
文字の表示に使われる「ドット数」が少な過ぎて、
文字がかすれて見えるのだろうと思う。
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 の場合など）