Mac Catalina WEBでのヒラギノフォント表示問題について考えたメモ

ことの発端

macOS CatalinaのChrome 77のフォント問題。
勘違いしている人が多いので説明。

Chromeのデフォルトだった「ヒラギノ角ゴシック ProN」がCatalinaで未バンドルになる
↓
該当するフォントがなくなったため、Sans Serifが明朝体で表示される
↓
フォント指定の甘いサイトは全部明朝体に！ pic.twitter.com/Cil92P8PGO
— 池田泰延 (@clockmaker) 2019年10月8日

問題点を整理すると

Mac Catalina にはヒラギノフォントがバンドルされていない？
Chrome77 は font-family: 'Hiragino Kaku Gothic', 'ヒラギノ角ゴ ProN' の指定が無効になっている？
Chrome77 では font-family: sans-serif の指定があっても serif で表示されてしまう？

3 に関しは Chrome か Mac OS の問題とかバグと思われるので考慮しなくても良さそう。
なので問題は 1 と 2 の場合。またはその両方のパターン。
1 の Mac Catalina にヒラギノフォントがそもそもバンドルされていないのであれば、2 の可能性は無いので CSS の font-family に Mac Catalina でも良き感じに表示できる別の日本語フォント指定を追加すればOKかなという肌感。

1. Mac Catalina にヒラギノフォントはバンドルされていない？

バンドルされているフォントは apple が公開している macOS Catalina に組み込まれているフォント - Apple サポート

組み込みフォントのリストには Hiragino Sans があり、ヒラギノ角ゴシック ProN に該当するフォントは「書類をサポートするために使えるフォント」のリストにある。ヒラギノフォントの表記が Hiragino Sans になった変更は High Sierra (OS 10.13) の時点のようなので、Mac Catalina にヒラギノフォントがバンドルされていない訳ではなく、Chrome で表示した際に font-family: 'Hiragino Kaku Gothic', 'ヒラギノ角ゴ ProN'のような指定で Hiragino Sans が表示されなくなっているという問題のように思われる。

つまり、
Mac Catalina にヒラギノフォントはバンドルされている。
名称が Hiragino Sans になっている。但しその変更は High Sierra (OS 10.13) の時点で行われている

2. Chrome77 は `font-family: 'Hiragino Kaku Gothic', 'ヒラギノ角ゴ ProN'` の指定が無効になっている？

この可能性が高いと思われる。
名称が Hiragino Sans になっているので、これを font-family の指定に追加すれば良さそう

例えば現状がこんな指定なら

body {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}

👇 Hiragino Sans を追加する

body {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "ヒラギノ角ゴシック", sans-serif;
}

こうすれば Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3 で該当フォントがなければ Hiragino Sans が使用される筈です。
合わせて system-ui や -apple-system, BlinkMacSystemFont を使用しておけばより安全だと思います。

system-ui

Chromeで system-ui を指定した場合、MacとiOSではSan Franciscoになる（ヒラギノ角ゴシックは含まれていない）。Windows 10ではYu Gothic UIで、Windows 8.1以前ではSegoe UIとMeiryoの混植。AndroidではRobotoとNotoの混植。
system-uiはsans-serifなどと同じ総称フォントファミリーだ。CSS Fonts Module Level 4で追加された。プラットフォームのUIと同じフォントを利用できる。現状ではChromeのみで実装されており、その他のブラウザのためにはフォールバックを書く必要がある。
cf. 日本語向けフォントスタックの現状 - yuhei blog

-apple-system

iOS9からのシステムフォント San Francisco が使用される
cf. 2020年まで使えるfont-familyおすすめゴシック体 - Qiita

BlinkMacSystemFont

-apple-systemと同じSan Franciscoが適用されます。
-apple-systemと何が違うかというと、こちらはBlink（フォント名がそのままです）、WebKitから派生したレンダリングエンジン用フォントです。このレンダリングエンジンを使用しているのはChromeとOpera。この両ブラウザは、先に記述した-apple-systemではなく、こちらが適用されることになります。
純粋なWebKitであるSafariは-apple-systemが適用されます。
cf. 2020年まで使えるfont-familyおすすめゴシック体 - Qiita

Mac Catalina でも使える font-family 案

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 
    "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", sans-serif;
}

font-weight 問題

Hiragino Sans は W0 〜 W9 のウェイトが用意されているので、font-weight が Hiragino Kaku Gothic とは異なる可能性があります。
簡単なテーブルを作成して表示させてみました。※ クリーンな Catalina 環境ではないので実際のものと異なっている可能性はあります

sample

See the Pen Hiragino Sans vs. Hiragino Kaku Gothic by KIKIKI (@chaika-design) on CodePen.

Hiragino Kaku Gothic の font-weight: bold は Hiragino Sans の font-weight: 600 に相当するように見えます。
Hiragino Kaku Gothic は font-weight: 600 以上はどれも同じウェイトなので Hiragino Sans でも Hiragino Kaku Gothic でも同じウェイトにしたいということであれば数値指定の font-weight: 600 にしたほうが良さそうです。 font-weight: bold や font-weight: bolder はもしかしたら W9 の極太フォントで表示されるのか？という懸念があったのですが、Chrome 環境でぱっと見る感じ font-weight: bold 指定と変わらなそうなので一安心しました。

まとめ

CSSでヒラギノフォントを指定する場合 font-family には Hiragino Sans の指定が入ってないなら追加しておこう。
なんなら system-ui, -apple-system, BlinkMacSystemFont の指定も入れておけばより安全になりそう。

font-weight は bold 指定だと Hiragino Sans は Hiragino Kaku Gothic より少し太くなる。
数値で 600 を指定すれば同等の太さになる。ただし、英数に別のフォントが当たるようにしている場合少し細くなる可能性がある。
何れにせよ、どのウェイトを表示させるのかってのはフォント自体の設計に拠る部分が大きいと思うので英数は別のフォントが表示される指定になっているCSSの場合は目視チェックでバランスを確認しておくのが良さそうだなと思いました。

CSS のフォント指定ムズィ！

[参照]