Web/CSS
[CSS] font
by print_soo
2023. 5. 6.
1. font-family(글꼴 지정)
font-family: <글꼴 이름>
serif와 sans-serif의 차이
2. font-weight(굵기)
font-weight: <굵기>
- normal: 기본값, 보통 굵기
- bold: 굵게
- bolder: 원래보다 더 굵게
- lighter: 원래보다 더 가늘게
- 100~900: 100은 가장 가늘게, 900은 가장 굵게
3. line-height(줄 간격)
line-height: <수치>
- px: 고정된 값
- 숫자: 해당 숫자의 배수만큼 상대적으로 간격이 생긴다.
1. 240px / 2. 2
4. letter-spacing, word-spacing
- letter-spacing: 글자와 글자의 간격을 조절한다.
- word-spacing: 단어와 단어 사이의 간격을 조정한다.
1. letter-spacing / 2. word-spacing
5. font(축약형)
font: <font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit>
- font는 위의 있던 속성들을 한번에 작성하는 축약형 코드이다.
- 순서는 위의 코드에 따라서 순서대로 작성해야한다. (필요한 것만 작성 가능)
