フォントサイズを正しく定義する方法

Aug 16 2020

span正確に定義された高さの要素を取得しようとしています(この例では23px)。ただし、ブラウザは要素にいくつかのピクセルを追加します。

ありませんpadding、そしてありませんmargin、それはより大きな実際のテキストです。テキストの高さ(およびそれとともにspan高さ)を取得するにはどうすればよい23pxですか?

要件:

  • 23px以外の任意の数を計算して機能させるための試行錯誤(または他の方法)はありません。
  • テキスト全体は、スパンの境界内にとどまる必要があります(内部のテキストに関係なく)。
  • テキストが折り返される場合、メソッドは直感的に機能する必要があります。(つまり、要素のサイズは2行で46ピクセル、3行で69ピクセルなどになります)

span {
  font-size: 23px;
  line-height: 23px;
  border: red dashed 1px;
}
<span>This element is ...x28 (...x30 with border), but should be ...x23 (...x25 with border).</span>

回答

1 BodoThiesen Sep 11 2020 at 18:27

コメントでAlohciによって与えられた答え:

あなたは今それをすることはできません。23pxと上昇および下降フォントメトリックに基づいて計算を実行する必要があります。しかし現在、CSSはその計算のフォントメトリックを公開していません。フォントメトリクスがどのような形式になるかはわかりませんが、公開する計画があると思います。とにかく、ブラウザはそれをサポートしていません。