PoC : Perfect Yu Gothic - Testing 01

Full Name や PostScript 名を、@font-face で指定してみたり、font-family で直接指定してみたりした。指定したフォントが適用されていれば青色、されていなければ赤色に色付けしている (Windows Chromium Edge のみ、この判定スクリプトが誤作動しているので、目視判定した結果を後付けしている)。

@font-face 指定が上手くいきそうなので、まとめて指定し、ウェイトごとに定義してみた。

Default 游ゴシック YuGothic

Original Yu Gothic 游ゴシック YuGothic

Original Yu Gothic + Yu Gothic Medium 游ゴシック YuGothic

Original Yu Gothic + Yu Gothic 游ゴシック YuGothic

「Yu Gothic Medium」とスペースを開ける → Windows 版の Full Name
「YuGothic-Medium」と、「『YuGothic』+『-』+『ウェイト』」表記 → Windows 版の PostScript 名
「YuGothic Medium」と、「『YuGothic』+『スペース』+『ウェイト』」表記 → MacOS 版の Full Name
「YuGo-Medium」と、「『YuGo』+『-』+『ウェイト』」表記 → MacOS 版の PostScript

2020-01-17 時点 (Chrome v79・Chromium Edge v79・Firefox v72・IE v11・Safari v13) では次のように適用されていた。

一応 MacOS も確認したが、Mac には Regular フォントがないので、font-family: YuGothic を入れておけば十分
Chrome・Edge・Firefox で font-family: "Yu Gothic Medium" 指定が有効になっていた (以前の Chrome では効かなくなっていた)
@font-face で Windows 向けのウェイト付きで Full Name ないしは PostScript 名を指定すれば、Windows の主要ブラウザはどれも正しく Medium と Bold を認識することが分かった

以上のことから、綺麗な Yu Gothic Medium を指定するための最小構成が導けた。

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

Windows Full Name のみ記載したが、Windows PostScript 名を併記しても良いだろう。

@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-face におけるウェイト別の指定は、詳細にやってもやらなくても特に変わりなかった。ウェイト別に細かくやりたい場合は以下のように書けば良い。

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

ココまでの例では "Yu Gothic" の定義を上書きしているが、フォントの適用順を変更したかったり、何らかの理由で Regular ウェイトが適用されてしまうくらいなら「メイリオ」に切り替えたい、といった理由であれば、オリジナルのフォント名を付けて運用する方が良いだろう。

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

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

上のいずれかのように書けば、@font-face によるフォント指定が効かなかった場合はメイリオが適用されるようになる。

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