웹 글꼴의 세로 간격

Question

@font-face을 사용하여 웹 글꼴을로드하고 있지만 세로 간격이 약간 다르기 때문에 글꼴을로드 한 후에 요소 높이가 약간 변경됩니다. 로드 될 때 웹 글꼴에 맞추기 전에 가족의 기본 글꼴이나 다음 글꼴의 세로 간격을 사용하는 것으로 보입니다.

로드하기 전에 웹 글꼴의 세로 간격을 브라우저에 어떻게 알릴 수 있습니까?

Answer 1

원하는 요소의 고정 픽셀 값으로 line-height 속성을 설정하면됩니다.

Answer 2

우선 기본 글꼴 크기 (본문)를 px로 설정하고 다른 모든 글꼴 크기를 em으로 설정 한 다음 줄 높이를 em (1em은 글꼴 크기의 100 %)로 설정하는 것이 좋습니다.

기본값 line-height은 font-size (1.2em ~ 1.45em)의 120 %에서 145 % 사이로 설정해야합니다. 이렇게하면 본문 텍스트를 잘 읽을 수 있습니다. 이상적인 라인 높이 (전통적인 타이포그래피에서 '주도'라고도 함), 글꼴 크기 측정 등 웹에 대한 많은 훌륭한 정보가 있습니다.

함께 찍은 다른 요소의 글꼴 크기 (p, h1, h2 , h3 등)을 '인쇄상의 척도'라고합니다.

'완벽한 4 등급'을 사용하는 훌륭한 출발점입니다. 적절한 라인 높이도 있습니다.

body { 
    font-size: 16px; 
    line-height: 1.45em; 
} 

p {margin-bottom: 1.3em;} 

h1, h2, h3, h4 { 
    margin: 1.414em 0 0.5em; 
    line-height: 1.2em; 
} 

h1 { 
    margin-top: 0; 
    font-size: 3.157em; 
} 

h2 {font-size: 2.369em;} 

h3 {font-size: 1.777em;} 

h4 {font-size: 1.333em;} 

small, .font_small {font-size: 0.75em;} 

나는 이것이 당신이 요구 된 것보다 더 많은 것을 알고 있지만, 당신이 유형으로 작동 위하여려고하는 경우에 인쇄술에 대해 조금 아는 것이 중요합니다. :)

일부 더 많은 자원 :

• 8 Simple Ways to Improve Typography In Your Designs
• 16 Pixels: For Body Copy. Anything Less Is A Costly Mistake
• The Elements of Typographic Style Applied to the Web합니다 ( 원래 책이 분야의 고전으로 간주됩니다)
• Web Design is 95% Typography