Blogger：フォント設定をメイリオ優先にしたよ！＋ヒラギノ問題

　本ブログのフォント指定を見直したのでメモしておきます。

»過去記事：■「Blogger」ラベル

---

　▼よくある設定の問題点　▼Mac環境の対応

　直接的な動機は、今月あったGoogle Chromeのアップデート。
　具体的にはバージョン: 96.0.4664.45なのですが、どうも文字の見た目が大きく変わってしまったようです。
　このブログはもちろん、他のサイトを見た時も明らかに印象が違うのでちょっと驚きました。

　特に太字の変化が大きかったです。
　文字によっては読みづらいことが多かったので、改めてフォントの設定を見直すことにしました。

（追記）

　やはり不評だったのか、すぐ後の更新でゴシック体フォントの見た目は従来のものに戻っていました。
　まあメイリオは↓の比較のように高解像度ディスプレイを想定したフォントだし、特に問題も無さそうなので今後もずっとメインで使うつもりです。

　結論として、以下のように変更しました。

font-family: "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Osaka, arial, sans-serif;

　↓
font-family: Meiryo,"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3",Hiragino Sans,osaka,system-ui;

　Windows環境（※PC版Chrome）での見た目は↓のように変化しました。（なんでや！ バキ関係ないやろ！）

（旧）

（新）

　※元記事は◆2021年10月のメモ

　ほぼMS Pゴシックとメイリオの差ですが、全体的にかすれた感じが消えてクッキリしているのが分かるはず。
　今回気になっていた「時事」「期限」のように画数の多い漢字が太字だとつぶれがちだった点も気にならない程度に解消されていました。
（さっさとメイリオにしときゃよかったな……）

＊

◇よくある設定の問題点　▲目次
　これまでは、おそらく「よくある設定」だと思われる以下の指定にしていました。

font-family: "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Osaka, arial, sans-serif;

　この設定もだいぶ古臭い設定となってしまったのか、今回の件を抜きにしてももはやベストとは言えないようです。
　実際は先頭をメイリオ（Windows向けの見やすいやつ）にしているサイトが多いかと思います。
　ただ、個人的には「ブラウザ上の長文ならゴシックのほうがいいかな？」と思い採用していませんでした。
（トップの一言メモだけメイリオにしていました）

　しかし今回のChrome仕様変更により、MS Pゴシックのままでは見づらさがとても気になりました。
　おそらくフォントが悪いわけではなくブラウザ側の描画方法が変わった（？）ものと思われます。

　フィードバックしだいでは今後のChrome更新で改善される可能性もありますが、いつになるか分からないためメイリオ優先の設定に切り替えることにしました。
　具体的には、bodyタグの指定にあった"ＭＳ Ｐゴシック"の前にMeiryo,と書き加えるだけです。

　最終的には↓こんな感じにしました。
　見た目の改善は上記の通り。

font-family: Meiryo,"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3",Hiragino Sans,osaka,system-ui;

◇ヒラギノが明朝体になる問題　▲目次
　ついでにMac環境について。
　こちらは従来の指定だと意図しない表示（明朝体とか）になるケースが増えてきているのだとか。

　参考にしたのはこちら。
　　↓
◆macOS Catalinaでヒラギノ角ゴPro/ProNがなくなって困ってるfont-familyの設定を考える。
　＊
◆Mac Catalina WEBでのヒラギノフォント表示問題について考えたメモ

　具体的な原因は2019年のmacOS Catalina以降、ヒラギノ角ゴ Pro W3が標準で収録されなくなったため。
　Mac環境では長年標準的に使われていたフォントだったため、、比較的新しい端末でわりと大規模に起きている問題なのだとか。

　対策としてはヒラギノ角ゴ Pro W3に続けてヒラギノ角ゴ W3を指定する……というのが挙げられていました。
　しかし、日本語名だとヒラギノ角ゴなのかヒラギノ角ゴシックなのか等ややこしいため、Hiragino Sansと指定するのが無難みたい。

　加えて、最終的な受け皿としてもはやsans-serifは万能ではないようです。
　最近ではsystem-uiというのがあり、これを指定すればモバイル環境も含めて柔軟に対応してくれるのだとか。
　まあMacもってないし実環境での検証はしていませんが、おそらくだいぶマシになったんじゃねーの（希望）とは思います。
（これでダメならもう知らねーわ）

　実際ヒラギノ角ゴ Pro W3の指定は未だに相当数残っているはずなので、見つからなかったらChrome側で適当にそれっぽいやつ選んどいてよって感じだし、ひょっとしたらすでに対応されてたりするのかな？


（備考）
　合わせて、ブログ各所で分散していたフォント設定も一箇所にまとめました。
　ただしpreタグは一般的に自動でフォントが変わる挙動なので、ここは改めて同様のフォント指定（やや小さめサイズ）を書き加えました。
　ごちゃごちゃしていますが、↓の枠がpreで囲ったもの＋クラス指定です。

pre {
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: Meiryo,"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3",Hiragino Sans,osaka,system-ui;
    font-size: 90%;
    
    line-height:1.1em;
    color: #ccdd99;
    margin : 0.3em 2em 0.3em 1em;
    padding:0.5em;
    border: 1px solid orange;
}

　現行ブラウザならDIVにwhite-space指定するのがスマートで良さそうですが、過去にpreで書いた分もあるのでpreにフォント指定する形にしました。

---

　以上です。ではまた。　▲目次

»過去記事：■「Blogger」ラベル


フォントかるた