Re : Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い!

このエントリーをはてなブックマークに追加

ネタ元 : Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い!

ネタ元の記事にはいくつか疑問に思われる点があるので私で調べた内容をまとめておきます。

前置きとしてデバイスフォントの話となり環境によって異なる結果がでる可能性があることを前提に読んでください。

font-familyで「游ゴシック」を指定した場合に採用されるフォント

まずは以下の箇所

そのため、font-familyで「游ゴシック」と指定すると、Macでは「ミディアム」で表示されて綺麗なのに、Windowsでは「細字」で表示されるためにかすれてしまうんです。


WWW WATCH
さんで指摘(Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる)されている通りこれが事実ならWindowsのバグです。

以下のようなスタイルを適応して検証してみましょう。(1番目が未指定、2番目が「游ゴシック Light」を指定、3番目が「游ゴシック」を指定、4番目が「游ゴシック」とfont-weightを指定)

<p>あいうえおアイウエオAIUEO</p>
<p class="font1">あいうえおアイウエオAIUEO</p>
<p class="font2">あいうえおアイウエオAIUEO</p>
<p class="font3">あいうえおアイウエオAIUEO</p> 
 
<style>
.font1{
	font-family: "游ゴシック Light", YuGothic;
}
.font2{
	font-family: "游ゴシック", YuGothic;
}
.font3{
	font-family: "游ゴシック", YuGothic;
	font-weight:500;
}
</style>

表示結果は以下のようになります

Windows10(左がChrome、右がIE11)

Windows10でのフォントの見え方

「游ゴシック」を指定した場合明らかに「游ゴシック Light」より太字の書体「游ゴシック Regular」で表示されます、またfont-weightを指定するとさらに太字の書体「游ゴシック Medium」で表示されます。

「游ゴシック Regular」が他のシステムフォントより細身のためLight体で表示されるように感じますがちゃんとRegular体で表示されています

Windows8.1(左がChrome、右がIE11)

Windows8.1でのフォントの見え方

IE11は「游ゴシック Light」の指定を無視するようです、またfont-weightを指定してもMedium体にはなりません。(Window8.1には「游ゴシック Medium」がインストールされていないため)

"Hiragino Maru Gothic W4 JIS2004"

ネタ元の記事では「游ゴシック」の指定の前に「Hiragino Maru Gothic W4 JIS2004」という指定を行なっておりこれが更に話をややこしくしている要因です。

以下のスタイルをWindows8.1で確認してみましょう。

.font1{
	font-family: "游ゴシック", YuGothic , sans-serif;
}
.font2{
	font-family: "Hiragino Maru Gothic W4 JIS2004","游ゴシック", YuGothic , sans-serif;
}

以下のように表示されます。(左がChrome、右がIE11)

Windows8.1でのフォントの見え方

IE11で2番目の.font2が太く表示されるのがわかるでしょう。

Windowsではフォントのファミリ名に対する書体数の上限を 4 個までとしているようで「Hiragino Maru Gothic W4 JIS2004」の指定はWindow8.1のIE11では不正な値と扱われます。(参考:CSS Fonts Module Level 3 (日本語訳) - 付録 A: プラットフォームフォントプロパティから CSS プロパティへの対応付け

結果、直後の指定(「游ゴシック」)が無効化され、sans-serifが採用されてメイリオフォントで描画されるみたいです。(以下のように「游ゴシック」の前に適当なフォントを入れておくと「游ゴシック」で描画されます。)

.font2{
	font-family: "Hiragino Maru Gothic W4 JIS2004","foo","游ゴシック", YuGothic , sans-serif;
}

そのため、ネタ元の筆者のPCでは問題なく表示されたんでしょう(メイリオだし)。

ひとまず、ここらへんが気になった点なので指摘しておきたいと思います。

スポンサードリンク

«Android 4.2のシェアが10%を切った | メイン | 「FOR CREATORS #1」に出演します。»

このエントリーのトラックバックURL
コメント

私の記事に対する考察、ありがとうございます。

記事の内容につきましては、キャプチャをとってわかりやすくまとめてあると思いました。
(念のために申し上げておきますと、私のPC上でメイリオで表示されていたということはありません。メイリオ、ヒラギノ、游ゴシックの区別はつきます)

ただ不思議なのは、「游ゴシック Regular」で表示されるのであれば、こんなにネット上に「游ゴシックが読みづらい」という意見があふれることはないと思います。
私の記憶でも明らかにRegularの見え方と違っておりましたので、何か他に原因があったのではないかと考えています。
(chromeの過去バージョンの不具合を疑っています)

投稿者:川井昌彦 | 2016年6月30日 02:10

>川井昌彦さん

返信、遅くなってすみません。

> 念のために申し上げておきますと、私のPC上でメイリオで表示されていたということはありません。メイリオ、ヒラギノ、游ゴシックの区別はつきます

これWindows 8.1での事象です。補足いただいた記事でWindows8.1環境をお持ちじゃないということだったので再現はできないかと思います。

> こんなにネット上に「游ゴシックが読みづらい」という意見があふれることはないと思います。

これはそうですね。わたしが游ゴシック読みづらいと感じだしたのは1年前くらいで、もっと前から游ゴシック使おう的な流れはあった気がします。
(普段使いがMacなので検証時ぐらいしかWindowsで見ないので曖昧な記憶ですが)

投稿者:西畑一馬 | 2016年9月 8日 15:21
コメントを投稿