#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版 (【使い方】炎とかフェアリーなどの文字列を入力ボックスに入れて「しらべる」をクリックすると結果が表示されます)
この記事が気に入ったらサポートをしてみませんか?