スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--/--/-- ( -- )  --:--:-- | スポンサー広告 | page top↑

font-family:sans-serif;でIEだけフォントが違って見える

昨日。このブログを見たとき、IEだけが文字の表示がおかしいのに気づいた。「\(円)」がおかしなことになっておる。化けているというか、表示するフォントの選択の問題だと思うのだけど、XP+IE6はまだいい。vista+IE7はなんじゃ。(後で調べて分かったけどウォンの記号らしい。それ日本語フォントでもないってことか?)
XP+IE6 これはバックスラッシュなので、まあいい ↓
[画像: XP+IE6]

vista+IE7 よく見れば漢字もところどころおかしい ↓
[画像: XP+IE7]

vista+Fx3(XP+Fx3でも同じ) これは問題ない↓
[画像: vista+Fx3]

vista+Safari3(XP+Safari3でも同じ) これも問題ない↓
[画像: vista+Safari3]


いや、実は今までもInternetExplorerだけ文字違うなとは思ってはいたが、あまり気にしていなかった(失敗)。が、51のエントリーでは気になる。IEのインターネットオプションメニューの「フォント」はMSゴシック(もしくはMSPゴシ)になっている。ということは、ブログ側でフォント指定していることになるけど、でも、指定したかな? それに指定してあったらFirefoxとSafariも同じ表示になるはずでは?IEだけ変なのはそれはそれでおかしい…と思いながらテンプレート確認したら、ありゃ指定してあるわ。…とりあえずfont-family指定を削除。お、IEも他と同じになった。おし、とりあえずよしと。フォントなんて読む側の個々のユーザーが見やすいやつで表示されればいいのだ。

フォントファミリー指定をやめた後のXP+IE6 (フォントはMS UI Gothic) ↓
[画像: フォント指定をやめた後のXP+IE6]

フォントファミリー指定をやめた後のvista+IE7 (フォントはメイリオ) ↓
[画像: フォント指定をやめた後のvista+IE7]




さて。落ち着いたところで。
cssにあった「font-family: sans-serif,"\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF","\30D2\30E9\30AE\30CE\20Pro\20W3",Osaka;」が直の原因だったわけだが、それの何が悪かったのか?

このブログのテンプレートは元々はfc2ブログの公式テンプレートで適当なのをDLしてカスタマイズしたわけだが(見た目の原型はほとんどとどめていない…)フォント設定は色以外ほとんどさわってなくて、font-familyも始めにcssにあったものをそのままにしたようだ。(「ようだ」というのは覚えていないから…。)テンプレートを自分でいじくりまわした時に何かやらかしたかと思って確認したが、今の公式テンプレにもこうなっているものがある。(全部ではなく一部のようだ。)

そこでfont-familyを色々試してみたら、どうやら「sans-serif」が最初にあるのが悪いらしい。以下、font-family指定でsans-serifを1番目に記述した場合どう見えるかを試した結果のメモ。

  • InternetExplorer6,7
    個々のユーザー側の設定で指定してあるフォントではなく、cssでsans-serifの次に指定してあるフォントでもなく、別の何かで表示するようにする。結果、意図していない文字に。(IEのバージョンが同じでもXPとVistaは違う文字で表示されるし、IE6とIE7でも違うらしい。たぶん、個々のPCにインストールされているfontによっても変わることがある。)

  • Firefox3
    個々のユーザー側の設定でsans-serifとして指定してあるフォントで表示。
    (ツールメニュー→オプションのコンテンツで「既定のフォント」の「詳細設定」)
    [画像: 「既定のフォント」の「詳細設定」]


  • Safari3
    半角はsans-serif系統つまりゴシック系のフォント、日本語はcssでsans-serifの次に指定してある日本語フォントつまり今回の場合、MS ゴシック("\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF")で表示。


sans-serif指定で適当(この場合悪い意味で適当)なフォントで表示するのはIEだけのようだ。
それで検索してみたら結構出てきた。

使用フォントを sans-serif に指定した HTML ファイルを Internet Explorer で表示すると文字化け
http://support.microsoft.com/kb/417057/ja

VistaのIE7でsans-serifがGulimになる - 三日坊主と呼ばせない!日記
http://d.hatena.ne.jp/kiyokura/20071123/p1

Internet Explorer 7でfont-family:にsans-serifのみ指定したときの表示が変
http://h-fd.spaces.live.com/Blog/cns!324CA75F2B629D43!722.entry


どうやらIEのことを考えたらフォントの指定をするときにはsans-serifを始めに持ってこない方がいいらしい。fc2、全部じゃないにしろ公式テンプレで、なんやかんやいいながら世の中一番シェアの広いIEに対して具合の悪い指定の仕方をするのはどうなの?と思った。

(XP Firefox3.0.10,InternetExplorer6.0,Safari3.2.2 /
Vista Firefox3.0.8,InternetExplorer7.0,Safari3.2.2 )


-2009.6.2追記-

文字コードはEUC-JP。これも関係あるらしいが、記載し忘れていた。
また、以下のページも参考になりそう。

CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係
http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html
2009/06/01 ( Mon )  02:39:54 | その他/URLめも | トラックバック(0) | コメント(2) | page top↑
<<テキストにしてしまったパスを元に戻す | ホーム | プリントファイルを使う>>
コメント
*
Firefoxはフォントのレンダリングを独自で持ってるのでOSによる違いがほとんど無いのですよ
by:   * 2009/08/16 ( Sun )  03:54:29 | [ 編集] | page top↑
* Re:2009/08/16 03:54:29
>Firefoxはフォントのレンダリングを独自で持ってるのでOSによる違いがほとんど無い

そうなのですか?
一般的にOSによる違いは、デフォルトでインストールされているフォントの違いによるところが大きいと思います。なのでOSというより個々のPCに何のフォントがインストールされているか、されていないか、によるところと言えます。例えば、このエントリーに貼った画像の“フォントファミリー指定をやめた後のIE”の見た目が違うのは、XPとvistaというOSの違いではなく、ブラウザのバージョン(6対7)とフォント選択(MS UI Gothic 対 メイリオ)が原因です。XPでもIE7にしてフォントもメイリオにすればvistaIE7と見た目の違いはわからなくなりますが…それともこのコメントはそういう意味ではないのでしょうか?
by: chiru * 2009/08/23 ( Sun )  16:01:20 | [ 編集] | page top↑
コメントの投稿












管理者にだけ表示を許可する

トラックバック
トラックバックURL
http://chiruchirupon.blog119.fc2.com/tb.php/52-59d4bfd2
この記事にトラックバックする(FC2ブログユーザー)
| ホーム |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。