「Chromeでも読みやすい游ゴシックを指定する方法 」にご興味を示していただいた方、お待たせしました。
游明朝を基準としたfont-familyを指定するにはどうしたら良いかの記事になります。
Macでは問題ないのでWindowsについての内容になります。
先に結論
ゴシック体のようにバグを回避しつつも適用させる。
そんなこと明朝体では出来ません。
游明朝で問題になるのはfont-weight: 500;なので、コレを絶対に使用しないというコーディングルールがあれば、通常の記述で問題無いでしょう。（フレームワーク等で指定されているものは直しましょう）
よって游明朝を指定する場合は下記のようになります。
.yu-mincho{
font-family: "Yu Mincho", "YuMincho";
}
ただし、IEのバグが回避できないので、個人的にはどうしても明朝体を使用したい場合は素直にWebフォントか画像を使うのがベストだと思います。
游明朝がダメな理由
游ゴシックとは違い、Chrome、Operaの游明朝font-weight100～300は特筆するほど細くはありません。そもそも明朝体自体細いので気にならないのでしょう。ただ、たしかに他のブラウザよりも文字が細いです。
細い理由は游ゴシックと同様、Regularが適用されずLightをブラウザが無理やり太くさせているからです。
細さが気にならないならそのままfont-family: "Yu Mincho"でも良い。
ですが、游明朝の問題点はそこではありません。
游明朝はChrome、Operaで見るとfont-weight: 500;がBoldになっています。
Firefox、Internet Explorerではnormalで表示されます。
weight500をnormalにする
@font-face {
font-family: "Yu Mincho";
src: local("Yu Mincho Regular");
font-weight: 500;
}
Chrome、Operaのfont-weight: 500;がダメならゴシック体のときのように、特定の太さだけ指定して上げれば良い。
...ダメでした。
上記のコードを書いても一切の変化が無くBoldのままです。
weight500をboldにする
Chrome、Operaのfont-weight: 500;がBoldならば、Firefox、Internet ExplorerをBoldにすれば良いじゃない！
@font-face {
font-family: "Yu Mincho";
src: local("Yu Mincho Demibold");
font-weight: 500;
}
※ 游明朝のboldの書体名はYu Mincho Demiboldです。
これでなんと！全ブラウザのfont-weight600～900が極太になるではありませんか！
どうやらfont-weight: 500;を基準として、ブラウザが無理やり太くしたものが600～900に適用されてしまいます。
この指定の仕方をするとfont-weight: bold;が極太になるので游明朝が使い物にならなくなります。
下に隙間が空くIEのバグ
Internet Explorerで游ゴシックと同様に、文字の下に大きく隙間が空いてしまうバグがあります。
游ゴシックではIEだけ「メイリオ」を適用することで回避していたのですが、Windowsで游明朝に変わる明朝体は「MS P明朝」になります。
見難い「MS P明朝」を適用するぐらいならゴシック体の「メイリオ」を適用するでしょう。
そのため、明朝体の代替フォントが無いため、IEハックをしても代わりが「メイリオ」になってしまうのです。
游明朝を基準とした明朝体の指定方法
ありません。
どうしても游明朝が使いたい場合は
.yu-mincho{
font-family: "Yu Mincho", "YuMincho", serif;
}
上記のように普通に指定します。
ただし、游明朝が指定されているものにはfont-weight: 500;は使ってはいけません。
font-weightのnormalは400、boldは700なのでfont-weight: 500;という記述がcssファイル上に存在しなければ問題ないでしょう。