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

보도 티센

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>

보도 티센

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

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

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

UGUI 마스크 및 사용자 지정 글꼴을 올바르게 사용하는 방법

분류에서Dev

글꼴 크기를 줄이기 위해 미디어 쿼리를 올바르게 사용하는 방법은 무엇입니까?

분류에서Dev

외부 스크립트 및 글꼴을 올바르게 묶는 방법은 무엇입니까?

분류에서Dev

Excel에서 글꼴 크기를 굵게 만드는 방법

분류에서Dev

글꼴 크기를 줄이는 방법

분류에서Dev

MS Excel 2007 : 여러 시트의 글꼴 크기를 동일하게 조정하는 방법

분류에서Dev

Android에서 ScrollView의 크기를 올바르게 조정하는 방법

분류에서Dev

파이 게임에서 글꼴 개체 크기를 변경하는 방법

분류에서Dev

모든 브라우저에서 사용자 정의 글꼴을 올바르게 가져 오는 방법

분류에서Dev

FTGL에서 글꼴의 y 축 위치를 올바르게 지정

분류에서Dev

Linux에서 글꼴 모양 이해하기 : 올바른 방법

분류에서Dev

Tkinter에서 글꼴 크기를 설정하는 방법

분류에서Dev

글꼴 크기를 재설정하는 방법

분류에서Dev

jQuery 함수를 올바르게 정의하는 방법

분류에서Dev

Mac에서 글꼴 크기에 따라 Tkinter Button의 크기가 올바르게 조정되지 않음

분류에서Dev

캡션의 글꼴 크기를 변경하는 방법

분류에서Dev

x 축에서 글꼴 크기 변수를 더 작게 만드는 방법

분류에서Dev

off_t 크기를 올바르게 찾는 방법

분류에서Dev

글꼴 수정자를 사용하는 방법은 무엇입니까? SwiftUI의 대문자 및 글꼴 크기

분류에서Dev

이미지 크기를 올바르게 조정 / 다시 압축하는 방법

분류에서Dev

브라우저 창의 글꼴 크기를 100 % 설정하는 방법

분류에서Dev

DropDownList의 글꼴 크기를 설정하는 방법은 무엇입니까?

분류에서Dev

£ 기호가 올바르게 표시되지 않는 텍스트 글꼴 모음

분류에서Dev

드롭 다운 목록 자바 스크립트를 사용하여 텍스트 상자의 글꼴 크기를 설정하는 방법

분류에서Dev

내비게이션 바에서 글꼴 및 라벨 크기를 변경하는 방법-iOS8 #swift

분류에서Dev

axios 기본 헤더를 올바르게 설정하는 방법

분류에서Dev

여러보기를 올바르게 정렬하는 방법

분류에서Dev

Visual Studio 2015 빠른 찾기 대화 상자의 글꼴 크기 또는 크기를 설정하는 방법

분류에서Dev

레이블의 글꼴 크기를 PyQt5의 레이블에있는 텍스트에 맞게 동적으로 조정하는 방법이 있습니까?

Related 관련 기사

  1. 1

    UGUI 마스크 및 사용자 지정 글꼴을 올바르게 사용하는 방법

  2. 2

    글꼴 크기를 줄이기 위해 미디어 쿼리를 올바르게 사용하는 방법은 무엇입니까?

  3. 3

    외부 스크립트 및 글꼴을 올바르게 묶는 방법은 무엇입니까?

  4. 4

    Excel에서 글꼴 크기를 굵게 만드는 방법

  5. 5

    글꼴 크기를 줄이는 방법

  6. 6

    MS Excel 2007 : 여러 시트의 글꼴 크기를 동일하게 조정하는 방법

  7. 7

    Android에서 ScrollView의 크기를 올바르게 조정하는 방법

  8. 8

    파이 게임에서 글꼴 개체 크기를 변경하는 방법

  9. 9

    모든 브라우저에서 사용자 정의 글꼴을 올바르게 가져 오는 방법

  10. 10

    FTGL에서 글꼴의 y 축 위치를 올바르게 지정

  11. 11

    Linux에서 글꼴 모양 이해하기 : 올바른 방법

  12. 12

    Tkinter에서 글꼴 크기를 설정하는 방법

  13. 13

    글꼴 크기를 재설정하는 방법

  14. 14

    jQuery 함수를 올바르게 정의하는 방법

  15. 15

    Mac에서 글꼴 크기에 따라 Tkinter Button의 크기가 올바르게 조정되지 않음

  16. 16

    캡션의 글꼴 크기를 변경하는 방법

  17. 17

    x 축에서 글꼴 크기 변수를 더 작게 만드는 방법

  18. 18

    off_t 크기를 올바르게 찾는 방법

  19. 19

    글꼴 수정자를 사용하는 방법은 무엇입니까? SwiftUI의 대문자 및 글꼴 크기

  20. 20

    이미지 크기를 올바르게 조정 / 다시 압축하는 방법

  21. 21

    브라우저 창의 글꼴 크기를 100 % 설정하는 방법

  22. 22

    DropDownList의 글꼴 크기를 설정하는 방법은 무엇입니까?

  23. 23

    £ 기호가 올바르게 표시되지 않는 텍스트 글꼴 모음

  24. 24

    드롭 다운 목록 자바 스크립트를 사용하여 텍스트 상자의 글꼴 크기를 설정하는 방법

  25. 25

    내비게이션 바에서 글꼴 및 라벨 크기를 변경하는 방법-iOS8 #swift

  26. 26

    axios 기본 헤더를 올바르게 설정하는 방법

  27. 27

    여러보기를 올바르게 정렬하는 방법

  28. 28

    Visual Studio 2015 빠른 찾기 대화 상자의 글꼴 크기 또는 크기를 설정하는 방법

  29. 29

    레이블의 글꼴 크기를 PyQt5의 레이블에있는 텍스트에 맞게 동적으로 조정하는 방법이 있습니까?

뜨겁다태그

보관