text - @font-face 埋め込みフォントの高さの問題

Question

@font-face で生成されたテキストの CSS 配置に問題があります。何らかの理由で、各文字の下部に大量の余分なスペースが表示され、テキストを含むボックスが下に伸びすぎています。

このサンプル ページのテキストを調べると、私の言いたいことがわかります。

他の多くのページをググって調べましたが、これは私を困惑させました. 誰かが助けてくれる可能性はありますか？

ありがとう！

Answer 1

手始めに、計算line-heightは65pxであるため、必要に応じていつでも定義でき60pxます。

ただし、そのスペースのほとんどは、実際には選択したフォントによって必要とされます。CSSで大文字に変換しましたが、フォントには、テキストのベースラインの下に描画される文字をレンダリングするためのスペースが必要です。そのヘッダーのテキストにコンマを追加してみてください。実際にはかなり巨大で、空のスペースのほとんどを埋めるはずです。

Answer 2

<h2>そこでタグを使用しています。hタグでは、CSS スタイルのマージンとパディングを使用して余分なスペースを削除します。

<style>
h2 {
   margin:0;
   padding:0;
}
</style>