この記事で紹介した CSS ハックより適切なものを独自に見つけて、現在は次のハックを使っています。(2023/07/25)
@supports (-moz-appearance:none) and (display:contents) and (not (ruby-position:over)) and (not (-moz-osx-font-smoothing:auto)) and (not (text-align-last:auto)){
@media (-moz-os-version:windows-win8) and (-moz-overlay-scrollbars){
body, textarea, input {
font-family:sans-serif; /* CSS hack for just Firefox OS 2.2 */
}
}
}
Firefox OS 2.2で日本語が表示されない問題に遭遇
Firefox の WebIDE から Firefox OS シミュレータでブログを表示したところ、大部分の日本語が表示され無い問題に遭遇しました。
この問題は 2.2 だけで発生し、2.1～1.3 では発生しません。
CSS が適用される前には一瞬だけ日本語が表示されるので、そもそも日本語表示ができないということではなさそうです。
これをもとに font-family 指定を変えつつ見ていくと Roboto があると日本語が表示され無い、ことが判明しました。
Firefox OS だけの上書きは出来ず…
body, textarea, input {
font-family : Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" ,
"ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
@-moz-document url-prefix() {
body, textarea, input {
font-family : Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana, "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" ,"ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
}
以上から、グローバルへの font-family 指定を Firefox だけ上書きすることにしました。
問題は Firefox OS 2.2 でだけ起きているのでもっとピンポイントで上書きで来たらよかったのですが、JavaScript を使わないとするとこんなところでしょうか...