[CSS] font

Font에 관한 속성들

font-weight : 서체의 굵기

• font-weight 종류 : thin, ligher, normal, bold, bolder, black
• 숫자 100~900 으로도 굵기 조절 가능
• font-weight는 font designer가 허용한 수치 내에서 조절 가능. 지정한 값이 없는 값일 때는 비슷한 값으로 자동으로 맞춰짐.

 

font-style : 서체 기울기

• font-style 종류 : normal, italic, oblique
• em, i, address 태그는 기본적으로 italic 체로 적용됨

 

font-size : 서체 크기

• 아무것도 지정하지 않았을 때 기본 16px
• 16px = 12pt
• font-size를 %로 값을 주면 부모 요소의 값에 따라 상대적으로 처리됨.
• px보다는 rem으로 변환해서 사용하는 것 권장

 

line-height : 행간

 

font-family : 서체 종류

• font-family: 'Caveat','KOHIBaeumOTF'; ⇒ 기본적으로 Caveat 서체 적용, 서체가 없는 경우에 KOHIBaeumOTF 서체 사용
• 내부 파일 사용할 시
  • css 파일 맨 처음에 @import url(”../../fonts/KOHI.css”); 입력해야 font-family 적용됨
• 외부 파일 사용할 시
  • html head 태그에 해당 링크 붙여넣기

 

letter-spacing : 글자 하나 사이의 간격(자평)

• 기본 0

 

word-spacing : 단어 사이의 간격

• 사용하는 경우 : log in
  • login이라고 붙여쓰면 스크린리더에서 한 단어로 인식하기 때문에 띄어쓰기 하고 word-spacing 작업을 해준다.

 

text-transform : 글자 변형

• uppercase : 모든 글자 대문자로
• lowercase : 모든 글자 소문자로
• capitalize : 단어 첫글자 대문자로

 

text-align : 글자 정렬

• left, right, center, justify(양쪽 정렬)

 

word-break

• break-all : 단어가 다 끝나지 않았음에도 불구하고 줄바꿈이 강제적으로 되는 것
• keep-all : 단어가 끝나면 줄바꿈 (기본)