Windows で 「游ゴシック」 フォントを使用すると細字で表示されちゃって困るという話、なんか Twitter で下記の記事が回ってきたので、あぁそういえばそんな問題がありましたよねと思い出したのですが、ちょっと気が向いたのでこれを CSS の仕様を基に考えてみたいと思います。
要するに上記の記事の方が言うように制作者サイドの問題なのか、それとも Windows のレンダリングが悪いのかという話ですが、結論から言えば Windows が悪いってことでいいんじゃないかと思います。あと気になって自分の環境で調べてみたら、少なくとも Windows 10 ではこの問題は起こらないみたいですね。
早速ですが、CSS 仕様書で関係しそうな部分を見てみましょう。まずは font-weight プロパティについての箇所。
数値による font-weight の指定は下記の 9 種類が使用できます。また、それぞれの数値に対応するウェイト名としては下記のような形になります。
- 100 - Thin
- 200 - Extra Light (Ultra Light)
- 300 - Light
- 400 - Normal
- 500 - Medium
- 600 - Semi Bold (Demi Bold)
- 700 - Bold
- 800 - Extra Bold (Ultra Bold)
- 900 - Black (Heavy)
CSS で使用できるウェイト名だけを抜き出せば、下記のように対応していることになります。
font-weight: normal→font-weight: 400に相当font-weight: bold→font-weight: 700に相当
※ その他に相対値指定として bolder、lighter がありますが今回は省略。
さらに、当たり前ですが CSS 仕様では font-weight のマッチングについても決められていて、下記のようになっています。
該当箇所を抜粋すると
'font-weight' is matched next, so it will always reduce the matching set to a single font face. If bolder/lighter relative weights are used, the effective weight is calculated based on the inherited weight value, as described in the definition of the 'font-weight' property. Given the desired weight and the weights of faces in the matching set after the steps above, if the desired weight is available that face matches. Otherwise, a weight is chosen using the rules below:
- If the desired weight is less than 400, weights below the desired weight are checked in descending order followed by weights above the desired weight in ascending order until a match is found.
- If the desired weight is greater than 500, weights above the desired weight are checked in ascending order followed by weights below the desired weight in descending order until a match is found.
- If the desired weight is 400, 500 is checked first and then the rule for desired weights less than 400 is used.
- If the desired weight is 500, 400 is checked first and then the rule for desired weights less than 400 is used.
当然、指定されたウェイトのフォントが存在すればそのまま利用されますが、問題は存在しない場合ですね。その場合は箇条書きの部分に書かれたマッチングルールで探しに行きます。簡単に訳すと、
- もし指定された数値が 400 未満の場合は、指定された値より細いウェイトでもっとも近いものを順に探し、見つからない場合は太いウェイトで最も近いものから順に探していきます（つまり、300 が指定されてるけど見つからなければ、まずは 「200 - Extra Light」 のフォントがあるかを見て、なければ 「100 - Thin」 と降順に探し、それでも見つからなければ 「400 - Normal」、「500 - Medium」 ... という、今度は昇順に探しに行くということです）。
- もし、ウェイトが 500 より大きい場合は、指定された値より太いウェイトでもっとも近いものを順に探し、見つからない場合は細いウェイトで最も近いものから順に探していきます（つまり上記の逆です）。
- もし指定された数値が 400 だった場合は、500 をまず探しに行きます。500 が見つからない場合は、数値が 400 未満の場合のマッチングルールを使用します。
- もし指定された数値が 500 だった場合は、400 をまず探しに行きます。400 が見つからない場合は、数値が 400 未満の場合のマッチングルールを使用します。
なので font-weight: normal （400 に相当）を指定した場合のマッチングを見てみると、下記のように探しに行くことになりますね。
- まず当たり前ですが指定された 「400 - Normal」 相当のウェイトを探しに行く
- 「400 - Normal」 相当がない場合は 「500 - Medium」 相当を探しに行く
- 「500 - Medium」 がなければ 「300 - Light」 → 「200 - Extra Light」 → 「100 - Thin」 の順で探す
- それでも見つからなければ 「600 - Semi Bold」 → 「700 - Bold」 ... の順で探す
ここで、Windows にバンドルされている 「游ゴシック」 フォントのウェイトは 「細字（Light - 300）」、「標準（Normal - 400）」、「中（Medium - 500） / Windows 10 以降」、「太字（Bold - 700）」 ということですので、正しくレンダリングがされていれば、font-weight: normal と指定した場合、「標準（400 - Normal）」 が最初にマッチングするため、問題は起こらないはずですよね。
ところが、なぜかこれがマッチしないと判断されて、次を探しに行くと、「500 - Medium - 中」 があればマッチしますが、Windows 10 より前の Windows ではバンドルされていないので、これもマッチせず、次に 「300 - Light」 がマッチしてしまうため、結果的に細字でレンダリングされてしまうと。
なぜ最初の 400 がマッチしないのかについては詳しく調べていないためわかりませんが、まぁレンダリングがおかしいってことで結論的には Windows が悪いってことでいいんじゃないですか（雑）。
ちなみに私の環境は Windows 10 ですが、試した限り、font-weight normal で 「Normal - 400」 相当の游ゴシックフォントが選択されていましたし、この問題は解決されているような気がしますがどうなんでしょ。
参考リンク
[2016年 6月 30日 0:30 追記]
to-R さんでも言及されていましたが、Windows （IE11）におけるフォントのファミリー名に対する書体数の上限という点から興味深い指摘が入っています。
