7

Google のすべてのページを調べたに違いありませんが、まだ解決策が見つかりません。CSS font-face で使用しているカスタム フォントがあります。使用しているブラウザーと OS によっては、フォントの下部に余分なパディングが追加されます。下の図は、左が Mac、右が Windows の例を示しています。右側（Windows）では正しく見えますが、Macでも同じにしたいです。

別のブラウザ ビュー

@font-face
{
  font-family: universLight;
  src: url('http://www.viggi.com/fonts/UniversLTStd-Light.otf');
  font-weight: normal;
  font-style: normal;
}
#button{
    font-family: universLight;
    border: 1px solid black;
    background: #ccc;
}

コードはhttp://jsfiddle.net/ZDh5h/にあります。

これは、私の研究からうまくいかないことを私がすでに知っていることです。

  • line-height は上下にパディングを追加して、下部の余分なパディングが残るようにします。
  • .otf や .ttf などの異なる拡張子を使用しても機能しません。同じ結果を生成するだけです
  • フォントサイズを変更しても実際には何もしません

私はこのフォントをサイト全体で頻繁に使用しており、Mac と Windows で異なる CSS シートを追加したくありません。とにかく、javascript に余分なパディングを追加せずにこれを修正する方法を誰かが知っていれば、私は非常に感謝しています。

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

4

1 に答える 1

0

http://www.w3.org/TR/CSS2/visudet.html#propdef-line-heightを参照してください。

正常

要素のフォントに基づいて、使用される値を「妥当な」値に設定するようにユーザー エージェントに指示します。値は と同じ意味です。1.0 から 1.2 の間の「通常」の値を使用することをお勧めします。計算値は「正常」です。

あなたが観察した動作normalは、デフォルトline-height値と同様に、ブラウザー全体でさまざまな「合理的な」値に由来すると思います。

そのため、値を指定して(たとえばline-height: 1.5em;)、違いを取り除きます。

于 2013-05-10T08:12:17.807 に答える