글꼴 크기를 올바르게 정의하는 방법

Question

span정확히 정의 된 높이를 가진 요소 를 얻으려고합니다 (이 예에서는 23px). 그러나 브라우저는 요소에 일부 픽셀을 추가합니다.

아무하지 padding않으며 margin, 그것은 더 큰 실제 텍스트입니다. 텍스트 높이 (및 span높이 포함)를 어떻게 얻 23px습니까?

요구 사항 :

• 23px 이외의 임의의 숫자를 알아내는 시행 착오 (또는 다른 방법)가 없습니다.
• 전체 텍스트는 범위의 경계 내에 있어야합니다 (내부 텍스트에 관계없이).
• 이 방법은 텍스트가 줄 바꿈되는 경우 직관적으로 작동해야합니다. (즉, 요소 ​​크기는 두 줄로 46px, 세 줄로 69px 등)

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>

Answer 1

댓글에서 Alohci가 제공 한 답변 :

지금은 할 수 없습니다. 23px 및 상승 및 하강 글꼴 메트릭을 기반으로 계산을 수행해야합니다. 그러나 현재 CSS는 해당 계산에 대한 글꼴 메트릭을 노출하지 않습니다. 글꼴 메트릭스를 공개 할 계획이 있다고 생각하지만 어떤 형식을 취할지 확실하지 않습니다. 어쨌든 지원하는 브라우저는 없습니다.