IE7と全角記号
2007年 03月 11日
今回はFFと全く関係ない話。しかもブログを作る側の話なので興味ない人は即刻Alt + F4Backspace叩いて下さい。
みなさんはどんなブラウザ使ってますか?多分世の中的にはIE6が主流だと思いますし自分も前はIE6を使ってましたが、IE7が正式リリースされてからはIE7を使うようになりました。実際にはIE6とIE7を両方使っているんですけどね。IE7がリリースされたのが2006年の10月だったかな?そのころから使っているので結構長い間使ってます。
それで、使い始めてからすぐ気付いてたことがあるんですが、直し方がよくわからないのでずっと放置してたことがありました。
どうもIE7では■とか○とかの全角記号(これを全角記号と言うのかは知らない)が小さく表示されてしまうことがあるんです。
例えばディアボロス記事で書いた床配置は、単に全角記号を並べただけだったんですが、これをIE7で表示すると、
こんな感じで○と×が小さく表示されます。しかも星マークの後の○は大きさが違うというわけわからん表示をしてくれます(笑)
今度はFirefox2で表示させると、
○の大きさはあってるんですが、×だけ小さく表示されました。
IE6なら、
期待した通りに表示されます。
でも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ゴシック;
}
こんな感じのスタイルを作って、
○
とすれば、めんどくさいけど一応全体がverdanaでもちゃんと表示されます。
.rare {
color : #FFDD33;
font-family: MS Pゴシック;
}
RareExのスタイルにもフォント指定を入れればこれも
●
これでちゃんと表示されました。
まぁぶっちゃけIE7なんてシラネーヨ!ってのでもいいじゃないかとも思いますが(笑)
でもそろそろWindows Updateの自動更新で自動ダウンロード(インストールは選択?)されるようになる時期が近づいてるかもしれないので、無視できなくなってくるのかなと。
本当はこんなのぐぐれば簡単に見つかると思ってたんですが、意外に見つからなかったので書いてみました。ぐぐり方がまずかっただけのような気もしますが。
尚、この内容については一切責任持てないので、自己責任で・・・
みなさんはどんなブラウザ使ってますか?多分世の中的にはIE6が主流だと思いますし自分も前はIE6を使ってましたが、IE7が正式リリースされてからはIE7を使うようになりました。実際にはIE6とIE7を両方使っているんですけどね。IE7がリリースされたのが2006年の10月だったかな?そのころから使っているので結構長い間使ってます。
それで、使い始めてからすぐ気付いてたことがあるんですが、直し方がよくわからないのでずっと放置してたことがありました。
どうもIE7では■とか○とかの全角記号(これを全角記号と言うのかは知らない)が小さく表示されてしまうことがあるんです。
例えばディアボロス記事で書いた床配置は、単に全角記号を並べただけだったんですが、これをIE7で表示すると、
こんな感じで○と×が小さく表示されます。しかも星マークの後の○は大きさが違うというわけわからん表示をしてくれます(笑)
今度はFirefox2で表示させると、
○の大きさはあってるんですが、×だけ小さく表示されました。
IE6なら、
期待した通りに表示されます。
でも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ゴシック;
}
こんな感じのスタイルを作って、
○
とすれば、めんどくさいけど一応全体がverdanaでもちゃんと表示されます。
.rare {
color : #FFDD33;
font-family: MS Pゴシック;
}
RareExのスタイルにもフォント指定を入れればこれも
●
これでちゃんと表示されました。
まぁぶっちゃけIE7なんてシラネーヨ!ってのでもいいじゃないかとも思いますが(笑)
でもそろそろWindows Updateの自動更新で自動ダウンロード(インストールは選択?)されるようになる時期が近づいてるかもしれないので、無視できなくなってくるのかなと。
本当はこんなのぐぐれば簡単に見つかると思ってたんですが、意外に見つからなかったので書いてみました。ぐぐり方がまずかっただけのような気もしますが。
尚、この内容については一切責任持てないので、自己責任で・・・
by ktocomo | 2007-03-11 21:21