スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

IE7と全角記号 

今回はFFと全く関係ない話。しかもブログを作る側の話なので興味ない人は即刻Alt + F4Backspace叩いて下さい。

みなさんはどんなブラウザ使ってますか?多分世の中的にはIE6が主流だと思いますし自分も前はIE6を使ってましたが、IE7が正式リリースされてからはIE7を使うようになりました。実際にはIE6とIE7を両方使っているんですけどね。IE7がリリースされたのが2006年の10月だったかな?そのころから使っているので結構長い間使ってます。

それで、使い始めてからすぐ気付いてたことがあるんですが、直し方がよくわからないのでずっと放置してたことがありました。

どうもIE7ではとかとかの全角記号(これを全角記号と言うのかは知らない)が小さく表示されてしまうことがあるんです。

例えばディアボロス記事で書いた床配置は、単に全角記号を並べただけだったんですが、これをIE7で表示すると、

IE7.jpg


こんな感じで×が小さく表示されます。しかも星マークの後の○は大きさが違うというわけわからん表示をしてくれます(笑)

今度はFirefox2で表示させると、

firefox2.jpg


の大きさはあってるんですが、×だけ小さく表示されました。
IE6なら、

IE6.jpg


期待した通りに表示されます。

でもIE7なら必ずこうなるわけではなくて、例えばelemen様のサイトで使われてる装備のExRareを表すは全角のにスタイルシートで色を付けてるんですが、これがIE6と同じ大きさで表示されます。でも自分のブログで同じように書くと小さく表示される・・・

・・・なんでよ(´Д`;)

で、色々調べてみると、

欧文フォントを指定するとこうなるらしい

ということが発覚。
確かにこのブログではVerdanaというフォントが優先されるようになってました(デフォルトでそうなってた)。具体的にはこんな感じです。

body {
  font-family: Verdana, MS Pゴシック;
}

font-familyの指定は左にあるものが優先されるので、この順番を変えてMS Pゴシックを先頭に持ってくると、

body {
  font-family: MS Pゴシック, Verdana;
}

IE7もFirefox2も全角記号が同じ大きさで表示されました。
ちなみにelemen様のサイトはフォント指定が部分的にしかされてないみたいで、ほとんどはブラウザのデフォルトフォントで表示されるはずです。IEのデフォルトフォントはMS Pゴシックだと思うので、IE7でもちゃんと表示されたんでしょうね。

これで全角記号はIE6と同じ大きさで表示されるようになったんですが、デフォルトでVerdanaフォントだったのは、ブラウザで見るのに適したフォントだからだと思うので、全角記号の表示のためにフォントを変えるのもどうなんだ?って気もします。実際MS PゴシックとVerdanaなら、Verdanaの方が文字が全然見やすいです。なので結局戻してしまいました。

(2007/03/11 追記)
全角記号のとこだけフォントを部分的に上書きすればいいようです。全角記号向けに

.zenkaku {
  font-family: MS Pゴシック;
}

こんな感じのスタイルを作って、

<SPAN class="zenkaku"></SPAN>

とすれば、めんどくさいけど一応全体がverdanaでもちゃんと表示されます。

.rare {
  color : #FFDD33;
  font-family: MS Pゴシック;
}

RareExのスタイルにもフォント指定を入れればこれも

<SPAN class="rare"></SPAN>

これでちゃんと表示されました。


まぁぶっちゃけIE7なんてシラネーヨ!ってのでもいいじゃないかとも思いますが(笑)
でもそろそろWindows Updateの自動更新で自動ダウンロード(インストールは選択?)されるようになる時期が近づいてるかもしれないので、無視できなくなってくるのかなと。
本当はこんなのぐぐれば簡単に見つかると思ってたんですが、意外に見つからなかったので書いてみました。ぐぐり方がまずかっただけのような気もしますが。

尚、この内容については一切責任持てないので、自己責任で・・・

スポンサーサイト

コメント

コメントの投稿















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

トラックバック

この記事のトラックバックURL
http://volnut.blog65.fc2.com/tb.php/74-314df63e

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。