読者です 読者をやめる 読者になる 読者になる

納豆、Web、雑記など書いています

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

Web制作 HTML・CSS

私は納豆が好きなのですが、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は英語表記だけでもいいそうなんですが、多くの記事で日本語も併記しておいたほうがいいようなので、こちらでも両方記述しています。

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ではフォントのレンダリングに違いがあるからです。

詳しいことはこちらの「游ゴシックは何故Windowsでかすれて見えるのか - Ryusei’s Notes (a.k.a. M59のブログ)に詳しく書かれています。本家の字游工房さんの見本でも違いが確認できます*2

それでもMediumウェイトで合わすことで、かなりフォントの表示を両OSで近づけることができるはず(ですよね?)。とりあえずこのブログではフォント指定を、このようにしています。

@font-face {
  font-family: YuGothicM;
  src: local(Yu Gothic Medium);
}

body {
  font-family: YuGothic,YuGothicM,"メイリオ",sans-serif;
}

フォント設定は、ほんとうはsans-serifだけのが理想なのですけど、ブラウザのデフォルトフォントがMS Pゴシックなどの場合があるので、それ用にメイリオを入れておきたいところです。

それ以外は、フォントをできるだけ統一したいので、今回紹介した方法を採用してみました。

当分はこの方法を使い、様子を見ながらちょいちょい調整していきたいと思います。

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

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

TOP