[CSS3] 03. 폰트 속성

font 속성

font 속성은 글꼴에 대한 여러 속성들을 한 번에 지정한다.
font 속성은 아래와 같은 서브 속성들로 구성된다.

font-family : 글꼴 지정

1. font-family 속성은 여러 개의 값을 가질 수 있다. 값은 쉼표로 구분하며, 우선순위가 높은 글꼴부터 차례대로 목록에 나열한다.

2. 우선순위가 높은 글꼴은 해당 시스템에 설치되어 있지 않거나, 해당 문자를 지원하지 않는 경우 다음 우선순위에 있는 글꼴이 대신 적용된다.

3. CSS Parsor는 앞의 글꼴부터 읽으며 글꼴이 사용자 PC에 없을 경우 다음 글꼴을 적용한다.

사용 예시 : 
p {
  font-family: Arial, Helvetica, sans-serif;
}

1. "Arial" 글꼴을 기본으로 사용한다. 
2. 해당 시스템에 Arial 글꼴이 없는 경우 "Helvetica"를 대신 사용한다. 
3. 마지막으로 "sans-serif"가 적용된다.

font-size : 글자 크기 지정

글자의 크기를 지정하는 데 사용된다. 속성 값은 절대 크기나 상대 크기 중 선택 가능하다.

1. 절대 크기 값

• 고정된 크기로, 특정한 글꼴 크기를 나타내며, 보통 px 단위로 지정된다.
  그 외에 xx-small, x-small, small, medium, large.. 등 단위가 존재한다.

2. 상대 크기 값

상위 요소에 상대적인 크기로 지정되며, em, rem, % 등의 단위로 지정된다.
그 외에 larger, smaller가 있다.

em : 상위 요소에서 지정한 글꼴 크기의 배수

• ex) font-size: 1.5em은 상위 요소에서 지정한 글꼴 크기의 1.5배 크기의 글꼴을 의미한다.

rem : 루트 요소에서 지정한 글꼴 크기의 배수

• ex) font-size: 1.2rem은 루트 요소에서 지정한 글꼴 크기의 1.2배 크기의 글꼴을 의미한다.

% : 상위 요소에서 지정한 글꼴 크기의 백분율

• ex) font-size: 150%은 상위 요소에서 지정한 글꼴 크기의 150% 크기의 글꼴을 의미한다.

3. font-size 속성은 상속된다.
부모의 요소에 일정 크기를 적용하면, 자식 요소와 안의 모든 텍스트들이 이에 적용된다.

font-style : 글자 스타일 지정

글꼴의 스타일을 설정하는 속성. 이 속성을 사용하여 글꼴의 기울임을 조절할 수 있다.

• normal: 기본값으로, 글꼴을 기울이지 않는다.
• italic: 글꼴을 기울여서 이탤릭체로 표시한다.
• oblique: 글꼴을 기울여서 살짝 기울인 모양으로 표시한다. italic 값과 비슷하지만, 글꼴 자체에 이탤릭체가 없는 경우에 사용

font-variant : 소문자를 다른 대문자로 변형

h1 {
  font-variant: small-caps;
}

normal: 기본값으로 설정되며 대소문자 변형이 없다.
small-caps: 작은 대문자로 변형된다.

font-weight : 글자 굵기 지정

font-weight의 속성은 100부터 900까지의 값(100 단위)이나,
normal(400), bold(700), bolder, lighter .. 와 같은 상대적인 키워드 값으로 지정할 수 있다.

p.normal {
  font-weight: normal;
}

p.bold {
  font-weight: bold;
}

p.thick {
  font-weight: 900;
}

font : font에 관한 속성을 한 번에 지정하는 단축형 속성

font-size와 font-family는 필수 속성이며 생략 시 기본 값이 적용된다.
여러 속성을 정의할 때, 순서에 맞지 않는다면 일부만 적용되거나 전체가 무시될 수 있다.

/* font-size: 18px; */
/* font-family: Arial, sans-serif; */
/* font-weight: bold; */
/* font-style: italic; */
font: bold italic 18px Arial, sans-serif;

TMI : CSS의 구문 분석(파싱)은 오른쪽에서 왼쪽으로 이루어지기 때문에, font 속성에서 지정하는 속성들의 순서는 오른쪽에서 왼쪽 순서로 적용된다.
즉, 제일 오른쪽에 있는 속성이 가장 먼저 적용되며, 왼쪽으로 갈수록 우선순위가 낮아진다는 이야기이다.