読者です 読者をやめる 読者になる 読者になる

Life goes on

何かJavaScriptとかVimとかMacとかに関係してそうな深淵から覗かれる者

フォント関係は面倒ですね

Web関係 HTML&CSS

Verdanaを指定すると全角と半角の混合したコンテンツでFirefoxとSafariで表示が異なる - E-riverstyle Vanguard | CSSやXHTML,Javascriptやweb製作に関する事を紹介
はてなブックマーク - Layzieのだだ漏れ見聞記 - 2010年7月28日


気になる記事があったので、ブクマしました。
バグかどうかで言うとブコメにも書いたんですが、バグでは無いのかなあと思ってます。
DTPとかでも役物関係で高さが変わるとか詰めが変わるとかってのも良く聞きますしね。


Verdanaが英字フォントなので、例で言うと全角のエクスクラメーションマークのみが
日本語のフォント(メイリオとかヒラギノとか)に変わってるんで、高さが合わなくなるんだと
思います。x-heightが違うのでしょうがないんじゃないかな。


ブログ主さんはline-heightを指定してますけども、日本語のhtmlなら、いっその事Verdana
フォントセット中の順位を下げてしまうというのもアリな気がしますが、いかがでしょうか。
ラテン文字も日本語フォントにまかせてしまうという形に。


具体的にはbodyに指定してるfont-familyの中を

 body {
  font-size: 62.5%;
  font-family: Verdana,Arial,Meiryo,"メイリオ",Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3",Osaka,MS P Gothic,"MS P ゴシック",sans-serif;
}

これから

body {
  font-size: 62.5%;
  font-family: Meiryo,"メイリオ",Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3",Osaka,MS P Gothic,"MS P ゴシック",Verdana,Arial,sans-serif;
}

これにしちゃえばOperaでもズレが無いと思います。ご一考を。根本的な解決じゃないけど。

Macで最初の状態だとこんな感じでした。なぜか、Fxはずれが無い。謎。誰か偉い方教えて下さい…。Verは面倒なんで書いてませんが、全部Macの最新版です。

f:id:Layzie:20100728153624j:image

f:id:Layzie:20100728153625j:image

f:id:Layzie:20100728153626j:image

f:id:Layzie:20100728153627j:image

font-familyのフォントセット変えたら以下になります。

f:id:Layzie:20100728170539j:image

f:id:Layzie:20100728170540j:image

f:id:Layzie:20100728170541j:image

f:id:Layzie:20100728170542j:image

あと、ブコメで書いた"Verdanaが推奨されている"というのは俺もググっただけなんで一次情報にあたってません。すいません…。今度時間あれば調べます。多分、英語圏の話だと思うんですけどもね。