글꼴을 정의하는 일반적인 변형은 다음과 같습니다:
body { font-family: Arial, Helvetica, sans-serif; }여기서는 Arial 글꼴이 본문 요소에 할당됩니다. 뷰어 시스템에서 이 글꼴을 사용할 수 없는 경우 헬베티카가 사용됩니다. Helvetica도 사용할 수 없는 경우 브라우저는 Serif가 없는 글꼴을 하나 이상 사용하도록 지시합니다. 물론 이것은 실제로 제어할 수 없습니다. 결국 최종 결과물을 실제로 제어할 수 없습니다. 따라서 GIMP나 Photoshop에서 아름답게 디자인한 것이 글꼴 정글에서 형편없이 무너질 수 있습니다. 이 문제를 해결하는 방법에 대해서는 나중에 자세히 설명하겠습니다.
하지만 먼저 클래식 버전으로 돌아가 보겠습니다. 아래에서 웹사이트의 기본 모양을 사용자 정의하는 데 사용되는 일반적인 정의를 찾을 수 있습니다. 먼저 본문 정의를 사용하여 기본 글꼴 정보를 지정할 수 있습니다.
body { font-family: Georgia, Times, "Times New Roman", Serif; color: #000; font-size: 1.1em; line-height: 150%; } p { font-size: 1.1em; }
물론 이제 페이지의 개별 요소를 개별적으로 디자인할 수 있습니다. 예를 들어 제목, 이탤릭체로 표시된 구절 등이 여기에 포함됩니다. 하지만 여기서는 CSS의 상속 원칙을 기억하세요.
h1 { font-size: 1.6em; }그러면 브라우저에서 다음과 같이 표시될 수 있습니다:
웹 글꼴 사용
기존 글꼴 정의의 문제점은 분명합니다. 궁극적으로 지정한 글꼴이 실제로 뷰어에서 사용 가능한지 확인할 수 없다는 것입니다. 브라우저에서 글꼴을 찾을 수 없는 경우 지정한 글꼴과 유사한 글꼴을 선택하게 됩니다. 물론 이 결과를 실제로 제어할 수는 없습니다. 바로 이 지점에서 @font-face가 구출됩니다. 이를 통해 사용할 글꼴을 명시적으로 지정할 수 있습니다. 원칙적으로 이것은 이미지와 동일한 방식으로 작동합니다. 따라서 글꼴 파일의 경로를 지정해야 합니다.
최신 브라우저에서는 @font-face에 소위 WOFF 웹 글꼴이 사용됩니다. 이러한 글꼴은 이전에 사용되던 EOT 및 TTF 웹 글꼴 형식보다 훨씬 작습니다.
일반적인 @font-face 정의는다음과 같습니다:
@font-face { font-family: "Bitstream Serif Bold"; src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); }
사용할 글꼴의 이름은 font-family에 명시됩니다. 여기까지는 구문상의 특이점이 없습니다. 웹 글꼴 파일이 있는 URL은 src:url()을 통해 지정됩니다. 이론적으로 사용자 컴퓨터에서 글꼴을 사용할 수 있는 가능성이 있는 경우 로컬을 지정해야 합니다. 이 로컬에는 글꼴의 이름이 지정됩니다.
@font-face { font-family: "Bitstream Vera Serif Bold"; local: "Bitstream Vera Serif Bold"; src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); }font-face 정의 이후에는 웹 글꼴을 정상적으로 사용할 수 있습니다.
h1 { font-family: "Bitstream Vera Serif Bold"; font-size: 1.2em; color: #3399FF; }예를 들어 웹 글꼴은 다음과 같습니다.
물론 이제 문제는 관련 웹 글꼴 파일을 어디서 구할 수 있느냐는 것입니다. 예를 들어 Google은 http://www.google.com/fonts 웹 사이트에서 이러한 웹 글꼴을 다수 호스팅합니다 .
이러한 글꼴은 이 페이지를 통해 직접 통합할 수 있습니다.
해당 호출은 다음과 같습니다.
<link rel="stylesheet" type="CSS" href="http://fonts.googleapis.com/css?family=Tangerine">
원하는 웹 글꼴은 font-family 뒤에 지정합니다. 이러한 이름과 호출은 언급된 Google 페이지에서 찾을 수 있습니다. 웹 글꼴을 통합한 후에는 다른 글꼴처럼 사용할 수 있습니다.
body { font-family: 'Tangerine', Serif; font-size: 1.2em; }원하는 경우 사이트에서 여러 웹 글꼴을 사용할 수도 있습니다. 이렇게 하려면 http://www.google.com/fonts 으로 이동하여 원하는 웹 글꼴의 컬렉션에 추가를 클릭합니다. 모든 웹 글꼴이 컬렉션에 추가되면 페이지 하단의 사용을 클릭합니다. 일종의 속도계가 바로 거기에 표시됩니다.
이 그림은 웹 글꼴의 통합이 페이지 로딩 시간에 미치는 영향을 보여줍니다. 이러한 효과는 실제로 측정할 수 있으며 웹 글꼴이 추가될 때마다 증가합니다.
다음 예는 이전에 컬렉션에 추가한 여러 웹 글꼴을 사용하는 것이 얼마나 쉬운지 보여줍니다:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">.
따라서 개별 웹 글꼴은 세로줄로 구분하여 차례로 표시됩니다. 선택한 컬렉션과 일치하는 전체 호출이 앞서 언급한 사용 페이지에표시됩니다.
많은 웹 글꼴은 라틴어 또는 키릴 문자와 같은 소위 하위 집합을 제공합니다. 이러한 하위 집합을 명시적으로 포함하려면 원하는 하위 집합을 매개변수 값으로 입력합니다.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
이러한 하위 집합을 여러 개 사용하려는 경우 각각 쉼표로 구분합니다.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
그러나 이 웹 글꼴의 사용은 완전히 다른 이유로 논란의 여지가 없습니다. 첫째, 페이지가 호출될 때 Google 서버에 연결이 설정되어야 합니다. 웹 글꼴 파일을 다운로드하여 자체 서버에 업로드하면 이 문제를 피할 수 있습니다. 그러나 이 방법으로 사용하려는 웹 글꼴의 사용 약관에 항상 주의를 기울이세요.
예제 페이지의 글꼴 정의
아래에서 현재 예제 페이지에 사용할 글꼴 정의를 확인할 수 있습니다:
body { font-family: 'Crimson Text', Helvetica, sans-serif; color: #444; text-decoration: none; line-height: 1.5em; font-size: 1.2em; } p { font-size: 1.1em; } h1 { font-size: 1.6em; color: #3399FF; }
물론 추가 요소를 포함할 수도 있습니다. 그러나 현재의 경우에는 이 구문으로 충분합니다.
