納豆、Web、雑記など

Windowsの游ゴシックをfont-weightを使わずにMacに合わせる方法

、追記)

わたしは納豆が好きなのですが、HTMLやCSSなどをちょいちょ書くのが好きです。

といっても本業はそれとは畑違いの仕事。プログラマーやエンジニアとは無縁です。ですので、とうぜん素人に毛が生えた程度、下手の横好き、趣味の延長です。プロの方々には到底かないません。

でも、HTMLやCSSを書くのは楽しいので、このブログも自分でちょいちょいカスタマイズしています。ペースはゆっくりですが。

で、今回は「游ゴシック体」のことです。

以前からWindowsとMacの両方で使える游ゴシック体を使いたかったのですが、Windows版が細すぎて個人的には非常に見づらく躊躇していたのです。

ですが、いろんなサイトに載っているMac版の游ゴシック体の画像は太さも程よく見やすいものです。そこで、どうにかしてその太さにできないかと、いろいろ奮闘した話なのです。

知ってる人にはあたりまえの話ですが、何かの参考になるかなと思い記事にしてみます。

スポンサーリンク
 

何が問題なのか

游ゴシック体は、Windowsなら8.1、MacならOS X Mavericks(10.9)から標準搭載されたフォントで、今まで同じ日本語フォントが無かった2つ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);
}

id-name {
  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 を挟むのですが、たぶん要らないでしょう。

これで多分いけると思うのですが、今後の仕様変更やバグなどで表示できなくなる可能性は否定できません。

ビジネスなど失敗できないものでは、無理して冒険せずに、今までのように普通に設定したほうが良いかもしれません。

スポンサーリンク
 

*1:Windows7やWindows8.1では「游ゴシック Medium」や、游ゴシック自体が入っていないものがありますが、Windows7や8で、Office 2010/2013 を持っていれば、公開されている『游ゴシック 游明朝フォントパック』をインストールすれば使うことができます。

*2:ちなみに字游工房さんのサイトでの游ゴシック体のフォントウェイトは 500 です。