CSSにたったの1行！明朝体をWindows 8.0以下でも綺麗に表示する方法

2017年5月22日
web

文字が多くの割合を占めるウェブサイトにおいて、フォントはサイトイメージを決める重要な要因のひとつです。

『上品なデザインにしたい』『和風な雰囲気を出したい』といった場合、指定する日本語フォントの書体として『明朝体』を思い浮かべる方は多いのではないでしょうか。

しかし、明朝体のフォントをウェブサイトへ指定しても、閲覧している環境がWindowsかMacかでフォントの表示処理や種類に違いがあるために、印象が大きく変わって見えてしまうことがよくあります。

特にそれが顕著に表れてしまうのが、Windows 8.0以下の環境でウェブサイトを閲覧した時です。

1 なぜWindows 8.0以下だと明朝体の見た目に差異が出るのか？
2 『MS明朝』『MS P明朝』をブラウザでも綺麗にする
3 まとめ

なぜWindows 8.0以下だと明朝体の見た目に差異が出るのか？

WindowsとMacについては、最近のMacbookシリーズのモニター解像度が高いことや、そもそもアンチエイリアスの掛かり方がWindows OSとは違うため、印象の違いは仕方ないところがあります。

ではその他に、どういった理由があるのか解説していきます。

理由の一つとして、WindowsとMac両方に搭載されている明朝体のフォントは、現状『游明朝』ただひとつしかないですが、それがWindows 8.0以下にはインストールされていないことです。

二つめは、Windows 8.0以下に搭載されている明朝体フォント『MS明朝』『MS P明朝』が、フォントサイズ22、23px以下ではアンチエイリアスがかからないことが挙げられます。

通常の文章で適用するフォントサイズは約14〜18pxが多いため、そのサイズで『MS明朝』『MS P明朝』を使用してしまうと、フォントは角ばったギザギザな見た目になってしまい、汚く映ってしまうでしょう。

Windows 7 Chrome環境においての游明朝とMS P明朝の違い

現在、Windowsはバージョン10が主流になりつつあり、Windows 8.0以下のユーザーは今後減少していくと予想されますが、それでも日本の2017年3月時点におけるWindowsユーザーのバージョン別統計では、バージョン7が40.96%と以前高い数値ですので、出来ることなら何か対策を行い、OSの違いによるフォントの差異を可能な限り減らしたいところです。

『MS明朝』『MS P明朝』をブラウザでも綺麗にする

フォントの種類については、閲覧している側で『游明朝』をインストールするなどの対応を行う以外に解決する手立てはありませんが、『MS明朝』『MS P明朝』にアンチエイリアスがかからない問題については、実は見かけ上綺麗に見せる方法があります。

対応方法

以下のようなHTMLソースがあり、pタグのCSSクラス”mincho”にフォントサイズ16pxと明朝体フォントの指定がされていると仮定します。

HTML

    
      <p class="mincho">明朝体の見え方の違いについて</p>

CSS

    
      .mincho {
        font-size: 16px;
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      }

Windows 8.0以下で閲覧した場合のイメージ画像

このままではWindows 8.0以下で閲覧した場合、MS P明朝が指定され、16pxではフォントの曲線のギザギザが目立つ印象を与えてしまうでしょう。

これをWindows 8.0以下でも綺麗に見せるには、CSSに” transform: rotate(.03deg);”を追加します。

CSS

    
    .mincho {
      font-size: 16px;
      font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      /* 追加 */
      transform: rotate(.03deg);
    }