最近はテキストをスタイルシートでデザインする機会も多いので、この問題を少し書きます(解決はしません)。以前からよく悩ませてくれたのは、リストのマークを背景で指定する場合。結局ブラウザ毎にハックするか、IEを優先してなんとか不自然でないところで妥協していました(最近は背景画像にせず、ブラウザに任せる方がいいと思ってます)。

いくつかのブラウザ、フォントの違いは下のような感じです。
フォントは、Windowsでは「メイリオ」と「sans-serif(MS ゴシック)」、Macは「ヒラギノ」。インライン要素への指定で、paddingは「0」としました。メイリオの場合、Windows FirefoxもChromeも同じ見え方だったので割愛。
font height
こうして比較するとブラウザの違いはほとんどなく、OSとフォントによる違いです。大きく特徴は2点。

  • Windowsの「メイリオ」の高さが異常に高い。「MSゴシック」の高さで指定したスタイルは必ずおかしくなります。
  • Macでは高さがおよそキャップハイト(アルファベット大文字の高さ)なので、「y」の下がはみ出しています。ただ厳密にはキャップハイトではなく若干の余白があります。

ちなみに、Safariではfont-familyに「sans-serif」だけ指定すると、英語部分のフォントがヒラギノではないもの(おそらくHelvetica)になります。この時、アルファベットは若干小さくなり「y」の文字も背景からはみ出さなくなります。おそらくMacの場合、この高さが基準になっているようです。

高さとは関係ありませんが、MacのFirefoxはきちんと「A」と「y」の間のカーニングができています。ブラウザによるフォント表示の違いも多少はあるみたいですね。


PAGE UP