책 씹어먹는 즐거움

CSS는 font-family 속성(property)으로 텍스트의 font를 설정한다.

다음은 <p> 요소에 적용될 폰트를 설정한 CSS 규칙이다. 

font-family 속성에는 여러 개의 폰트를 지정할 수 있다. 각각의 폰트는 대소문자를 정확하게 맞춰서 작성되어야 하며 쉼표(,)로 구분한다. 그리고 마지막에는 항상 'sans-serif', 'cursive', 'monospace', 'serif', 'fantasy'의 일반 그룹(generic family) 이름을 넣는다(권장사항).

font-family 속성에 주어진 폰트들은 순차적으로 적용(fallback)된다. 즉, 브라우저에 font-family 속성으로 정의한 첫 번째 폰트가 없을 경우 그 다음 폰트를 시도하고, 그것도 없으면 다시 그 다음 글꼴을 시도하는 식으로 계속 이어진다.

위의 예문이라면 Verdana를 적용할 수 있는지 따져보고 적용할 수 없을 때  그 다음의 Arial로 넘어간다. Arial도 없으면 마지막으로는 브라우저에 설정된 sans-serif의 기본 폰트를 사용한다. 사용할 수 있는 폰트의 개수가 정해져 있는 것은 아니므로 위의 사례처럼 꼭 3개의 폰트를 나열할 필요는 없다.

폰트의 이름에 공백이 포함되어 있을 때는 큰 따옴표(“”)로 감싸주어야 한다. (예: "Times New Roman")

그렇다면 왜 font-family 속성에는 여러 개의 폰트를 쓰는 것일까?

OS나 브라우저에 따라서 지원하는 폰트가 다르기 때문이다. 어떤 폰트는 지원되고 어떤 폰트는 지원되지 않으므로 원하는 폰트들이 없을 때를 위하여 원하는 폰트를 차례로 배치하는 것이다. 전부 없다면 그나마 원하는 폰트와 비슷한 것을 쓸 수 있도록 일반 그룹(generic family) 계열의 이름을 마지막에 두는 것이다.

따라서 폰트를 설정할 때는 일단 원하는 폰트로 시작하고 마지막은 원하는 것과 유사한 일반 그룹(generic family)로 배치하는 것을 권장한다. 그러면 브라우저가 우리가 원하는 폰트들을 사용할 수 없을 경우 약간이나마 유사한 일반 그룹의 기본 지정된 폰트를 사용하기 때문이다. 

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0041 CSS로 텍스트의 폰트 설정하기.apkg