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 속성을 사용하여 줄 간격을 설정할 수 있다. 키워드와 크기, 비율 등으로 설정할 수 있다.

Previous글자 속성Nexttext

Last updated