Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What is going on with this article?
@manabuyasuda

多言語対応のfont-family指定(繁体字・簡体字・タイ語・韓国語)【随時更新】

More than 1 year has passed since last update.

グローバルサイト製作時に多言語対応で困ることのひとつにフォント指定があります。
日本語や英語のフォント指定に関しては、ネット上でもたびたび話題に上がりますが、それ以外の言語では話題にも上がらずネット上の情報も多くはありません。

いろいろ調べた結果、フォント指定の知見が溜まってきたのでまとめておきます。

  • 書体はゴシック体のみ
  • フォント指定は基本的に英語表記のみ(メイリオのような指定は古いブラウザ用のフォールバック)
  • 「Google Fonts + 現地のフォント」を基本としています
  • 「Google Fonts + 欧文フォント + 現地のフォント」のように好きに変更してしてください

英語

Roboto, "Segoe UI", "Helvetica Neue", sans-serif;

英語以降の言語では、"Segoe UI", "Helvetica Neue"を適宜差し込んでください。

Roboto

Google Fontsです。バランスが良く扱いやすいフォントです。

代わりにOpen Sansを使うこともあります。

Segoe UI

Windows7以降のデフォルト欧文フォントです。
「シーゴー」と読みます。

Helvetica Neue

macOSとiOS用です。
「ヘルベチカ・ノイエ」と読みます。
Helveticaはイタリックがなくオブリーク(Oblique)でシステム的に斜体にしていますが、Helvetica Neueにはイタリックがあります。

非デザイナーがイタリックとオブリークの違いについて調べた | cottala-becco

日本語

"Noto Sans JP", "Hiragino Sans" , "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

Noto Sans JP

Google Fontsです。Early AccessのNoto Sans JPより最適化されているようですので、こちらを使いましょう。

正式版になった日本語Google Fontsは表示の高速化を期待できる - アイデアマンズブログ

Hiragino Sans(ヒラギノ角ゴシック)

macOSとiOS用です。
ヒラギノ角ゴに10種類のウェイトを追加した、MacOS El capitan以降とiOS 9以降の日本語フォントです。
font-weightboldのようなキーワードにしていると意図しない太さになってしまうこともありえるので気を付けましょう。

Hiragino Kaku Gothic ProN(ヒラギノ角ゴ)

macOSとiOS用です。
MacOS 10.10以前とiOS9以前の日本語フォントです。Hiragino Sansのフォールバックとして指定します。

Meiryo(メイリオ)

Windows用です。
OfficeをインストールしたMacにもインストールされるので、ヒラギノよりも後に指定します。
欧文フォントにはカスタマイズされたVerdanaが使われます。

DocSetTitle:Windows User Experience Interaction Guidelines

簡体字(中国・シンガポール・マレーシア)

"Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

Noto Sans SC

Google Fontsです。
中国ではGoogleのサーバーが遮断されているので、フォントファイルをダウンロードして@font-faceで読み込みます。

中国から閲覧するWebサイトのアクセス遮断と対処法のまとめ(2016年9月)

PingFang SC(苹方)

macOSとiOS用です。
PingFangはAppleが開発した中文用のフォントです。
ここでは簡体字を指定しています。

Hiragino Sans GB(ヒラギノ角ゴ 簡体中文)

macOSとiOS用です。
ヒラギノ角ゴの簡体字版です。

Microsoft YaHei(マイクロソフト ヤヘイ)

Windows用です。
簡体字版のメイリオです。欧文フォントにはカスタマイズされたSegoe UIが使われます。

繁体字(台湾・香港・マカオ)

"Noto Sans TC", "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", sans-serif;

Noto Sans TC

Google Fontsです。

香港用にはNoto Sans HKも用意されています。

PingFang TC(苹方)

macOSとiOS用です。
PingFangはAppleが開発した中文用のフォントです。
ここでは繁体字を指定しています。

Hiragino Sans CNS(ヒラギノ角ゴ繁体中文)

macOSとiOS用です。
ヒラギノ角ゴの繁体字版です。

Microsoft JhengHei(マイクロソフト ヤヘイ)

Windows用です。
繁体字版のメイリオです。欧文フォントにはカスタマイズされたSegoe UIが使われます。

タイ語

"Noto Sans Thai", Leelawadee, thonburi, Tahoma, sans-serif;

Noto Sans Thai

Early AccessのGoogle Fontsです。

Kanitもよく使われているそうです。

Leelawadee

Windows用です。
タイ語版のメイリオです。

thonburi

macOSとiOS、Windows用です。
タイ語のポピュラーなフォントのようです。
後述する「Tahoma」と同じように、発音符号が子音字の上側にうまく表示されないこともあるようです。

タイ語の無料フォントをダウンロードして使おう!おすすめフォントを紹介します。 | 独学タイ語タイスタディ

Tahoma

macOSとWindows用です。
thonburiと同じくポピュラーなフォントのようです。

韓国語

"Noto Sans KR", "Apple SD Gothic Neo", Gulim, "Malgun Gothic", sans-serif;

Noto Sans KR

Google Fontsです。

Apple SD Gothic Neo

macOSとiOS用です。
詳細を掴めていませんが、System Fonts - Fonts - Apple Developerによると、最大で9つのウェイトがあり、ヒラギノ角ゴシックのようなフォントではと推測しています。

MacのPagesで中国語、日本語、または韓国語テキストのフォーマットを設定する - Apple サポート

Gulim

macOS用です。

Malgun Gothic

Windows用です。
韓国語版のメイリオです。欧文フォントにはカスタマイズされたSegoe UIが使われます。

まとめ

ネットで収集した情報がほとんどなので、ローカライズとして適切なのか分かっていないことも多いです。
説明の誤りや、より良いフォント指定がありましたらコメントいただけると助かります。

7
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
manabuyasuda
Frontend Engineer. Empathize ECSS.
tam-tam
TAM はパートナー型デジタルプロダクションです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
7
Help us understand the problem. What is going on with this article?