モダン日本語フォント指定

339ae9d7dfa4cbfc3e907ab5fbee9e93?s=47 tacamy
October 17, 2016

 モダン日本語フォント指定

CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。

CSS Nite LP47 Coder's High 2016にてお話した内容です。

昔からマークアップエンジニアを悩ませてきたfont-familyによる日本語フォント指定。OSのバージョンアップとともに、新しいバンドルフォントが増え、@font-face規則も主要なブラウザでサポートされました。それに合わせてフォント指定の方法もバージョンアップしてみましょう。

Web上できれいに見える日本語フォントを使う方法としてWebフォントがありますが、実際に使うにはさまざまな障壁があります。かといってバンドルフォントはOSによってまちまち……という状況だったところに、WindowsとMac OSの両方に「游ゴシック」という日本語フォントがバンドルインストールされました。

しかし、font-familyに游ゴシックを指定してみると、Mac OSだとちょうどいいのにWindowsだと細すぎると感じたことはないでしょうか?その謎の解明とともに、@font-faceをつかったローカルフォント指定の解説とはまりドコロを紹介します。これで日本語フォント指定に迷わなくなる、かも?

339ae9d7dfa4cbfc3e907ab5fbee9e93?s=128

tacamy

October 17, 2016
Tweet