[CSS] font property

font-family

항목	내용
초기값	user agent에 의존
상속	O
값 순서	문법에 따른 명확한 순서가 있음

폰트 선언 순서

• 사용자에게 매칭되는 font-face가 없을 경우, 다음 순서의 font-face가 적용됨.
• 사용자에게 매칭되는 font-face가 있더라도, 알맞은 glyph(자형)이 없을 경우, 다음 순서의 font-face가 적용됨.
• 사용자에게 매칭되는 font-face가 아무 것도 없을 경우, user agent의 default font-face가 적용됨.
• 영문과 한글 폰트를 동시에 지정하고자 할때는, 영문폰트를 우선하여 선언한다.

값

<family-name>

• 폰트명이 한글일 경우 반드시 따옴표로 묶어주어야 함.
• 폰트명이 공백 없는 영문일 경우 묶지 않음.
• 폰트명이 영문이지만 공백이나 숫자가 포함될 경우 반드시 따옴표로 묶어주어야 함.
• keyword 값 (inherit, serif, sans-serif, monospace, fantasy, cursive 등)을 포함한 경우 generic family와 구분하기 위해 따옴표로 묶어주어야 함.

<generic-name>

• fallback 으로 적용된다.
• 폰트명이 아닌 키워드이므로, 따옴표로 묶으면 안됨.
• 종류 : serif, sans-serif, monospace, cursive, fantasy

serif

Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.
E.g. Lucida Bright, Lucida Fax, Palatino, “Palatino Linotype”, Palladio, “URW Palladio”, serif.

sans-serif

Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.
E.g. Lucida Bright, Lucida Fax, Palatino, “Palatino Linotype”, Palladio, “URW Palladio”, serif.

monospace

Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.
E.g. Lucida Bright, Lucida Fax, Palatino, “Palatino Linotype”, Palladio, “URW Palladio”, serif.

cursive

Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.
E.g. Lucida Bright, Lucida Fax, Palatino, “Palatino Linotype”, Palladio, “URW Palladio”, serif.

fantasy

Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.
E.g. Lucida Bright, Lucida Fax, Palatino, “Palatino Linotype”, Palladio, “URW Palladio”, serif.

참고 - w3.org / fonts

text-indent

항목	내용
초기값	0
적용대상	블럭 요소
상속	O

inline 요소에 바로 적용하려고 하면 당연히 안됨!

text-decoration

상속?

text-decoration은 상속되지 않는 속성이지만, 자식 요소에도 똑같이 렌더링이 된다..
그래서 부모 요소에 text-decoration:underline을 적용해놓고 자식 요소에 text-decoration:none;을 선언해본들 적용되지 않는다.

특히 IE에서는 가상 요소에도 text-decoration이 그대로 렌더링되지만 크롬에서는 렌더링되지 않는다. 왜지….

​