PoC : Perfect Yu Gothic

Table of Contents

• 検証ページ
• 游ゴシックフォントに関する問題まとめ
• 現時点の最善の対策法 (2020-01-17 時点)
• 副作用がある他の対策
• クライアントサイドでできる対策
• 過去情報
• 「游ゴシック Medium」を諦める案
• Links

検証ページ

Testing 01 (初版 2020-01-17・最終 2020-01-17)

Full Name や PostScript 名を、@font-face で指定してみたり、font-family で直接指定してみたりした。@font-face 指定が上手く効くようになっていた。

Testing 02 (初版 2020-01-17・最終 2020-01-17)

@font-face 指定の詳細チェック。「簡素版」でも「詳細版」でも同じ結果が得られることが確認できた。

Testing 03 (初版 2018-11-16・最終 2018-11-16)

Testing 01 と似たチェック。

Testing 04 (初版 2019-01-03・最終 2019-01-03)

様々な指定方法での見え方の違いを並べた。

Testing 05 (初版 2019-01-27・最終 2019-01-27)

text-shadow や -webkit-text-stroke-width を使って文字を太めにする対処法のサンプル。

Testing 06 (初版 2019-01-27・最終 2019-01-27)

Windows OS・Chrome ブラウザ・游ゴシックフォントを指定しているページでのみ -webkit-text-stroke-width を使って文字を太めにする JS を組んでみたサンプル。

游ゴシックフォントに関する問題まとめ

• iOS・Android : 游ゴシックフォントが標準搭載されていないので対象外。
• MacOS : 「游ゴシック体 Medium」「游ゴシック体 Bold」のみが標準搭載されており、font-family: YuGothic (「游ゴシック体」) を指定するだけで游ゴシックが綺麗に表示される。対策不要。
  • MacOS 向けの font-family の指定値は YuGothic, "游ゴシック体" で、Windows 向けの指定値 "Yu Gothic", "游ゴシック" とは異なる点に留意。
  • MacOS には、Windows でフォントがかすれる原因となる「Regular」ウェイトが搭載されていないので問題が起こらない。
• Windows : 単純に font-family: "Yu Gothic" (「游ゴシック」) と指定すると、「游ゴシック Regular」という細いウェイトが適用されてしまい、游ゴシックが薄く・かすれて表示されてしまう。
  • 特に、Chromium ベースのブラウザ (Chrome や Chromium Edge) で「游ゴシック Regular」が適用されると、Firefox などよりも薄く表示されてしまいがち。
  • フォントのウェイトの違いの他に、MacOS と Windows とでガンマ補正の仕組みが異なるため、同じ Medium ウェイトを指定したとしても、MacOS より Windows の方が薄く表示されがちではある。

なんとかして Windows で「游ゴシック Regular」ではなく「游ゴシック Medium」を適用し、その他の OS やフォントで表示された時には悪影響を与えないよう対応したい、というのが主目的。

現時点の最善の対策法 (2020-01-17 時点)

@font-face の local() で Windows 向けの Full Name や PostScript 名を定義してやると、游ゴシック Medium が適用できる。適用の仕方にはいくつかのバリエーションがある。

• @font-face で定義するフォント名 :
  1. 通常と同じ "Yu Gothic" を使用する → font-family: "Yu Gothic" と実装した箇所を上書きする形で Medium ウェイトを適用できる。Polyfill 的な挙動になるので、クライアントサイドでの対策ではこのやり方を取ると良いが、もし今後 @font-face 指定が無効になった場合に、Regular ウェイトが適用されてしまう恐れが出てくる。
  2. オリジナルの font-family を定義する → 今後もし @font-face 指定が効かなくなった際に、Regular ウェイトがフォールバックで利用されないよう、CSS を調整しやすくなる。
• local() に指定する名称 :
  1. Windows 向け Full Name のみ記載する → 本稿執筆時点ではコレでも問題なし
  2. Windows 向け PostScript 名のみ記載する → 本稿執筆時点ではコレでも問題なし・実装のバイト数としては「Full Name のみ記載」よりもわずかに小さく実装できるので、極力ファイルサイズをケチりたい場合用？
  3. Windows 向け Full Name と Windows 向け PostScript 名を併記する → 本稿執筆時点で有効な指定を2つ備えるので一番確実
  4. (MacOS 向け Full Name や PostScript 名も併記する) → MacOS は font-family: YuGothic 指定のみで問題なく、Windows では認識しない指定になるので、実装するだけ無駄
