font
font 속성
font 속성을 이용하여 표시될 글자에 대한 속성을 설정할 수 있다.
font-family
font-size
font-style
font-variant
font-weight
line-height
font-family
font-family 속성을 통해 글꼴을 설정한다. 해당 글꼴이 어떠한 형태든 지원되어야 하며, 지원되지 않을 경우 후 순위로 설정된 글꼴이 적용된다. 없을 경우 브라우저의 기본 글꼴이 적용된다.
다음 키워드들은 지정된 글꼴을 사용할 수 없을 때의 대체 값이다.
serif- 글자 끝 부분이 돌출된 서sans-serif- 글자 끝 부분에 돌출된 부분이 없는 서체monospace- 모든 글자가 동일한 폭을 가지는 서체cursive- 필기체 형식의 서체fantasy- 장식용 글꼴 서체system-ui- 시스템에 따른 서체(시스템 업그레이드로 변경될 가능성이 있음)-apple-system - Mac OS X 시스템 서체
BlinkMacSystemFont - Mac OS X Chrome 서체
Segoe UI - Windows 및 Windows Phone 서체
Roboto - Android 및 최신 Chrome OS 서체
Oxygen - KDE 데스크탑 서체
Ubuntu - Ubuntu OS 서체
Centarell - GNOME(GNU Network Object Model Environment) 서체
Fira Sans - Firefox OS 서체
Droid Sans - 이전 버전의 Android 서체
Helventica Neue - Mac OS X의 El Capitan 이전 버전의 서체
Arial - 일반적으로 시스템에 설치된 Web safe font
sans-serif - 기본 sans-serif 서체
font-size
font-size 속성을 통해 글자의 크기를 설정한다. 크기는 다음과 같이 설정할 수 있다.
키워드
xx-small
x-small
small
medium
large
x-large
xx-large
larger
smaller
절대적인 크기
20px
1.2rem
1.2em
비율
50%
기타
inherit
initial
unset
font-style
font-style 속성을 통해 글자의 스타일을 설정다.
normal - 일반 스타일
italic - 기울임 스타일
oblique - 원래 서체의 기울임 형태. 지원하는 경우 각도 지정 가능
font-variant
font-weight
font-weight 속성을 사용하여 글자의 굵기(가중치)를 설정할 수 있다. 절대, 상대 키워드를 제공하며, 수치는 100 부터 900까지 100단위로 설정할 수 있다.
line-height
line-height 속성을 사용하여 줄 간격을 설정할 수 있다. 키워드와 크기, 비율 등으로 설정할 수 있다.
Last updated
