上下中央になったのですが理由がわかりません。

質問

下記ページの文字サイズ変更という部分にHannariというWEBフォントを導入したのですが、
色々やったのですが上下中央になったのですが理由がわかりません。

下記のようにしたところ上下中央になったのですが、line-height: 15px;にするとなりline-height: 5px;だとずれます。値が多いほど下に間があくのではないのでしょうか？
なぜ大きいほうが真ん中に来るのか良く分かりませんでした。

h1+ul+ul li:first-child{
display: inline-block;
color: #C30;
font-size: 19px;
height: 1.2em;
padding: 5px 4px 5px 4px;
margin-right: 5px;
border-left: solid 3px #CCC;
border-right: solid 3px #CCC;
font-family: "webhannari";
line-height: 15px;
}

またIEとファイヤーフォックスで見た目が違うのですが、

なぜWEBフォントなのに違うのでしょうか？

http://sample1.digi2.jp/kindergarten/index.html

回答No.2

ORUKA1951 · ベストアンサー

なぜ仕様書を読まないの？？
　こんなところで聞いたって正確な情報は不可能
　⇒10.8 行の高さの計算: 'line-height'、'vertical-align'プロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#line-height )
　line-heightは、本来font-sizeよりも大きいのですが、このように小さな値が指定されていると期待と異なる表示になる事があります。
　特に、IEの互換モードでは、ボックスの寸法をボーダー辺で解釈します。
　IEの場合、ウェブ標準で動作するようにDOCTYPEを記述すると、ウェブ標準で表示されるはずです。

　しかし、行中央に表示させる場合は、heightとline-heightの値を同じにすべきです。
なお、font-familyには、必ず総称ファミリ名(generic-family)を書かなければなりません。

お礼

ありがとうございました。

行中央に表示させる場合は、heightとline-heightの値を同じにしないといけないのですね。

回答No.1

nekomikekamo

heightとline-heightの両方を定義しているから。
line-heightは、行間なので文字は行間の中で中央に配置されます。

line-height:5pxでは、height:1.2emよりかなり小さな値のため、
文字は高さ1.2emの要素高上部5pxに文字を中央配置しようとします。

line-height:15pxでは、height:1.2emとある程度同じ値のため、
文字は高さ1.2emの要素高上部15pxに文字を中央配置しようとします。

※見え方が違う。
対象のブラウザがウェブフォントをサポートしていないから？

お礼

ありがとうございました。

行中央に表示させる場合は、heightとline-heightの値を同じにしないといけないのですね。