• font-weight の指定方法 :
  1. 簡素版 : font-weight なし = Medium、font-weight: bold = Bold と、2つの @font-face で実装する → 実装量が少なく、「詳細版」と変わらない結果を得られる
  2. 詳細版 : font-weight 100 ～ 900 まで9段階の @font-face を実装する → 実装量が多いが、Bold に切り替わるウェイトを自分で調整できる他、精緻な設定で堅牢か

…文章だけで説明しても分かりにくいと思うので、以下にいくつかのバリエーションを提供する。以下のいずれのコードでも、本稿執筆時点では游ゴシック Medium が適用できるので、お好みに応じてどのやり方を選んでもらっても良い。

1. 通常の "Yu Gothic" を上書きする @font-face を定義する。ウェイト別の定義は2つのみの簡素な書き方 → もし今後 @font-face の内容が無視されるようになった場合、Regular ウェイトで表示されてしまう恐れがある

   @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); }
   @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"), local("YuGothic-Bold"); font-weight: bold; }
   body { font-family: YuGothic, "Yu Gothic", sans-serif; }

2. オリジナルの font-family を定義する。ウェイト別の定義は2つのみの簡素版 → @font-face の内容が無視された場合は、その後ろの Meiryo (メイリオ) がフォールバックで適用されるように実装している

   @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); }
   @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: bold; }
   body { font-family: YuGothic, "Original Yu Gothic", Meiryo, sans-serif; }

3. オリジナルの font-family を定義する。ウェイト別の定義は9段階に分けた詳細版 → 現状「2.」と同じ結果を得られるが、一番堅牢な実装といえる

   @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 100; }
   @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 200; }
   @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 300; }
   @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 400; }
   @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 500; }
   @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: 600; }
   @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: 700; }
   @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: 800; }
   @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: 900; }
   body { font-family: YuGothic, "Original Yu Gothic", sans-serif; }

副作用がある他の対策

クライアントサイドでできる対策

Web ページの閲覧者の PC でできる対策。

@font-face { font-family: "Yu Gothic"        ; src: local("Yu Gothic Medium"), local("YuGothic-Medium");                    }
@font-face { font-family: "Yu Gothic"        ; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: bold; }
@font-face { font-family: "Yu Gothic Medium" ; src: local("Yu Gothic Medium"), local("YuGothic-Medium");                    }
@font-face { font-family: "Yu Gothic Medium" ; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: bold; }
@font-face { font-family: "游ゴシック"       ; src: local("Yu Gothic Medium"), local("YuGothic-Medium");                    }
@font-face { font-family: "游ゴシック"       ; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: bold; }
@font-face { font-family: "游ゴシック Medium"; src: local("Yu Gothic Medium"), local("YuGothic-Medium");                    }
@font-face { font-family: "游ゴシック Medium"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: bold; }

過去情報

本稿執筆時点の最新ブラウザでは確認できなくなった、過去の症状など。

1. 英語のフォント名ではダメで、日本語のフォント名でないと認識しないブラウザがあったりした → 本稿執筆時点では英語のフォント名のみ記載すれば OK。ただし、フォントの Full Name を認識するか、PostScript 名を認識するかはブラウザによって異なる。
2. 以前の Chrome では @font-face 指定が効かなくなっていた → 本稿執筆時点の最新版である Chrome v79 では動作するように戻っていた。

• 参考 : Neo's World - 2018年以降はコレで決まり！Web サイトで指定するゴシック体・明朝体・等幅の font-family 設定 … 2017-11-12 時点の検証結果もろもろ。
• 参考 : Neo's World - ウェブサイトに適用する游ゴシックフォントを見直しまくった最終解 … 2019-01-15 時点の検証結果もろもろ。

「游ゴシック Medium」を諦める案

1. font-family: "Yu Gothic" を指定し、Regular ウェイトが使用されることを許容する。
2. 游ゴシックの指定をなくし、Meiryo や他の Web フォントなどを使用する。

Links

• Neo's World
• GitHub - Neos21
• GitHub - PoC : Perfect Yu Gothic