@日本語のWebサイト各位 font-familyで"ヒラギノ角ゴ Pro"をW3ごと指定するのやめて
font-familyでヒラギノ角ゴ Pro W3を指定しながら太字を出そうとすると、Chrome/Safariでよくないことが起きる。
検証環境: macOS Catalina 10.15.4 / Chrome 83.0.4103.57 (Vivaldi 3.1.1916.3) / Firefox 76.0.1 / Safari 13.1 (15609.1.20.111.8)
※面倒だったのでスクショはVivaldiで撮っちゃったけどChrome(81.0.4044.138)でも最後に書いてあるjsfiddleの結果は同じなので大丈夫なはず
参考: Firefox
W3が付いてようがちゃんとヒラギノ角ゴProのW6を引いてくれる。バッチリ。
Chrome
font-weight で指定されてもそれを無視してW3のフォントを表示する。別のフォントが前に指定されてるとそのフォントだけ太字になる (だいたいの場合は英文フォントが先に指定されていて半角英数字だけ太字になる) ので、見た目に違和感がある。
英文フォントだけ太字になってて違和感がある実例: GIGAZINEの関連リンク
日本語フォントしか指定してないので違和感は出ないが太字にはなっていない例: ニコニコのマイページ 追記(2020/09/20): ニコニコのマイページはリニューアル後W3を指定しなくなった
Safari
font-weight で指定されるとW3フォントを太字にしてくれる。のでかなり最悪な感じになるが、非Retinaディスプレイでないとわかりづらい。
じゃあどうすればいいのさ
- もういっそのこと諦めて、ユーザーの意思を最大に尊重する
font-family: sans-serifのみにしてしまう- フォントが見にくいんだけどって言われたらお前のブラウザか設定が悪いって言い返せる強いメンタルが必要
- どうしてもヒラギノ角ゴを使わせたいなら
W3指定をしない - boldのところはちゃんと font-family でW6を指定する (どこかで忘れるだろうし非推奨)
おまけ
この記事もはてなブログがテーマにヒラギノ角ゴ Pro W3を指定しているせいでChromeだと英数字しか太字にならない。つらい。 CSSを自分でいじったのでちゃんと全部太字になるようになった
追記
お試し用jsfiddleのURL貼るの忘れてた https://jsfiddle.net/51n34q6k/2/ (参考としてW6にした例も載せてるけどいらなかったら/2/を/1/にすれば見れるはず)
