多言語サイト制作時の中国語、韓国語のフォントファミリー設定
多言語サイト制作の時に、デバイスフォントの指定って結構迷いませんか?
デバイスフォントとはOS環境に最初から搭載されているフォントで環境によって搭載されているフォントが異なります。
そしてウェブサイトでは様々な環境と言語に対応した、複数のフォント指定が必要になります。
指定したフォントは、ウェブサイト上のリード文などテキストとして表示させる箇所に反映されますが、少なくともRegular(400)とBold(700)2種類のウェイトがあり、シンプルな形状で読みやすいものが適しています。
今回はそんなデバイスフォントの設定の中でも、中国語サイト制作(繁体字・簡体字)と韓国語サイト制作の時に最低限何のフォントを指定すべきか、2020年7月現在までの私の事例を元にまとめてみました。
中国語(簡体字)
sans-serif
- Noto Sans SC(Google Fonts)
- PingFang SC(MacO, iOS)
- Microsoft YaHei(Windows)
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
serif
- Noto Serif SC(Google Fonts)
- Kaiti SC(MacOS, iOS)
- SimSun(Windows)
font-family: 'Noto Serif SC', 'Kaiti SC', 'SimSun', serif;
中国語(繁体字)
sans-serif
- Noto Sans TC(Google Fonts)
- PingFang TC(MacO, iOS)
- Microsoft JhengHei(Windows)
font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
serif
- Noto Serif TC(Google Fonts)
- Kaiti TC(MacOS, iOS)
- PMingLiU(Windows)
font-family: 'Noto Serif TC', 'Kaiti TC', 'PMingLiU', serif;
韓国語
sans-serif
- Noto Sans KR(Google Fonts)
- Nanum Gothic(MacOS, iOS)
- Malgun Gothic(Windows)
font-family: 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', sans-serif;
serif
- Noto Serif KR(Google Fonts)
- Nanum Myeongjo(MacOS, iOS)
- Batang(Windows)
font-family: 'Noto Serif KR', 'Nanum Myeongjo', 'Batang', serif;
環境別の搭載フォント一覧
WEBフォント(GoogleFont)を指定すれば全環境でフォントを統一できるので、上記の例では優先してWEBフォントを使っています。
そしてWEBフォントが使えない場合や、読み込みの遅延やエラー時のために、各環境にプリインストールされているデバイスフォントを指定します。
Androidはデバイスフォントの選択肢が無いに等しいので、表示にこだわる場合はWEBフォント利用が必要になります。