PoC : Perfect Yu Gothic

Windows 游ゴシックを綺麗に表示するための試験場。

初版作成日 : 2020-01-17
最終更新日 : 2021-12-18

検証ページ
游ゴシックフォントに関する問題まとめ
現時点の最善の対策法 (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 が適用できるので、お好みに応じてどのやり方を選んでもらっても良い。

通常の "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; }

オリジナルの 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; }

オリジナルの 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; }

副作用がある他の対策

1. `font-family: "Yu Gothic Medium"` を指定する → 太字表示する際に「游ゴシック Bold」が使用されない

font-family: "Yu Gothic Medium";

と指定すると、Windows の次のブラウザ (本稿執筆時点での最新版) で、「游ゴシック Medium」が表示された。

Chrome v79
Chromium Edge v79
Firefox v72

IE v11 ではこの指定が効かないのと、この font-family と同時に font-weight: bold が指定されると、「游ゴシック Bold」ではなく太字に加工された「游ゴシック Medium」が適用されてしまい、若干汚く表示されてしまうのが問題。

IE v11 を無視し、太字化された「游ゴシック Medium」で表示されることを許容するならば利用できる対策。

もしくは、太字にする要素にのみ font-family: "Yu Gothic Bold" を別途当てることでも対応できる。

2. `font-weight: 500` を指定する → 「ヒラギノ角ゴ」適用時に悪影響

font-family: "Yu Gothic"; font-weight: 500;

と指定すると「游ゴシック Medium」が適用されるようになる。この挙動自体は本稿執筆時点の主要ブラウザでも再現する。

大抵は font-family に他のフォントもフォールバックとして記載するが、その際「ヒラギノ角ゴ (Hiragino Kaku Gothic ProN)」が適用されると、通常の文字が太字で表示されてしまう、という悪影響がある。

参考 : Neo's World - Windows で游ゴシックが細く見えないようにする CSS

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

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

1. ユーザスタイルシートで `@font-face` を加工する

Stylish などのブラウザ拡張機能を使用し、ユーザスタイルシートを追加する。

「現時点の最善の対策法」で紹介しているコードをベースに、"Yu Gothic", "游ゴシック" などのフォント定義に対して @font-face を被せ、Medium ウェイトが適用されるようにする。

@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; }

参考 : Neo's World - Firefox の Stylish でできるオススメフォント設定 … この記事を書いた時点では、@font-face 指定が Chrome で効かず、Firefox のみのテクニックだったが、Chrome v79 ではこの指定が効くようになっていた。

2. ユーザスタイルシートで `-webkit-text-stroke-width` を適用する

Stylish などのブラウザ拡張機能を使用し、ユーザスタイルシートを追加する。

-webkit-text-stroke-width プロパティを使用すると、テキストを太く見せられるようになる。游ゴシック以外のフォントにも適用されるため、相性の悪いフォントは滲んで見える場合があるが、「Medium ウェイトでも細く見える」のを解消するには唯一の策。「案 1.」と併用しても良い。

* { -webkit-text-stroke-width: .4px !important; }

対応しているのは Chrome、Chromium Edge、Firefox。

IE はこのプロパティが効かないので、代わりに以下の text-shadow プロパティを使うと良い。ただし、色付きの文字が若干滲んで表示されてしまう。

* { text-shadow: transparent 0 0 0, rgba(0, 0, 0, 0.68) 0 0 0 !important; }

3. レジストリを書き換えて游ゴシック Regular・Light を Medium 化する

Windows は「フォント名」と「読み込むフォントファイル」の組み合わせを、レジストリで管理している。コレを書き換えることで、「游ゴシック Regular」や「游ゴシック Light」フォントが選択されても、Medium ウェイトのフォントファイルを読み込ませるようにする。

参考 : Neo's World - レジストリをイジって Regular・Light ウェイトのフォントを Medium フォントに置換する … 手作業での差し替え手順を紹介。
参考 : Neo's World - Windows の游ゴシック Regular・Light を Medium フォントに差し替えて太く見せる VBScript … VBScript でフォントの差し替えを自動化した。

4. (Firefox のみ) `about: config` で設定変更する

Gecko ベースの Firefox では、about: config より各種設定を変更することで、フォントをより太く表示させられる。詳細は以下記事。

参考 : Neo's World - Windows の Firefox でフォントが汚かったので直した

過去情報

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

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

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

過去にクライアントサイドでできた対策

「MacType」というフリーソフトでフォントにアンチエイリアスをかけられた → 本稿執筆時点の主要ブラウザ (Chrome・Chromium Edge・Firefox・IE) ではページのテキストに MacType が適用されなくなっている。

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

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

PoC : Perfect Yu Gothic

Table of Contents