macOS Catalinaでfont-family問題からCSS記述を再考する

WHAT IS SUMMARY?
  • macOS Catalinaはシステムフォントに変更あり。
  • 3つの要因が重なるとフォント表記ブレが発生。
  • font-familyプロパティを考えるときが来た。

OSとWebブラウザーには要注意。

macOS CatalinaとGoogle Chrome 77での“フォント明朝体化”問題。当ブログでも明朝体になってしまったので、問題を考えながら、font-familyプロパティの再考をしました。

macOS Catalinaフォント問題

OSアップデート後、フォントが明朝体に変化。
OSアップデート後、フォントが明朝体に変化。

macOS Catalinaアップデート後、Google Chrome(Google Chrome 77)での当ブログのフォント表記が変化。勝手に ゴシック体 → 明朝体 になっていたのです。記事を書こうとしたら…びっくり。

調べると、すでに株式会社ICS池田さんのTwitterで結論が出ていました。こちらを見れば解決するので、詳細はそちらにて。そして、この場を借りてお礼申し上げます。

原因

このフォント表記揺れ(ブレ)問題の原因には、3段階のフロー(≒罠)がある。その3つのフローを全部踏んでしまうと、今回のようなWebサイトのフォントが明朝体になってしまうというわけです。

そのフローを以下、簡単にまとめてみました。

  • FLOW.1
    OSシステムフォント変更

    OSシステムフォント変更

    macOS Catalinaでは『Hiragino Kaku Gothic StdN W8 13.0d2e7』がシステムに組み込まれているフォントから消えている。

    Font Book画面。

    実際、『Font Book』を見てみると、『ヒラギノ角ゴシック ProN』がゴッソリと消えていました。つまり、OSのシステムフォントに、macOS Catalinaでは刷新があったというわけです。

    macOS Catalinaへのアプデ、これが1つめのフロー。

  • FLOW.2
    Google Chrome 77のバグ

    Google Chrome 77のバグ

    そして、この影響を受けるのは『Google Chrome』でWebサイトを視聴したときのみ。要するに、Google Chrome 77に起因するフォント関連のバグということ。

    Google Chromeで見る、これが2つめのフロー。

  • FLOW.3
    サイトのfont-familyプロパティ

    サイトのfont-familyプロパティ

    そして、1と2の条件が重なって、さらに自サイトのfont-familyプロパティが以下のようになっている。

    font-family: sans-serif;
    

    こうなると、今回のようにGoogle Chromeで見たときに、フォントが勝手に明朝体になるというわけです。

    font-familyプロパティの記述、これが3つめのフロー。

こんな感じで、

  1. OSシステムフォント変更
  2. Google Chrome 77のバグ
  3. サイトのfont-familyプロパティ

という条件が重なってしまい、今回なってしまったわけ。

1と2については不可抗力なので、今回は当ブログのfont-familyプロパティを再考してみたいと思う。

対処

そういうわけで、このApple Piのfont-familyプロパティを再考して、CSSを書き換えてみました。

ソースコード

body {
    font-family: system-ui, "Hiragino Sans", "YuGothic", "Arial", sans-serif;
}

当ブログでは、こんな感じでfont-familyプロパティを書き換えました。

記述意図

記述意図

値がsans-serifだけでは問題になるので、総称ファミリであるsystem-uiを採用。
そして、macOS用とWindows用に、それぞれ"Hiragino Sans""YuGothic"を記述。また、欧文用に"Arial"も書いています。

欧文用フォント『Arial』は、OSへのインストールシェアを考えても妥当な判断だと思うので、こちらはすぐに決定。
日本語用フォントを『Hiragino Sans』と『游ゴシック』にしたのは、OS準拠のフォントというところから。font-weightプロパティの問題も別途出てきそうだが、そこはsystem-uiが吸収してくれるので。まぁ、この2つの記載は予備的な判断ですので一応…と。

備考

ブラウザーのレンダリングエンジン

HTMLレンダリングエンジン
  • Safari:WebKit
  • Google Chrome:Blink
  • Firefox:Gecko

補足的事項として、主要WebブラウザーのHTMLレンダリングエンジンについて書いておくことに。

今回のフォント問題もそうだが、Webで開発するときには、上記のレンダリングエンジンについても考慮しておかないと面倒。個人的にはMicrosoft Edgeみたく、Blinkにみんな寄せてほしいところ。

総称ファミリ

font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: emoji;
font-family: math;
font-family: fangsong;

MDNにも記載があるが、『総称ファミリ』にはこのような種類がある。
何気なく使っているfont-family: sans-serif;も総称ファミリだったようだ。改めて知れてよかった。

総括「バグだが放置はWeb開発者的に良くない」

総括「バグだが放置はWeb開発者的に良くない」

今回のGoogle Chromeでフォントが明朝体になる問題。イメージとしては、OS側かGoogle Chrome 77側のバグだと思うのですが、Webをやっている身からすれば放置したくない案件。

今回の一見で、盲目的にfont-family: serif;を多用するべきではない。一度、再考すべき。そう感じた。ただ、あまりにfont-familyプロパティを複雑にするとメンテが大変。なので、あとは自分にとって(読み手によって)の“良い落とし所を探す”のみな気がするのでした。

編集後記

このApple Piでは『Snow Monkey』という、有償WordPressテーマを気に入って使っている。これが非常に気持ちの良いテーマ。

ずっとこのテーマでもよいのだが、Web開発をしている身がずっと購入したテーマというのも…。そこで、いつかWordPressテーマをフルスクラッチして、Apple Piをリニューアルしたいと思う。始まったばかりなので、そのうちの話…ですが。