Programing

H1-H6 태그의 가장 일반적인 글꼴 크기는 무엇입니까?

lottogame 2020. 8. 21. 08:29
반응형

H1-H6 태그의 가장 일반적인 글꼴 크기는 무엇입니까?


저는 항상 일반적인 모범 사례 기준으로 어디서부터 시작해야할지 확신하지 못했습니다. 예, 귀하의 디자인에 따라 다릅니다.하지만 가장 일반적인 것은 무엇입니까?

내가 현재 시작하는 것은 다음과 같습니다.

h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}

예, 현재 직장에서는 EM을 사용하지 않습니다.

감사


브라우저의 기본 스타일 시트에 따라 다릅니다. 여기 에서 CSS2.1 사용자 에이전트 스타일 시트 기본값의 (비공식) 표를 볼 수 있습니다 .

위에 나열된 페이지에 따라 기본 크기는 다음과 같습니다.

    IE7     IE8     FF2         FF3         Opera   Safari 3.1
H1  24pt    2em     32px        32px        32px    32px       
H2  18pt    1.5em   24px        24px        24px    24px
H3  13.55pt 1.17em  18.7333px   18.7167px   18px    19px
H4  n/a     n/a     n/a         n/a         n/a     n/a
H5  10pt    0.83em  13.2667px   13.2833px   13px    13px
H6  7.55pt  0.67em  10.7333px   10.7167px   10px    11px

또한 살펴볼 가치가있는 것은 HTML 4기본 스타일 시트입니다 . W3C는 이러한 스타일을 기본값으로 사용하도록 권장합니다. 요약 발췌 :

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

이 정보가 도움이되기를 바랍니다.


제목은 일반적으로 굵게 표시됩니다. 이 크기 대응 데모를 위해 해제되었습니다. MSIE와 Opera는 이러한 크기를 동일하게 해석하지만 Gecko 브라우저와 Chrome은 제목 6을 10 픽셀 / 글꼴 크기 1 대신 11 픽셀로, 제목 3을 18 픽셀 / 글꼴 크기 4 대신 19 픽셀로 해석합니다. 직접 비교해도 차이를 말하고 사용 불가능). Gecko는 또한 텍스트를 10 픽셀 이상으로 제한하는 것 같습니다.

참고 URL : https://stackoverflow.com/questions/6140430/what-are-the-most-common-font-sizes-for-h1-h6-tags

반응형