font-familyに游明朝を使用してはいけない理由

「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ファイル上に存在しなければ問題ないでしょう。