Windowsの游ゴシックをfont-weightを使わずにMacに合わせる方法
わたしは納豆が好きなのですが、HTMLやCSSなどをちょいちょ書くのが好きです。
といっても本業はそれとは畑違いの仕事。プログラマーやエンジニアとは無縁です。ですので、とうぜん素人に毛が生えた程度、下手の横好き、趣味の延長です。プロの方々には到底かないません。
でも、HTMLやCSSを書くのは楽しいので、このブログも自分でちょいちょいカスタマイズしています。ペースはゆっくりですが。
で、今回は「游ゴシック体」のことです。
以前からWindowsとMacの両方で使える游ゴシック体を使いたかったのですが、Windows版が細すぎて個人的には非常に見づらく躊躇していたのです。
ですが、いろんなサイトに載っているMac版の游ゴシック体の画像は太さも程よく見やすいものです。そこで、どうにかしてその太さにできないかと、いろいろ奮闘した話なのです。
知ってる人にはあたりまえの話ですが、何かの参考になるかなと思い記事にしてみます。
（、追記）
何が問題なのか
游ゴシック体は、Windowsなら8.1、MacならOS X Mavericks(10.9)から標準搭載されたフォントで、今まで同じ日本語フォントが無かった２つOSで、始めて標準搭載された同じ書体の日本語フォントです。
その書体は細くて柔らかく、日本語がもつ繊細で品のある優しさが感じられる美しいフォントです。
とても綺麗なフォントで、実際「Lifehacker」や「バズ部」など多くのサイトでも使われています。
ですが、同じといっても、游ゴシックをCSSで指定したら、WindowsとMacではフォントのウェイト（太さ）が違います。
実はWindowsとMacでは、インストールされている游ゴシック体のウェイトの種類が違うのです。
WindowsにはLight（細字）、Reguiar（標準）、Medium（中字）とBold（太字）がありますが*1、MacではMediumとBoldのウェイトしかありません。
このOSによる違いは、游ゴシック体を開発した字游工房さんのサイトで見れるOS搭載の游書体一覧PDFを見た頂いたら、その違いが分かりますが、要約したら、游ゴシック体はWindowsとMacでは搭載されているものが同じようで、実は微妙に別の物なのです。
つまりは、普通にWindowsで游ゴシックを指定しても、Windowsでは標準であるRegularのウェイトが表示されるのに対して、Macで游ゴシック体を指定しても、そもそもMacにはMediumのウェイトしかありません。なので、Macの游ゴシック体は、Windowでは中サイズになるMediumの太さが表示されるのです。
これを、どちらでも同じウェイトになるように、CSSで調整できないものでしょうか？
解決法
これを解決するには、Windowsのほうのフォントの太さ（ウェイト）をMediumに指定するしかありません。
太さを変えるにはCSSではfont-weightがあります。それで500を指定（font-weight: 500;）してMedium（中）の太さにすることができるのですが、他のフォント、例えばLinuxなどで游ゴシックがインストールされていない環境で、フォントにMediumウェイトを持つフォントがsans-serifに設定していれば、フォントの表示が太くなることは明白です。できればそれは避けたいところです。
幸いにも、ある程度のブラウザはウェイトを直接指定して設定することができるので、それを利用します。その例が、こちらです。
p {
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
}詳しいことを順に説明していきます。
Windows は "游ゴシック Medium"と"Yu Gothic Medium"
Windowsでの游ゴシックの名称は「游ゴシック」と「Yu Gothic」です。ですが、Windowsでは前述のようにウェイトを含む「游ゴシック Medium」と指定して表示させます。こう指定して表示できるブラウザは Chrome、IE11、Edge、Operaです。
ちなみにアルファベット名の「Yu Gothic Medium」のほうは、Chrome、IE11、Edge、Operaで表示され、Chrome IE11では表示されません。
ですので本来は日本語名だけでもいいと思うのですが、念の為にアルファベット名も表記しています。
Macは "游ゴシック体"と"YuGothic"
「游ゴシック体」と「YuGothic」はMacでの游ゴシックの名称です。このように、実はWindowsとMacでは、游ゴシック体の名称自体が厳密には違うのです。
ですので、Macの游ゴシック体を指定するには "游ゴシック体"と"YuGothic"で指定する必要があります。私はMacを持っていないので確認ができませんが、検索して調べた情報では、Macは英語表記だけでもいいそうなんですが、多くの記事で日本語も併記しています。
これは、古いSafariやFirefoxでは表記における対応がまちまちだったためで、現在では多くのフォントがアルファベット表記だけで表示されます。
ですが、先ほどのWindowsでのブラウザの対応を見ても分かりますように、思わぬブラウザがアルファベット表記を対応していない場合も考えらられます。なので、念のためにこちらも日本語名とアルファベット名を併記しています。
Firefoxの問題
ここまで読んで「あれ？ WindowsのFirefoxは？」と思われた方もおられるでしょう。
実は、WindowsのFirefoxでは、ウェイトを直接指定したフォントを認識しない仕様になっているのです。
つまり「游ゴシック Medium」「Yu Gothic Medium」どちらを指定しても全く表示しません。
もちろん「游ゴシック」と従来どおりに指定すると標準（Regular）ウェイト表示しますしfont-weight:500を指定するとMediumウェイトになります。ですが、それでの表示は今回の趣旨じゃない。あえてfont-weightの指定なしでの表示にこだわります。
いろいろ調べた結果、この方法ならいけるんじゃないか？という方法を発見したので。さっそくテスト。試したら上手くいきました。
それを踏まえた設定方法が、こちらです。
@font-face {
font-family: "YuGothic M";
src: local("Yu Gothic Medium");
}
p {
font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif;
}@font-faceはWebフォントを指定するときなどで使うもので、font-familyに任意の名前を指定し、srcにWebフォントがあるURLを指定して、利用できるようにします。
そのsrcは、指定する先をsrc: local("Font Name");というふうにユーザーのコンピュータ内にあるフォントを指定することもできます。
つまり、この機能を使って游ゴシックMediumを直接指定したオリジナルフォントを作ってしまおうとうことなのです。
指定するフォント名は現段階ではブラウザによってまちまちです。ChromeとOperaは「游ゴシック」「Yu Gothic」でも標準（Regular）を指定できたりします。ですが、Firefoxでは「Yu Gothic Medium」と英語名+ウェイトで指定しなければなりません。これは標準（Regular）でも同じで標準（Regular）サイズをFirefoxで指定したい場合は「Yu Gothic」ではなく「Yu Gothic Regular」と指定しなければ表示されません(ちなみに「Yu Gothic Regular」で設定すると、ChromeとOperaとIE11では表示されません)。
font-familyには好きな名称を設定して下さい。日本語でもいけます。設定した名前はfont-familyで通常に指定するように指定できます。名称はシングルクォーテーションやダブルクォーテーションで囲まなくても認識してくれる場合が多いのですが、囲んだほうが無難です。半角スペースなどが含まれる場合は特にです。
詳しいことはこちらの「@font-face - CSS: カスケーディングスタイルシート | MDN」に詳しく書かれていますので書かれていますので、こちらをご参照ください。
ちなみにこの設定方法での表示は、私のWindows10において全てのブラウザ（Chrome・IE11・Edge・Firefox・Opera）で表示することを確認しています。
最後に
とりあえず、わたしの環境（Windows10）では、この方法で游ゴシックのMediumウエイトを表示できています。しかし、@font-faceを使った方法がいいのかどうかがイマイチ分かりません。
それにウェイトが同じであっても、フォントの表示が完全に同じになるかと言えば、そうでもないようです。
WindowとMacではフォントのレンダリングが違うようですし、Retinaディスプレイのような高画素密度ディスプレイなどでも表示は変わってきます。高DPIのディスプレイならば游ゴシックの視読性は悪くないそうです。
参考リンク：
実際、游ゴシック体を作った字游工房さんには書体見本の画像がありますので、ご自身の環境での游ゴシックと見比べてみたら、その違いが確認できるかもしれません。*2。
参照リンク：字游工房｜JIYUKOBO | 游ゴシック体ファミリー
それでもMediumウェイトで合わすことで、かなりフォントの表示を両OSで近づけることができるはず（ですよね？）。とりあえずこのブログではこのページのPCの和文フォントを、このように指定しています。
@font-face {
font-family: YuGothicM;
src: local(Yu Gothic Medium);
}
p {
font-family: YuGothic,YuGothicM,"メイリオ",sans-serif;
}フォント設定は、ほんとうはsans-serifだけのが理想なのですけど、ブラウザのデフォルトフォントがMS Pゴシックなどの場合があるので、游ゴシックがインストールされていないWindows環境向けにメイリオを入れておきたいところです。
それ以外は、フォントをできるだけ統一したいので、今回紹介した方法を採用してみました。
これでMac・Windows両OSのメジャーブラウザで、同じウェイトの游ゴシックフォントが表示できるはずです。
追記（2017年5月17日）
最新のChromeで、この方法では表示できないことが確認できました。
どうやら、わたしのChromeの現バージョン ( 58.0.3029.110 (64-bit) ) で英語フォント名（Yu Gothic Medium）を認識しないようです。バグかな？
あれコレとテストしてみて、この設定なら表示させることができました。
@font-face {
font-family: YuGothicM;
src: local(Yu Gothic Medium),
local(Yu Gothic);
font-weight: 500;
}最初の Yu Gothic Medium が見つからなければ、次の Yu Gothic を見つけるように指定しています。完璧を求めるならこの間に Yu Gothic Regular を挟むのですが、たぶん要らないでしょう。
これで多分いけると思うのですが、今後の仕様変更やバグなどで表示できなくなる可能性は否定できません。
ビジネスなど失敗できないものでは、無理して冒険せずに、今までのように普通に設定したほうが良いかもしれません。
さらに追記（2018年2月23日）
またまた最新のChrome（バージョン: 63.0.3239.132）で表示しないことを確認しました。
しかもIEにおいても表示しないという現象が…。んー、IEは以前は表示していたと思うんですけど…。
ここまで表示する・しないが頻繁に変化するとなると、@font-faceを使った方法はあまり実用的では無いかもしれません。
とりあえず今回も表示できるようにあれこれテストしたのですが、どうしてもIEだけ、この方法での表示ができません。
困ったのですが、改めてブラウザでいろいろチェックしてみると、なんと、アルファベット名限定ですが Firefox でもfont-familyにウェイト直接指定して表示できるようになっていました。
なので、記事の最初で紹介した方法で Medium ウェイトでの統一が可能です。
p {
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
}Mac は日本語名は認識しないようなので「游ゴシック体」の表記は不要かもしれません。「游ゴシック Medium」の方は、IE は日本語名、Firefox はアルファベット名でないと表示しないので、どちらも必要です。*3
@font-faceが必要でなくなったため、非常にコードがすっきりして良い感じです。ただし、いつまたこの方法での表示ができなくなるか分かりません。その際は、また@font-faceを使ったりすれば、Medium ウェイトでの表示が出来るかもしれません。
スポンサーリンク
*1:Windows7やWindows8.1では「游ゴシック Medium」や、游ゴシック自体が入っていないものがありますが、Windows7や8で、Office 2010/2013 を持っていれば、公開されている『游ゴシック 游明朝フォントパック』をインストールすれば使うことができます。
*2:ちなみに字游工房さんのサイトでの游ゴシック体のフォントウェイトは 500 です。
*3:ただ IE では、游ゴシックの表示で文字の下に謎の余白ができたりして表示が他とは違ったりします。逆に考えればこの方法で IE だけ「游ゴシック Medium」を認識させないようにして回避する、という使い方もできそうです。
