CSS Property font

CSS를 사용하여 폰트를 사용하는 방법에 대하여 알아봅니다. 폰트를 설정에는 CSS의 font 프로퍼티를 사용할 수 있습니다. font는 폰트를 설정하는데 필요한 여러가지 옵션을 한 번에 적용할 수 있는 가장 많이 사용되는 프로퍼티 중 하나입니다.

! 폰트 타입에 대하여 간단하게 알아보기

먼저 폰트를 설정할 때 가장 먼저 생각하는 부분이 어떤 글꼴, 폰트 타입을 사용할 것인가입니다. 폰트의 종류는 어떤 글꼴이냐와 고딕체냐... 명조체냐의 Sans-serif와 Serif로 나뉘게 됩니다. 필기체도 있죠.

sans-serif
serif

여기서 sans-serif는 고딕체에 해당하는 폰트 타입입니다. Serif에 비교하여 단순하고 끝에 휘어지거나 돌출된 부분 등이 생략된 모습을 가집니다. sans는 프랑스어로 없다는 뜻을 가졌다고 합니다. Sans-serif는 serif가 없다라는 의미입니다.

# font 프로퍼티를 사용하는 방법

아래부터는 가장 중요한 font 프로퍼티를 사용하는 방법을 먼저 알아보겠습니다. 문법으로는  아래와 같은 방법으로 사용할 수 있습니다.

font: italic 12px/30px serif;


font값으로 폰트 스타일과 폰트 크기, 폰트 line-height 그리고 font-family값이 사용될 수 있습니다. font 역시 아래와 같이 축약 프로퍼티를 사용하여 선언하는 것이 가능합니다.

font는 여러가지 옵션을 한 번에 설정하는 shortcut 형태로 하나하나 각각 설정할 수 있는 css 프로퍼티들이 존재합니다. 이를 아래와 같이 나누어 간단히 설명해보겠습니다.

@ font-family
사용할 폰트를 결정함.

@ font-size
폰트의 크기값
pt, px, em 등등의 단위로 설정이 가능.

폰트 크기를 rem 또는 vh, vw로 값을 설정하기
rem(relative size of root element)


@ font-weight
폰트에서 font-weight 값 결정

@ font-style

@ font-variant
font-variant: small-caps;

! 기타 알아두면 좋은 내용

폰트를 웹킷엔진에 부드럽게 처리해주는 속성이 존재합니다.
-webkit-antialias