最近Webページの制作依頼があると、言語切替機能を要望されることが多いです。
言語切替と聞くと、「ワテ、ニホンゴしかワカラナイ」と考えてしまいがちなのが、ネイティブ日本人。
言語翻訳まで責任を負うわけではなく、翻訳はクライアントでやってもらうか、最近の精度の良い機械翻訳で十分なので、HTMLとCSSをちょっと工夫するだけで簡単に言語切替機能ってできちゃうんですよね。
そして、最近とりわけめんどくさいブラウザは、個人的にFirefoxです。（メインで使っている人すみません、個人的に優位点が少なく感じてオワコン感を持ってしまっています）
直近で作ったWebページがFirefoxで言うことをきかなかった為、今回は調査してブログに書き留めておきたいと思います。
Firefoxブラウザでfont-familyが効かない？
safariブラウザはデフォルトで、明朝フォントが登録されています。
それを回避するために、以下のコードをcssに仕込んでおくようにしています。
*{
font-family: sans-serif;
}
これにより、基本的には同じフォントが使えると思っていたんだけど、Firefoxがちょっと様子がおかしい・・・
言語切替すると、文字が変わってしまっている。
htmlタグのlang属性を"ja"と"en"それぞれで、フォントの表示の違いを見てもらいたい。
GoogleChromeでの表示
Safariでの表示
Firefoxでの表示
指定通りに表示されているのは、GoogleChromeのみだった・・・orz
Safariも大幅に違っているように見えますが、Safariでは、日本語表示はそのままで英語表示が書体が変わっているようです。
Firefoxはというと、ブラウザの検証機能で調べてみたところ・・・
lang="ja"
lang="en"
おいおい、適用フォントが違っているじゃ〜ないか！
なんという事でしょう！
指定してあるフォントと違っているフォントが適用されているようです。
もはや、アプリの仕様として受け入れないといけないのか？
フォントではなく、画像で対応しないといけないのか？
利用率が低いから放置プレーでいいのか？
誰か答えを教えてくれ〜。
あとがき
どうやら、世界的にも問題になっているようで、Stack overolowでもたくさん議論されていました。
font-family not working in Firefox, but works in all other browsers?
埋め込みフォントを使うしか無いんでしょうか？
やっぱりオワコンなのか？
firefoxerの人ごめんなさいね。
