CHIBATCH.JP

なんとなくGoogle Chromeでこのブログを見てみたら、文字化けしていた...。Firefoxでみても、IEで見ても何も問題なかったのに。amazonも文字化けしていたので、一瞬しょうがないか、とも思ったけどなんか悔しいのでいろいろ試してみました。
レンダリングエンジンにGoogle ChromeとおなじAppleWebKitを使っているSafariで見ても文字化けしていないということは、Google Chrome固有の問題なのでしょうか?それとも、このブログの問題?

「chrome 文字化け」でググってみても、特にこれといった情報もなく、「ランダムで文字化け」とか「文字化けしててもブラウザの設定を変更すれば問題ない」とかしか出てきません。
ている人にいちいちブラウザの設定を変更してもらう、っていうのは目指す解決方法ではないので(自分だったら文字化けしている時点でどっか行っちゃうと思うので)、とりあえずいろいろ試してみることにしました。
で、試しているうちになんか解決してしまいました。

2009/06/15 文字化けについて追記

Google Chromeで自分のサイトの文字化けを直す

これが文字化けをした状態のこのブログのトップ。今はもう直ってます。

別のPCで見てみると、文字化けしていたサイトが普通に見れました...もしかしたら自分のPCの問題だったのかも...。入れているフォントの問題?

文字化けの原因は...

結論からいいますと、CSS内でフォントファミリーに日本語フォントを指定した場合文字化けが起っていました。(このブログでしか確認していませんが)
なので、Webkit用のCSSハックでフォントファミリーを上書きすることにします。

上がよく見かけるCSSのフォントファミリーの指定。下がWebkit用のハックです。

body
{
  font-family: "arial","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka","MS Pゴシック","MS PGothic", sans-serif;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  body
  {
    font-family: "arial",sans-serif;
  }
}

この場合、Safariにもこの指定が適用されてしまいますが、もともとSafariってフォントがキレイに見えるからいいか、ということにしてしまいます。
本当はもっとしっかりやりたかったんですが、心がバキバキに折れてしまいました...

TAG

COMMENTS

コメントはまだありません。ぜひあなたの一言を!

GIVE ME A COMMENT!