Web ページでローカル・フォントを使う

no extension

いや,個人的には Web フォントで NOTO フォント使えばいいぢゃんって思ってるけど,仕事だと色々と思惑も絡むので簡単には行かないわけさ。 んで Web ページでローカル・フォントを指定する方法についてちょろんと調べてみたので,以下に覚え書きとして残しておく。

やっぱり問題は日本語フォント。 しかも Windows と macOS の差異だろう。 こんな感じ。

  • Windows
    • 游ゴシック(Yu Gothic)
    • 游明朝(Yu Mincho)
    • メイリオ(Meiryo)
    • MS Pゴシック(MS PGothic)
  • macOS
    • 游ゴシック体(YuGothic)
    • 游明朝体(YuMincho)
    • ヒラギノ角ゴ Pro W3(Hiragino Kaku Gothic Pro)
    • Osaka

これだけ見たら「游明朝/游ゴシック」で統一すればいいぢゃん,と思うでしょ。 でも「游明朝/游ゴシック」は Windows 7 には標準で入っていない1。 更に言うと Windows と macOS では「游明朝/游ゴシック」の中身が違うのだ。

  • Windows 用の「游明朝/游ゴシック」には一部の異体字が入っていない
  • Windows 用の「游明朝/游ゴシック」の ウェイトは Regular サイズが標準だが macOS 用は Regular サイズが存在しない

なんだよ,それ orz

まだあるぞ。

Windows の Internet Explorler (IE) で日本語のローカル・フォントを指定する際には日本語名で指定しないといけないが,どうやらこれが IE だけの特殊ルールらしいのだ。

sigh…

結局 Web ページで「游明朝/游ゴシック」を指定したいなら

div.gothic {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "YuGothic", sans-serif;
}

みたいな感じにしないといけないらしい。 馬鹿すぎる。

これではあまりにカオスなので以下のように @font-face を定義してみた。

@font-face {
  font-family: 'HiGothic-local';
  font-style: normal;
  src: local("ヒラギノ角ゴ Pro W3"), local("Hiragino Kaku Gothic Pro");
}
@font-face {
  font-family: 'YuGothic-local';
  font-style: normal;
  src: local("游ゴシック Medium"), local("Yu Gothic Medium"), local("游ゴシック体"), local("YuGothic");
}
@font-face {
  font-family: 'MSGothic-local';
  font-style: normal;
  src: local("MS Pゴシック"), local("MS PGothic");
}
@font-face {
  font-family: 'SansJP-local';
  font-style: normal;
  src: local("メイリオ"), local(Meiryo), local(Osaka) ;
}

こうしておけば

div.gothic {
  font-family: 'HiGothic-local', 'YuGothic-local', 'SansJP-local', 'MSGothic-local', sans-serif;
}

という感じに多少スッキリするのではないかと。

ちなみに iOS はフォントの種類が限られている(日本語はヒラギノ・フォント)ので serif / sans-serif を指定すれば対応できる。 更に Android には明朝体がない上,ゴシック体についても端末メーカが各々独自の日本語フォントを入れているらしい。 だから日本はガラp…

くぁwせdrftgyふじこlp

…やっぱ Web フォントでいいと思うなぁ。 ローカル・フォントは serif / sans-serif で指定すれば十分だろう。

ブックマーク


  1. Windows Vista, XP は論外ね。つまり IE 11 より前のバージョンはもう考えなくていいと思う。ベストは一刻も早く IE が滅亡することだけど。 [return]