2018.10.19
自身のポートフォリオサイト構築中にフォント指定でつまづいたことと、その対策をメモしておきます。
対策としてIE11用の和文フォントはCSSハックを使い、IE11のみメイリオを指定しました。IE11以外のブラウザ表示では、欧文と和文の両方が存在する和欧混植の表記箇所にはNoto Sans JPを指定しています。
IE11用で発生する意図しない余白を調整(該当箇所にCSSでpaddingを指定)するよりも、メイリオを指定して安定表示させたほうが良いと判断したためです。
遊ゴシックをWindows用とMac用のそれぞれに@font-faceでウェイトを調整したフォント指定も検証してみましたが、Noto Sans JPのほうが読みやすいと判断してNoto Sans JPを採用しました。
2018年10月17日現在、Google Fontsから直接Noto Sans JPを読み込めるようになっているため、直接読み込む方法も試しました。
Google Fontsから読み込む場合、WindowsのChromeで画面表示時に一瞬フォントが切り替わって描画される挙動になったため、さらなる検証が必要と判断して現時点では導入しませんでした。
今後、検証して各ブラウザで安定表示できてパフォーマンスも良いと判断できれば、Google Fontsから直接読み込む方法に変更しようと思います。