19
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

多言語サイトでフォント指定の注意点

Last updated at Posted at 2015-12-21

多言語サイトを作成する際、アクセス元の地域に合わせたフォントを指定するとユーザーにとって違和感なくサイトを使うことができます。
(海外のサイトで日本語対応してるサイトがあっても変なフォントの場合とかテンション下がりますよね!)

そこでIPアドレスから地域を判別してその地域のフォントに合わせればいいかというとそれだけではうまくいきません。

必要なのは2つです。

  • htmlのlang属性を指定する
  • font-familyに最適なフォントを指定する

僕はこの中の2つ目しか対応しておらず

「font-familyを指定してるのになんでfont変わんないの?dev toolsで見ても普通に指定されてるし。むむむ。。。」

という状態が続いていましたorz

それでは1つずつ解説します。

まず、今回の例では

lang
日本圏の場合: "HiraKakuProN-W3","ヒラギノ角ゴ ProN W3","DroidSerif",sans-serif
英語圏の場合: sans-serif
繁体中文圏の場合:'PMingLiU'
簡体中文圏の場合:'宋体-简'

この4つの言語に対応してみたいとします。

##1.htmlのlang属性を指定する
html5に対応しているwebサイトであればwebページの書き出しは

index.html
<!DOCTYPE html>
<html lang="ja">

で始まります。

これの

index.html
lang="ja"

この部分のlang属性の値を変えます。
今回の例で言うとこうなります。

日本語圏:'jp'
英語圏: 'en'
繁体中文圏: 'zh-tw'
簡体中文圏: 'zh'

つまり繁体中文圏に対応したい場合は

<!DOCTYPE html>
<html lang="zh">

この用に指定しましょう!

##2.font-familyに最適なフォントを指定する
※「最適なフォント」と見出しに記述してありますが、各々のサービスで最適なフォントを選んで下さい。

.font--ja: {font-family: "HiraKakuProN-W3","ヒラギノ角ゴ ProN W3","DroidSerif",sans-serif}
.font--en: {font-family: sans-serif;}
.font--zh_tw: {font-family: 'PMingLiU';}
.font--zh: {font-family: '宋体-简';}

というふうに各言語ごとにfont-familyを指定してあげましょう。

##まとめ
この2つの方法で各地域ごとに正しいフォントを指定することができます。

僕はfont-familyしか変えていなかったので正しい挙動が起きずぐぬぬっとなっていました。

グローバルなサービスを作る際には必ず必要な処理だと思うので何かの役に立てれば光栄です。

19
14
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?