![]()
このblogは2年前の3月から書いていますが、当初に設定して以来font-familyを変更していませんでした。当時としてはこれがベスト！と思われる設定でした。
先日、WindowsにもMacにもインストールされている游ゴシックというフォントがあることに気づきましたのでそろそろfont-familyも変えてみようということで変更してみました。
font-familyで指定したフォントは各PCに入っているフォント
今（原稿を書いている）現在、このblogのfont-familyは
まだまだ手を入れるところがいっぱいの当blogですが、文字の大きさやフォントが気になってきました。
自分で読んでいてもかなり見にくい(^_^;。
といっても、デザイナーさんでは
で指定したままとなっています。つまり、
font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
です。font-familyで指定したフォントは、このblogをみてくれる人のPCなどが持っているフォントで表示されるためMacなら「ヒラギノ角ゴ ProN W3」で、Windowsなら「メイリオ」で表示されることになります。私がいつも使っているのはWindows10なのでメイリオでblogは表示されています。
WindowsでもMacでも同じフォントで表示したい場合は
ブラウザで表示するコンテンツのフォントはstyleシートなどで指定したfont-familyの中から「ユーザーのPCにあるどれかの」フォントで表示されることになっています。OS
で書いたようにWebフォントを使うことで実現できました。この方法ならWindowsでもMacでも同じフォントで表示できますが、設定が面倒だったりフォントが有料だったり、読み込みが遅くなったりします。
游ゴシック とは？
そこで游ゴシックの出番となります。游ゴシックはWindows8.1、MacではOS X Mavericksから標準搭載されました（その他に、游明朝もはいっています）。
それまではWindowsとMacに共通するフォントがなかったためにそれぞれ別のフォントで表示していたWebサイトも比較的新しいPCであれば同じように表示されるということになります。
游ゴシック、游明朝その他2書体をまとめて游書体という書体ということです。
游書体-Wikipedia
このWikipediaをみると、「字游工房初の独自書体」ということだそうです。字游工房さんのWebサイトを見るとそれまでもかなり実績のあるフォント制作会社さんのようですが、はじめて作った独自書体がMacOSやWindowsに取り入れられるってすごい！なんだか映画になりそうな、気がしました。
font-familyに游ゴシックを追加してみてみる
font-familyに游ゴシックを追加してみます。子テーマのstyle.cssで
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
となっているfont-familyに
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-family: "游ゴシック", YuGothic,Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
游ゴシックを追加しました。
今までは、
![]()
このように表示されていたものが、読み込み直すと
![]()
ちょっと線が細く、上品な感じ？のフォントになりました。
chromeだけ、色が薄くなってしまう問題を解決
先ほどのスクリーンショットはFirefoxでみたときのものなのですがChromeでみてみるとなんだかフォントが薄い？感じがします。
![]()
わずかですがChrome（とVivaldi）で見たときだけ薄いです（Edge,IEでは感じませんでした）。
これについて検索したところ、
Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？
という記事を見つけました。どうもやっぱりChrome（とVivaldi）だけfont-weightが違う解釈になってしまうようです。
ということで、
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-family: "游ゴシック", YuGothic,Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
font-weight:500;
}
文字の太さを指定する font-weight:500; を追加してみました。
再度読み込み直すと、
![]()
と、ChromeやVivaldiで見ても文字が薄すぎない状態になおりました。
問題発生！このblogで多用しているstrongが太文字にならない…
と、これで解決した…と思ったところ問題が発生しました。font-weightを指定する前は
![]()
このように太文字で表示されていた
Lightningの<strong>子テーマ</strong>は作成元である株式会社ベクトルさんが準備してくれています。
strong指定した文字「子テーマ」が、
![]()
なんということでしょう（；；）、太文字にならなくなってしまっています。うーん。
試しにfont-weight指定を外すと元のように太字になるので、どうもこの指定方法だとstrongで太文字にできなくなってしまうようです。。。
いろいろな情報でみなさんfont-weightで修正しているのでもしかするとtwentyfourteenの子テーマでなければ、大丈夫なのかもしれません。あるいはみなさんあまり strong を使われていなくて、この問題は気にならないのかもしれません。
しかし、太文字を多用している(^_^;このblogだと大きな問題になってしまいます。
フォントを游ゴシック Mediumに変更する
さて…と思って色々検索をしてみました。そしてこの記事を見つけました
Windowsの游ゴシックをfont-weightを使わずにMacに合わせる方法
ここに書いてあるようにWindowsをMacに合わせたいということではなかったのですが、試しにこの方法を取り入れてみました。
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-family: "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", YuGothic,Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
font-familyに “游ゴシック Medium”, “Yu Gothic Medium” を追加して、font-weightは削除しました。
これで読み直してみたところ、
![]()
文字の色も細すぎず（游ゴシック Mediumが指定してあるため）、strongが太字で（font-weightを指定してないため）表示されるようになりました。
まとめ：太字を多用しているWebサイトで游ゴシックを使うときは注意？
まだtwentyfourteenでしか試していないので、確かなことは言えないのですが游ゴシックをfont-familyで使うときは
・ChromeやVivaldiで文字のweightがなぜか低くなり 薄く見える
・かといって全体的にfont-weightを指定するとstrongが太文字にならなくなる（かも？）
ので、
・今時点で游ゴシックをfont-familyに追加するときは “游ゴシック Medium”, “Yu Gothic Medium”,”游ゴシック”, YuGothic,
を指定するのがよさそう
ということかなと思います。
＊ 2016/07/31 追記：やっぱり游ゴシックより元々の表示の方が RYUS blogっぽい気がして、元に戻しました(^_^;
RYUS blogを平日はほぼ毎日書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。
![秀丸スーパーライセンスパック [ダウンロード]](http://ecx.images-amazon.com/images/I/51YGWuIC0kL._SL160_.jpg)
