font

font 속성은 폰트 스타일, 폰트 변형, 폰트 두께, 폰트 사이즈, 폰트 간격, 폰트 종류를 설정합니다.

Summary

특징	설명
기본 값	font-style : normal font-variant : normal font-weight : normal font-size : medium line-height : normal font-family : 사용자 설정에 따름
상속	가능
애니메이션	font-style : 안됨 font-variant : 안됨 font-weight : 가능 font-size : 가능 line-height : 가능 font-family : 안됨
버전	CSS1

Definition

• font 속성은 폰트 스타일, 폰트 변형, 폰트 두께, 폰트 사이즈, 폰트 간격, 폰트 종류를 설정합니다.

Syntax

font : font-style / font-variant / font-weight / font-stretch / font-size / line-height / font-family | caption | icon | menu | message-box | small-caption | status-bar | inherit;

/* size | family를 설정한 경우 */
font: 20px "Open Sans", sans-serif;

/* style | size | family를 설정한 경우 */
font: italic 20px "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family를 설정한 경우 */
font: italic small-caps bolder 16px/3 cursive;

/* style | variant | weight | stretch | size/line-height | family를 설정한 경우 */
font: italic small-caps bolder condensed 16px/3 cursive;

Property

속성 값	설명
font-style	폰트 스타일 속성을 설정합니다.
font-variant	폰트 글꼴을 변형하는 속성입니다.
font-weight	폰트 두께 속성을 설정합니다.
font-stretch	텍스트의 크기를 정의합니다.
font-size	폰트 사이즈를 설정합니다.
line-height	폰트와 폰트사이의 거리를 설정합니다.
font-family	폰트 종류를 설정합니다.
caption	폰트의 스타일을 caption으로 설정합니다.
icon	폰트의 스타일을 icon으로 설정합니다.
menu	폰트의 스타일을 menu로 설정합니다.
message-box	폰트의 스타일을 message-box로 설정합니다.
small-caption	폰트의 스타일을 small-caption로 설정합니다.
status-bar	폰트의 스타일을 status-bar로 설정합니다.
inherit	font의 속성 값을 상위요소한테 상속받습니다.

Compatibility

							6	7	8	9	10	11
font

Sample

"The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”

그리드 시스템은 디자인 결과를 보장하는 것이 아니라, 각기 다른 디자이너들이 자신만의 개성 있는 스타일에 적합한 해결책을 찾을 수 있도록 객관적인 방법을 제공합니다. 그리드 시스템을 활용하려면, 그리드를 사용하는 방법을 배우려고 노력해야 합니다. 그리드 연습이 필요한 예술이기 때문입니다.

font: 14px "Open Sans", sans-serif;
font: 16px "Open Sans", sans-serif;
font: italic 16px "Open Sans", sans-serif;
font: italic bold 16px "Open Sans", sans-serif;
font: italic small-caps bold 16px "Open Sans", sans-serif;
font: italic small-caps bold 16px/2 "Open Sans", sans-serif;
font: italic small-caps bold condensed 16px/2 "Open Sans", sans-serif;