폰트 패밀리 (HTML)

(X)HTML, CSS 및 파생 시스템에서의 폰트 패밀리(font family) 선택은 우선순위가 지정된 글꼴 목록과 제네릭 패밀리 이름을 지정한다. 상관관계가 있는 글꼴 속성과 결합하여, 이 목록은 문자를 렌더링하는 데 사용되는 특정 폰트 페이스(font face)를 결정한다. 패밀리 선택은 두 가지 형태로 사용할 수 있다. 더 이상 권장되지 않는 (X)HTML  요소의  속성, 그리고 CSS의  속성이다.

CSS 용어인 폰트 패밀리는 디자인 스타일을 공유하여 정의된 글꼴 그룹인 타이포그래피 용어 글꼴(typeface)과 일치한다. 글꼴(font)은 글자 모양(글리프)의 특정 집합으로, 획의 굵기, 기울기, 상대적 너비 등과 같은 추가 속성에 의해 동일한 패밀리의 다른 글꼴과 구별된다. CSS 용어인 폰트 페이스는 "글꼴"과 일치하며, 폰트 패밀리와 추가 속성의 조합에 의해 결정된다.

HTML과 CSS 모두에서 목록은 쉼표로 구분된다. 예기치 않은 결과를 피하려면 글꼴 목록의 마지막 폰트 패밀리는 기본적으로 항상 사용할 수 있는 제네릭 패밀리 중 하나여야 한다. 글꼴을 찾을 수 없는 경우 웹 브라우저는 사용자가 정의한 것일 수 있는 기본 글꼴을 사용한다. 웹 브라우저에 따라 사용자는 실제로 코드 작성자가 정의한 글꼴을 무시하고 변경할 수 있다. 이는 개인적인 취향 때문일 수도 있지만, 더 큰 글꼴 크기가 필요하거나 특정 색상을 피해야 하는 등 사용자의 신체적 제한 때문일 수도 있다.

로컬 글꼴 외에도 현대적인 웹 브라우저는 @font-face 선언을 사용하여 사용자 정의 글꼴 파일을 직접 연결하는 것을 지원한다. 이러한 글꼴이 포함되면 모든 로컬 및 폴백 글꼴과 함께 font-family 속성에 나열될 수 있다.

 예시 

다음 예시는 동일한 폰트 페이스(타임스 또는 기본 세리프, 14포인트, 이탤릭체)를 세 가지 방식으로 정의한다.
 별도의 스타일 시트에 있는 CSS.
  속성을 통해 요소에 적용된 인라인 CSS.
 더 이상 권장되지 않는 표현용 요소 와 비표준 속성 . (는 일반적으로 사용이 중단된 것은 아니지만, 표현 용도로 사용하는 것은 권장되지 않는다.)

.text { font-family: times, serif; font-size:14pt; font-style:italic; }
<p class="text">
별도의 스타일 시트에서 CSS로 서식이 지정된 샘플 텍스트입니다.
</p>

<p style="font-family: times, serif; font-size:14pt; font-style:italic">
인라인 CSS로 서식이 지정된 샘플 텍스트입니다.
</p>

<p><i><font face="times, serif" size="3">
더 이상 권장되지 않는 FONT 태그로 서식이 지정된 샘플 텍스트입니다.
</font></i></p>

쉼표 뒤에 공백을 두고, 공백이 포함된 이름은 따옴표 안에 넣는 것이 모범 사례이다.

 패밀리 이름으로서의 글꼴 이름 
CSS는 폰트 패밀리를 typeface와 동일하게 정의하려고 시도하지만,  항목과 비표준 HTML 전임자들은 역사적으로 특정 폰트 페이스를 식별하는 데에도 사용되어 왔다. 이러한 사용 방식은 글꼴 파일이 스스로를 패밀리의 일부로 설명하지 않았기 때문이며, 부분적으로는 당시의 편집기들이 4가지 이상의 글꼴 스타일(굵게/보통 및 이탤릭/보통) 중에서 선택하는 것을 거의 지원하지 않았기 때문이기도 하다.

그 결과, 엄밀하게는 이라고 써야 할 자리에 와 같은 선언을 보는 것이 흔한 일이었다. CSS2나 CSS3 모두 이러한 사용을 지지하지 않지만(예시에서 찾아볼 수 없음), 대부분의 브라우저는 그럼에도 불구하고 이를 유효한 "이름"으로 수용한다.

 제네릭 폰트 

폰트 패밀리는 특정 이름의 글꼴(Heisei Mincho W9와 같은)을 사용할 수 있지만, 결과는 사용자 컴퓨터에 설치된 글꼴에 따라 달라진다. 실제 외관은 브라우저와 시스템에 설치된 글꼴에 따라 달라진다. 예를 들어 마이크로소프트 윈도우에 설치된 모질라 파이어폭스의 기본 설치 환경에서는 세리프(serif)를 타임스 뉴 로먼으로, 산세리프(sans-serif)를 에어리얼로 표시한다.

일반적으로 세리프(Serif), 산세리프(Sans-serif), 모노스페이스(Monospace), 필기체(Cursive)Konqueror를 포함한 극소수의 웹 브라우저만 필기체 변경을 지원한다.와 같은 제네릭 폰트의 일부만이 웹 브라우저에서 사용자가 쉽게 구성할 수 있다.

많은 시스템은 또한 누락된 "잘 알려진" 패밀리를 메트릭 호환 대안으로 교체하기 위해 특수 케이스 글꼴 대체를 수행한다. 예를 들어 윈도우는 Helvetica를 에어리얼로, Times를 타임스 뉴 로먼으로 대체한다. 이러한 패밀리는 CSS 의미에서의 제네릭 폰트가 아니며, 일반적으로 브라우저 수준에서 처리되지 않는다..

 폰트 패밀리 샘플 
 글꼴  예시 (설치된 글꼴에 의존하는 뷰) [caps, sentence, numerals, Greek, Arabic, Russian] Agency FB ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Albertina ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Antiqua ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Architect ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   BankFuturistic ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   BankGothic ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Blackletter ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Blagovest ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Calibri ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Comic Sans MS ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Consolas ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Courier ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Garamond ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Georgia ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Helvetica ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Impact ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Minion ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Modern ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Open Sans ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Palatino ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Perpetua ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Swiss ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Tahoma ?? ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Times ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Times New Roman ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык  Tw Cen MT ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык   Verdana ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789  αβγ  عربي  язык  

 같이 보기 
 글꼴 목록
 웹 타이포그래피

 각주 

분류:HTML
분류:조판