#12 ポケモンタイプ別検索アプリを作る-多言語化対応フォント編【ぴよぴよコーダーの開発日記】

多言語化対応でlang属性を変更するところまで、前回やりましたが、お気づきだろうか、ブラウザのデフォルトレンダリングフォントはlang属性で変わります。lang="ja"ならWindowsならMeiryo、lang="zh-cmn-Hans"ならMicrosoft YaHeiという感じ。デフォルトでもいいのですが、せっかくなのでNoto SansあたりのGoogleフォントをあてて、しっとりさせてみます。

まずはGoogleフォントのサイトで、スニペットコードをゲット（右下の黒いバー「Family Selected」をクリック）します

スニペットコードをjQueryなら、こんな感じでtitle属性の後ろあたりに設置

 $('html').attr('lang', 'ja');
 $('title').after('<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">');
 $('.js-lang--ja').show();
 $('.js-lang--en').hide();
 $('.js-lang--cn').hide();
 var langType = location.search;
 if(langType.indexOf('lang=en') !== -1){
   $('html').attr('lang', 'en');
   $('title').after('<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">');
   $('.js-lang--cn').hide();
   $('.js-lang--ja').hide();
   $('.js-lang--en').show();
 } else if(langType.indexOf('lang=cn') !== -1){
   $('html').attr('lang', 'zh-cmn-Hans');
   $('title').after('<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">');
   $('.js-lang--cn').show();
   $('.js-lang--ja').hide();
   $('.js-lang--en').hide();
 }

CSSはlangセレクタを使って、下記のように指定します。

:lang(ja){ font-family: 'Noto Sans JP', sans-serif; }
:lang(en){ font-family: 'Noto Sans JP', sans-serif; }
:lang(zh-cmn-Hans){ font-family: 'Noto Sans SC', sans-serif; }

PHPの場合なら、こんな感じ

if(isset($_GET['lang'])){
 $lang = $_GET['lang'];
}
if(isset($_GET['lang'])){
 if($lang == "en"){
   echo '<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">';
 } else {
   echo '<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">';
 }
} else {
 echo '<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">';
}
?>

フォントのビフォー、アフターを見てみます。

ビフォー（左からMeiryo　MicroSoft Yahei　Meiryo）

アフター（左からNoto Sans JP　Noto Sans SC　Noto Sans JP）

見た感じ、ビフォーでは「搜索」の「索」の字が潰れて見えるけど、アフターだと多少可読性が上がっています。

さてさて、多言語化対応についてはいったんここまで。。だと思う。調べている最中にためになるサイトを見つけたので、参考にリンクを置いておきます。あとデモも作ったので興味のある方は見てみてください。

参考：他言語サイトを制作するときのメモ

デモ：jQuery版　PHP版 　（【使い方】炎とかフェアリーなどの文字列を入力ボックスに入れて「しらべる」をクリックすると結果が表示されます）