多言語サイトを作成する際、アクセス元の地域に合わせたフォントを指定するとユーザーにとって違和感なくサイトを使うことができます。
(海外のサイトで日本語対応してるサイトがあっても変なフォントの場合とかテンション下がりますよね!)
そこでIPアドレスから地域を判別してその地域のフォントに合わせればいいかというとそれだけではうまくいきません。
必要なのは2つです。
- htmlのlang属性を指定する
- font-familyに最適なフォントを指定する
僕はこの中の2つ目しか対応しておらず
「font-familyを指定してるのになんでfont変わんないの?dev toolsで見ても普通に指定されてるし。むむむ。。。」
という状態が続いていましたorz
それでは1つずつ解説します。
まず、今回の例では
日本圏の場合: "HiraKakuProN-W3","ヒラギノ角ゴ ProN W3","DroidSerif",sans-serif
英語圏の場合: sans-serif
繁体中文圏の場合:'PMingLiU'
簡体中文圏の場合:'宋体-简'
この4つの言語に対応してみたいとします。
##1.htmlのlang属性を指定する
html5に対応しているwebサイトであればwebページの書き出しは
<!DOCTYPE html>
<html lang="ja">
で始まります。
これの
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しか変えていなかったので正しい挙動が起きずぐぬぬっとなっていました。
グローバルなサービスを作る際には必ず必要な処理だと思うので何かの役に立てれば光栄です。