Perfect Yu Gothic

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

Table of Contents

検証ページ

Testing 01 (初版 ・最終 )

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

Testing 02 (初版 ・最終 )

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

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

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

現時点の最善の対策法 ( 時点)

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

…文章だけで説明しても分かりにくいと思うので、以下にいくつかのバリエーションを提供する。以下のいずれのコードでも、本稿執筆時点では游ゴシック 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; }

副作用がある他の対策

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)」が適用されると、通常の文字が太字で表示されてしまう、という悪影響がある。

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

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

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 ウェイトのフォントファイルを読み込ませるようにする。

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

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

過去情報

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

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

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

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

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

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