HTML・CSSわたしは納豆が好きなのですが、HTMLやCSSなどをちょいちょ書くのが好きです。いっても本業はそれとは畑違いの仕事。プログラマーやエンジニアとは無縁です。素人に毛が生えた程度、下手の横好き、趣味の延長です。プロの方々には到底かないません。HTMLやCSSを書くのは楽しいので、このブログも自分でちょいちょいカスタマイズしています。ペースはゆっくりですが。今回は「游ゴシック体」のことです。以前からWindowsとMacの両方で使える游ゴシック体を使いたかったのですが、Windows版が細すぎて個人的には非常に見づらく躊躇していたのです。いろんなサイトに載っているMac版の游ゴシック体の画像は太さも程よく見やすいものです。そこで、どうにかしてその太さにできないかと、いろいろ奮闘した話なのです。知ってる人にはあたりまえの話ですが、何かの参考になるかなと思い記事にしてみます。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;)してMedium(中)の太さにすることができるのですが、他のフォント、例えばLinuxなどで游ゴシックがインストールされていない環境で、フォントにMediumウェイトを持つフォントがsans-serifに設定していれば、フォントの表示が太くなることは明白です。できればそれは避けたいところです。幸いにも、ある程度のブラウザはウェイトを直接指定して設定することができるので、それを利用します。その例が、こちらです。sans-serif;}詳しいことを順に説明していきます。Medium」と指定して表示させます。Chrome、IE11、Edge、Operaです。IE11では表示されません。本来は日本語名だけでもいいと思うのですが、念の為にアルファベット名も表記しています。"游ゴシック体"と"YuGothic"「游ゴシック体」と「YuGothic」はMacでの游ゴシックの名称です。このように、実はWindowsとMacでは、游ゴシック体の名称自体が厳密には違うのです。"游ゴシック体"と"YuGothic"で指定する必要があります。私はMacを持っていないので確認ができませんが、検索して調べた情報では、Macは英語表記だけでもいいそうなんですが、多くの記事で日本語も併記しています。これは、古いSafariやFirefoxでは表記における対応がまちまちだったためで、現在では多くのフォントがアルファベット表記だけで表示されます。先ほどのWindowsでのブラウザの対応を見ても分かりますように、思わぬブラウザがアルファベット表記を対応していない場合も考えらられます。念のためにこちらも日本語名とアルファベット名を併記しています。WindowsのFirefoxは?」と思われた方もおられるでしょう。実は、WindowsのFirefoxでは、ウェイトを直接指定したフォントを認識しない仕様になっているのです。Medium」どちらを指定しても全く表示しません。「游ゴシック」と従来どおりに指定すると標準(Regular)ウェイト表示しますしfont-weight:500を指定するとMediumウェイトになります。それでの表示は今回の趣旨じゃない。font-weightの指定なしでの表示にこだわります。調べた結果、この方法ならいけるんじゃないか?という方法を発見したので。試したら上手くいきました。それを踏まえた設定方法が、こちらです。sans-serif;}@font-faceはWebフォントを指定するときなどで使うもので、font-familyに任意の名前を指定し、srcにWebフォントがあるURLを指定して、利用できるようにします。Name");というふうにユーザーのコンピュータ内にあるフォントを指定することもできます。この機能を使って游ゴシックMediumを直接指定したオリジナルフォントを作ってしまおうとうことなのです。指定するフォント名は現段階ではブラウザによってまちまちです。Gothic」でも標準(Regular)を指定できたりします。Medium」と英語名+ウェイトで指定しなければなりません。Regular」で設定すると、ChromeとOperaとIE11では表示されません)。font-familyには好きな名称を設定して下さい。設定した名前はfont-familyで通常に指定するように指定できます。名称はシングルクォーテーションやダブルクォーテーションで囲まなくても認識してくれる場合が多いのですが、囲んだほうが無難です。半角スペースなどが含まれる場合は特にです。MDN」に詳しく書かれていますので書かれていますので、こちらをご参照ください。ちなみにこの設定方法での表示は、私のWindows10において全てのブラウザ(Chrome・IE11・Edge・Firefox・Opera)で表示することを確認しています。最後にとりあえず、わたしの環境(Windows10)では、この方法で游ゴシックのMediumウエイトを表示できています。@font-faceを使った方法がいいのかどうかがイマイチ分かりません。それにウェイトが同じであっても、フォントの表示が完全に同じになるかと言えば、そうでもないようです。WindowとMacではフォントのレンダリングが違うようですし、Retinaディスプレイのような高画素密度ディスプレイなどでも表示は変わってきます。高DPIのディスプレイならば游ゴシックの視読性は悪くないそうです。M59のブログ)実際、游ゴシック体を作った字游工房さんには書体見本の画像がありますので、ご自身の環境での游ゴシックと見比べてみたら、その違いが確認できるかもしれません。游ゴシック体ファミリーそれでもMediumウェイトで合わすことで、かなりフォントの表示を両OSで近づけることができるはず(ですよね?)。このブログではこのページのPCの和文フォントを、このように指定しています。Pゴシックなどの場合があるので、游ゴシックがインストールされていないWindows環境向けにメイリオを入れておきたいところです。それ以外は、フォントをできるだけ統一したいので、今回紹介した方法を採用してみました。これでMac・Windows両OSのメジャーブラウザで、同じウェイトの游ゴシックフォントが表示できるはずです。追記(2017年5月17日)最新のChromeで、この方法では表示できないことが確認できました。Medium)を認識しないようです。バグかな?あれコレとテストしてみて、この設定なら表示させることができました。見つけるように指定しています。挟むのですが、たぶん要らないでしょう。これで多分いけると思うのですが、今後の仕様変更やバグなどで表示できなくなる可能性は否定できません。ビジネスなど失敗できないものでは、無理して冒険せずに、今までのように普通に設定したほうが良いかもしれません。63.0.3239.132)で表示しないことを確認しました。IEにおいても表示しないという現象が...。んー、IEは以前は表示していたと思うんですけど...。ここまで表示する・しないが頻繁に変化するとなると、@font-faceを使った方法はあまり実用的では無いかもしれません。今回も表示できるようにあれこれテストしたのですが、どうしてもIEだけ、この方法での表示ができません。font-familyにウェイト直接指定して表示できるようになっていました。ウェイトでの統一が可能です。日本語名は認識しないようなので「游ゴシック体」の表記は不要かもしれません。アルファベット名でないと表示しないので、どちらも必要です。*3@font-faceが必要でなくなったため、非常にコードがすっきりして良い感じです。いつまたこの方法での表示ができなくなるか分かりません。ウェイトでの表示が出来るかもしれません。游明朝フォントパック』をインストールすれば使うことができます。游ゴシックの表示で文字の下に謎の余白ができたりして表示が他とは違ったりします。Medium」を認識させないようにして回避する、という使い方もできそうです。」(スラッシュ)を付けるべきか、付けないべきかはてなブログではカスタムURLで一部のURLが自由に設定できるの...2017-08-06リストのマーカーをCSSでカスタマイズする方法まとめHTMLでリストを作ると、自動でマーカーが付きます。非常に便利...2017-07-16jQueryを使わず、CSSとJavaScriptで実装するトップに戻るボタン「トップに戻るボタン」というものがあります。はてなブログPro冬眠しないタヌキ。プロフィールはこちら。わたしと納豆ごはんスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。