목차
글꼴 속성 설정은 스타일 시트의 가장 일반적인 사용 사례 중 하나일 것입니다. 그러나 글꼴을 분류하기 위한 잘 정의되고 보편적으로 인정된 분류법은 존재하지 않으며, 한 글꼴 패밀리에 적용되는 용어가 다른 글꼴 패밀리에는 적합하지 않을 수 있습니다. 예를 들어, 'italic'은 경사진 텍스트를 나타내는 데 일반적으로 사용되지만, 경사진 텍스트는 Oblique, Slanted, Incline, Cursive 또는 Kursiv으로도 표시될 수 있습니다. 따라서 일반적인 글꼴 선택 속성을 특정 글꼴에 매핑하는 것은 간단한 문제가 아닙니다.
글꼴 속성의 보편적이고 인정된 분류법이 없기 때문에, 속성과 글꼴 페이스 간의 매칭은 신중하게 이루어져야 합니다. 속성은 정의된 순서에 따라 매칭되어, 동일한 글꼴 라이브러리가 각 사용자 에이전트에 제공된다고 가정할 때 매칭 프로세스의 결과가 가능한 한 일관되도록 보장합니다.
(위 알고리즘은 각 문자에 대해 CSS 2.2 속성을 다시 방문하지 않아도 되도록 최적화될 수 있습니다.)
(2)에서 언급된 속성별 매칭 규칙은 다음과 같습니다:
| 이름: | font-family |
|---|---|
| 값: | [[ <family-name> | <generic-family> ] [, [ <family-name>| <generic-family>] ]* ] | inherit |
| 초기값: | 사용자 에이전트에 따라 다름 |
| 적용 대상: | 모든 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
이 속성의 값은 글꼴 패밀리 이름 및/또는 일반 패밀리 이름의 우선순위가 지정된 목록입니다. 대부분의 다른 CSS 속성과 달리, 구성 요소 값은 대안임을 나타내기 위해 쉼표로 구분됩니다:
body { font-family: Gill, Helvetica, sans-serif }
많은 글꼴이 "문자 없음" 글리프(일반적으로 열린 상자로 표시됨)를 제공하지만, 이름이 암시하듯이 이는 글꼴에서 찾을 수 없는 문자와 일치하는 것으로 간주되어서는 안 됩니다. (그러나 이는 U+FFFD, 즉 "문자 없음" 문자의 코드 포인트와는 일치하는 것으로 간주되어야 합니다.)
글꼴 패밀리 이름에는 두 가지 유형이 있습니다:
스타일 시트 디자이너는 마지막 대안으로 일반 글꼴 패밀리를 제공하는 것을 권장합니다. 일반 글꼴 패밀리 이름은 키워드이며 따옴표를 사용해서는 안 됩니다.
글꼴 패밀리 이름은 문자열로 따옴표를 사용하거나, 식별자의 시퀀스로 따옴표 없이 제공해야 합니다. 이는 따옴표가 없는 글꼴 패밀리 이름에서 대부분의 구두점 문자와 각 토큰의 시작에 있는 숫자가 이스케이프되어야 함을 의미합니다.
예를 들어 다음 선언은 유효하지 않습니다:
font-family: Red/Black, sans-serif; font-family: "Lucida" Grande, sans-serif; font-family: Ahem!, sans-serif; font-family: test@foo, sans-serif; font-family: #POUND, sans-serif; font-family: Hawaii 5-0, sans-serif;
식별자의 시퀀스가 글꼴 패밀리 이름으로 제공된 경우, 계산된 값은 시퀀스의 모든 식별자를 단일 공백으로 연결하여 문자열로 변환된 이름입니다.
이스케이프 오류를 방지하려면, 공백, 숫자 또는 하이픈 이외의 구두점 문자가 포함된 글꼴 패밀리 이름은 따옴표를 사용하는 것이 좋습니다:
body { font-family: "New Century Schoolbook", serif }
<BODY STYLE="font-family: '21st Century', fantasy">
따옴표가 없는 글꼴 패밀리 이름이 'inherit', 'default', 'initial' 키워드 값이나 일반 글꼴 키워드('serif', 'sans-serif', 'monospace', 'fantasy', 'cursive')와 동일한 경우 '<family-name>' 유형과 일치하지 않습니다. 이러한 이름은 동일한 이름의 키워드와 혼동되지 않도록 따옴표를 사용해야 합니다. 따라서 'font-family: Times, inherit'는 유효하지 않은 선언입니다. 해당 위치의 'inherit'는 유효한 키워드나 유효한 글꼴 패밀리 이름이 될 수 없습니다.
일반 글꼴 패밀리는 대체 메커니즘으로, 지정된 글꼴을 선택할 수 없는 최악의 경우 스타일 시트 작성자의 의도를 일부 보존하는 수단입니다. 최적의 타이포그래피 제어를 위해 스타일 시트에서 특정 이름이 있는 글꼴을 사용하는 것이 좋습니다.
모든 CSS 구현에서 다섯 가지 일반 글꼴 패밀리는 존재하도록 정의되어 있습니다 (반드시 다섯 가지 실제 글꼴로 매핑될 필요는 없습니다). 사용자 에이전트는 기본 기술의 제한 범위 내에서 각 패밀리의 특성을 최대한 표현하는 합리적인 기본 선택을 제공해야 합니다.
사용자 에이전트는 사용자가 일반 글꼴에 대한 대안을 선택할 수 있도록 허용하는 것을 권장합니다.
CSS에서 사용되는 용어로 serif 글꼴의 글리프는 마감 스트로크, 넓어지거나 좁아지는 끝부분, 또는 실제 세리프가 있는 끝부분(슬랩 세리프 포함)을 가지는 경향이 있습니다. 세리프 글꼴은 일반적으로 비례 간격을 가집니다. 'sans-serif' 일반 글꼴 패밀리의 글꼴보다 두꺼운 스트로크와 얇은 스트로크 간의 변화를 더 많이 보이는 경우가 많습니다. CSS는 'serif'라는 용어를 어떤 스크립트의 글꼴에도 적용하지만, 특정 스크립트에는 Mincho(일본어), Sung 또는 Song(중국어), Totum 또는 Kodig(한국어)과 같은 이름이 더 친숙할 수 있습니다. 이렇게 설명된 글꼴은 일반 'serif' 패밀리를 나타내는 데 사용할 수 있습니다.
다음과 같은 글꼴이 이 설명에 맞습니다:
| 라틴 글꼴 | Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit |
| 그리스 글꼴 | Bitstream Cyberbit |
| 키릴 글꼴 | Adobe Minion Cyrillic, Excelsior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinist |
| 히브리어 글꼴 | New Peninim, Raanana, Bitstream Cyberbit |
| 일본어 글꼴 | Ryumin Light-KL, Kyokasho ICA, Futo Min A101 |
| 아랍어 글꼴 | Bitstream Cyberbit |
| 체로키 글꼴 | Lo Cicero Cherokee |
CSS에서 사용되는 용어로 sans-serif 글꼴의 글리프는 스트로크 끝이 단순하며, 퍼짐, 교차 스트로크, 또는 기타 장식이 거의 없거나 없는 경향이 있습니다. sans-serif 글꼴은 일반적으로 비례 간격을 가지고 있습니다. 'serif' 패밀리의 글꼴에 비해 두꺼운 스트로크와 얇은 스트로크 간의 차이가 적은 경우가 많습니다. CSS는 'sans-serif'라는 용어를 어떤 스크립트의 글꼴에도 적용하지만, 특정 스크립트에서는 Gothic(일본어), Kai(중국어), Pathang(한국어)과 같은 이름이 더 익숙할 수 있습니다. 이렇게 설명된 글꼴은 일반 'sans-serif' 패밀리를 나타내는 데 사용할 수 있습니다.
이 설명에 맞는 글꼴의 예는 다음과 같습니다:
| 라틴 글꼴 | MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica |
| 그리스 글꼴 | Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek |
| 키릴 글꼴 | Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion |
| 히브리어 글꼴 | Arial Hebrew, MS Tahoma |
| 일본어 글꼴 | Shin Go, Heisei Kaku Gothic W5 |
| 아랍어 글꼴 | MS Tahoma |
CSS에서 사용되는 용어로 cursive 글꼴의 글리프는 일반적으로 연결된 스트로크나 이탤릭체 글꼴 이상의 필기체 특성을 가지고 있습니다. 글리프는 부분적으로 또는 완전히 연결되어 있으며, 그 결과는 인쇄된 글자 작업보다 필기 펜이나 붓으로 쓴 것처럼 보입니다. 아랍어와 같은 일부 스크립트의 글꼴은 거의 항상 필기체입니다. CSS는 'cursive'라는 용어를 어떤 스크립트의 글꼴에도 적용하지만, Chancery, Brush, Swing, Script와 같은 이름도 글꼴 이름에 사용됩니다.
이 설명에 맞는 글꼴의 예는 다음과 같습니다:
| 라틴 글꼴 | Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery |
| 키릴 글꼴 | ER Architekt |
| 히브리어 글꼴 | Corsiva |
| 아랍어 글꼴 | DecoType Naskh, Monotype Urdu 507 |
CSS에서 사용되는 fantasy 글꼴은 주로 장식적이며, 여전히 문자를 표현합니다 (문자를 표현하지 않는 Pi 또는 Picture 글꼴과는 다릅니다). 예제는 다음과 같습니다:
| 라틴 글꼴 | Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz |
고정 폭 글꼴의 유일한 기준은 모든 글리프가 동일한 고정 폭을 가지는 것입니다. (이는 아랍어와 같은 일부 스크립트를 매우 이상하게 보이게 만들 수 있습니다.) 그 효과는 수동 타자기와 유사하며, 컴퓨터 코드 샘플을 설정하는 데 자주 사용됩니다.
이 설명에 맞는 글꼴의 예는 다음과 같습니다:
| 라틴 글꼴 | Courier, MS Courier New, Prestige, Everson Mono |
| 그리스 글꼴 | MS Courier New, Everson Mono |
| 키릴 글꼴 | ER Kurier, Everson Mono |
| 일본어 글꼴 | Osaka Monospaced |
| 체로키 글꼴 | Everson Mono |
| 이름: | font-style |
|---|---|
| 값: | normal | italic | oblique | inherit |
| 초기값: | normal |
| 적용 대상: | 모든 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
'font-style' 속성은 글꼴 패밀리 내에서 normal(가끔 "roman" 또는 "upright"로 불림), italic, oblique 페이스를 선택합니다.
'normal' 값은 사용자 에이전트의 글꼴 데이터베이스에서 'normal'로 분류된 글꼴을 선택하며, 'oblique'는 'oblique'로 레이블된 글꼴을 선택합니다. 'italic' 값은 'italic'으로 레이블된 글꼴을 선택하거나, 사용 가능한 경우 'oblique'로 레이블된 글꼴을 선택합니다.
사용자 에이전트의 글꼴 데이터베이스에서 'oblique'로 레이블된 글꼴은 실제로는 normal 글꼴을 전자적으로 기울여 생성되었을 수 있습니다.
글꼴 이름에 Oblique, Slanted, Incline이 포함된 글꼴은 보통 사용자 에이전트의 글꼴 데이터베이스에서 'oblique'로 레이블됩니다. Italic, Cursive, 또는 Kursiv이 포함된 글꼴은 보통 'italic'으로 레이블됩니다.
h1, h2, h3 { font-style: italic }
h1 em { font-style: normal }
위 예제에서, 'H1' 내의 강조된 텍스트는 normal 페이스로 나타납니다.
| 이름: | font-variant |
|---|---|
| 값: | normal | small-caps | inherit |
| 초기값: | normal |
| 적용 대상: | 모든 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
글꼴 패밀리 내의 또 다른 변형은 스몰캡스입니다. 스몰캡스 글꼴에서는 소문자가 대문자와 비슷하게 보이지만, 더 작은 크기와 약간 다른 비율을 가집니다. 'font-variant' 속성은 해당 글꼴을 선택합니다.
'normal' 값은 스몰캡스 글꼴이 아닌 글꼴을 선택하며, 'small-caps'는 스몰캡스 글꼴을 선택합니다. CSS 2.2에서는 스몰캡스 글꼴이 normal 글꼴을 사용하여 소문자를 축소된 대문자로 대체하여 생성되는 경우 허용되지만 필수는 아닙니다. 최후의 수단으로 대문자가 스몰캡스 글꼴의 대체로 사용됩니다.
다음 예제는 'H3' 요소를 스몰캡스로 나타내며, 강조된 단어는 oblique로, 'H3' 내의 강조된 단어는 oblique 스몰캡스로 나타납니다:
h3 { font-variant: small-caps }
em { font-style: oblique }
글꼴 패밀리에는 오래된 스타일의 숫자, 스몰캡스 숫자, 압축되거나 확장된 문자 등 다른 변형도 있을 수 있습니다. CSS 2.2에는 이를 선택하는 속성이 없습니다.
참고: 이 속성이 텍스트를 대문자로 변환시키는 경우, 'text-transform'과 동일한 고려 사항이 적용됩니다.
| 이름: | font-weight |
|---|---|
| 값: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
| 초기값: | normal |
| 적용 대상: | 모든 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 텍스트 참조 |
'font-weight' 속성은 글꼴의 두께를 선택합니다. 값 '100'에서 '900'은 순서가 있는 시퀀스를 형성하며, 각 숫자는 이전 값보다 적어도 더 두꺼운 두께를 나타냅니다. 키워드 'normal'은 '400'과 동의어이며, 'bold'는 '700'과 동의어입니다. 'normal' 및 'bold' 이외의 키워드는 글꼴 이름과 혼동되는 경우가 많아 9값 목록에는 숫자 척도가 선택되었습니다.
p { font-weight: normal } /* 400 */
h1 { font-weight: 700 } /* bold */
'bolder' 및 'lighter' 값은 부모로부터 상속된 두께에 상대적인 글꼴 두께를 선택합니다:
strong { font-weight: bolder }
글꼴(글꼴 데이터)은 일반적으로 글꼴의 "두께"를 설명하는 이름 값을 가진 하나 이상의 속성을 가집니다. 이러한 두께 이름에는 보편적이고 수용된 의미가 없습니다. 그 주요 역할은 단일 글꼴 패밀리 내에서 어두움이 다른 페이스를 구분하는 것입니다. 글꼴 패밀리 간의 사용은 상당히 다를 수 있습니다. 예를 들어, 한 글꼴의 "normal" 페이스가 얼마나 어두운지에 따라 Regular, Roman, Book, Medium, Semi- 또는 DemiBold, Bold, 또는 Black으로 설명될 수 있습니다. 이름의 표준 사용법이 없으므로, CSS 2.2의 두께 속성 값은 '400'(또는 'normal') 값이 해당 패밀리의 "normal" 텍스트 페이스에 해당하는 숫자 척도로 제공됩니다. 해당 페이스와 연결된 두께 이름은 일반적으로 Book, Regular, Roman, Normal 또는 때로는 Medium일 것입니다.
패밀리 내의 다른 두께를 숫자 두께 값에 매핑하는 것은 해당 패밀리 내에서 어두움의 순서를 유지하기 위한 것입니다. 그러나 다음의 휴리스틱은 이 경우 할당이 어떻게 이루어지는지 설명합니다:
글꼴 패밀리의 두께가 CSS 척도에 매핑된 후, 누락된 두께는 다음과 같이 선택됩니다:
다음 두 예제는 일반적인 매핑을 보여줍니다.
"Rattlesnake" 패밀리에서 가장 가벼운 것에서 가장 어두운 순으로 네 가지 두께가 있다고 가정합니다: Regular, Medium, Bold, Heavy.
| 사용 가능한 페이스 | 할당 | 누락된 값 채우기 |
|---|---|---|
| "Rattlesnake Regular" | 400 | 100, 200, 300 |
| "Rattlesnake Medium" | 500 | |
| "Rattlesnake Bold" | 700 | 600 |
| "Rattlesnake Heavy" | 800 | 900 |
"Ice Prawn" 패밀리에 여섯 가지 두께가 있다고 가정합니다: Book, Medium, Bold, Heavy, Black, ExtraBlack. 이 경우 사용자 에이전트가 "Ice Prawn ExtraBlack"에는 숫자 값을 할당하지 않기로 결정했다고 가정합니다.
| 사용 가능한 페이스 | 할당 | 누락된 값 채우기 |
|---|---|---|
| "Ice Prawn Book" | 400 | 100, 200, 300 |
| "Ice Prawn Medium" | 500 | |
| "Ice Prawn Bold" | 700 | 600 |
| "Ice Prawn Heavy" | 800 | |
| "Ice Prawn Black" | 900 | |
| "Ice Prawn ExtraBlack" | (없음) |
'bolder' 및 'lighter' 값은 부모 요소에서 상속된 두께 값을 기준으로 계산된 값을 나타냅니다. 아래 차트를 사용하여 사용된 두께를 계산합니다. 자식 요소는 계산된 두께를 상속하며, 'bolder' 또는 'lighter' 값은 상속되지 않습니다.
| 상속된 값 | bolder | lighter |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
위 표는 normal 및 bold 페이스와 함께 얇고 두꺼운 페이스를 포함하는 글꼴 패밀리가 주어졌을 때 상대적인 bolder 또는 lighter 페이스를 선택하는 것과 동일합니다. 주어진 요소에 대해 사용된 정확한 두께 값을 더 세밀하게 제어하려는 작성자는 상대적인 두께 대신 숫자 값을 사용하는 것이 좋습니다.
모든 'font-weight' 값에 대해 더 어두운 페이스가 항상 존재한다는 보장은 없습니다. 예를 들어, 일부 글꼴은 normal 및 bold 페이스만 있을 수 있으며, 다른 글꼴은 여덟 가지 두께를 가질 수 있습니다. 사용자 에이전트가 패밀리 내에서 글꼴 페이스를 두께 값에 매핑하는 방식에 대한 보장은 없습니다. 유일한 보장은 주어진 값의 페이스가 더 가벼운 값의 페이스보다 어둡지 않다는 것입니다.
| 이름: | font-size |
|---|---|
| 값: | <absolute-size> | <relative-size> | <length> | <percentage> | inherit |
| 초기값: | medium |
| 적용 대상: | 모든 요소 |
| 상속됨: | 예 |
| 백분율: | 상속된 글꼴 크기를 참조 |
| 미디어: | 시각적 |
| 계산값: | 절대 길이 |
글꼴 크기는 타이포그래피에서 사용되는 개념인 em 사각형에 해당합니다. 특정 글리프는 em 사각형 밖으로 넘칠 수 있다는 점에 유의하십시오. 값의 의미는 다음과 같습니다:
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
다음 표는 HTML 제목과 절대 글꼴 크기에 대한 절대 크기 매핑에 대한 사용자 에이전트 지침을 제공합니다. 'medium' 값은 사용자의 선호 글꼴 크기이며 참조 중간 값으로 사용됩니다.
| CSS 절대 크기 값 | xx-small | x-small | small | medium | large | x-large | xx-large | |
|---|---|---|---|---|---|---|---|---|
| HTML 글꼴 크기 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
구현자는 'medium' 글꼴 크기와 특정 장치 및 그 특성 (예: 장치 해상도)에 상대적인 절대 크기 키워드에 대한 스케일링 계수 테이블을 작성해야 합니다.
다른 미디어는 다른 스케일링 계수가 필요할 수 있습니다. 또한 사용자 에이전트는 테이블을 계산할 때 글꼴의 품질과 가용성을 고려해야 합니다. 테이블은 글꼴 패밀리마다 다를 수 있습니다.
참고 1. 가독성을 유지하기 위해, 이러한 지침을 적용하는 사용자 에이전트는 컴퓨터 디스플레이에서 EM 단위당 9픽셀 미만의 글꼴 크기를 생성하지 않아야 합니다.
참고 2. CSS1에서는 인접 인덱스 간의 권장 스케일링 계수가 1.5였으나, 사용자 경험은 너무 크다고 입증했습니다. CSS2에서는 컴퓨터 화면에서 인접 인덱스 간의 권장 스케일링 계수가 1.2였으며, 여전히 작은 크기에서 문제가 발생했습니다. 구현 경험은 인접 절대 크기 키워드 간의 고정 비율이 문제가 있다는 것을 입증했으며, 이 사양은 이러한 고정 비율을 권장하지 않습니다.
길이 및 백분율 값은 요소의 글꼴 크기를 계산할 때 글꼴 크기 테이블을 고려해서는 안 됩니다.
음수 값은 허용되지 않습니다.
다른 속성에서는 'em' 및 'ex' 길이 값이 현재 요소의 계산된 글꼴 크기를 참조합니다. 'font-size' 속성에서는 이러한 길이 단위가 부모 요소의 계산된 글꼴 크기를 참조합니다.
응용 프로그램은 컨텍스트에 따라 명시적인 크기를 재해석할 수 있다는 점에 유의하십시오. 예: VR 장면 내에서 글꼴은 원근 왜곡으로 인해 다른 크기를 가질 수 있습니다.
예제:
p { font-size: 16px; }
@media print {
p { font-size: 12pt; }
}
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }
| 이름: | font |
|---|---|
| 값: | [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit |
| 초기값: | 개별 속성 참조 |
| 적용 대상: | 모든 요소 |
| 상속됨: | 예 |
| 백분율: | 개별 속성 참조 |
| 미디어: | 시각적 |
| 계산값: | 개별 속성 참조 |
'font' 속성은, 아래에 설명된 경우를 제외하고, 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', 'font-family'을 스타일 시트의 동일한 위치에서 설정하기 위한 축약형 속성입니다. 이 속성의 문법은 글꼴과 관련된 여러 속성을 설정하기 위한 전통적인 타이포그래피 축약 표기법을 기반으로 합니다.
모든 글꼴 관련 속성은 먼저 초기값으로 재설정되며, 앞 단락에 나열된 속성을 포함합니다. 그런 다음, 축약형 'font' 속성에서 명시적으로 값이 지정된 속성에 대해 해당 값이 설정됩니다. 허용 값 및 초기값에 대한 정의는 이전에 정의된 속성을 참조하세요.
p { font: 12px/14px sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% "New Century Schoolbook", serif }
p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }
두 번째 규칙에서는 글꼴 크기 백분율 값('80%')이 부모 요소의 글꼴 크기를 참조합니다. 세 번째 규칙에서는 line-height 백분율이 요소 자체의 글꼴 크기를 참조합니다.
위 첫 세 규칙에서는 'font-style', 'font-variant' 및 'font-weight'가 명시적으로 언급되지 않았으므로 모두 초기값('normal')로 설정됩니다. 네 번째 규칙은 'font-weight'를 'bold'로, 'font-style'을 'italic'으로 설정하고, 암묵적으로 'font-variant'를 'normal'로 설정합니다.
다섯 번째 규칙은 'font-variant'('small-caps'), 'font-size'(부모 글꼴의 120%), 'line-height'(글꼴 크기의 120배) 및 'font-family'('fantasy')를 설정합니다. 따라서 'normal' 키워드는 남은 두 속성인 'font-style' 및 'font-weight'에 적용됩니다.
다음 값은 시스템 글꼴을 참조합니다:
시스템 글꼴은 전체로만 설정될 수 있습니다. 즉, 글꼴 패밀리, 크기, 두께, 스타일 등이 모두 동시에 설정됩니다. 그런 다음, 필요에 따라 개별적으로 변경할 수 있습니다. 지정된 특성을 가진 글꼴이 주어진 플랫폼에 없는 경우, 사용자 에이전트는 (예: 'small-caption' 글꼴에 대해 더 작은 'caption' 글꼴 버전을 사용할 수 있음) 지능적으로 대체하거나 사용자 에이전트 기본 글꼴을 대체해야 합니다. 일반 글꼴과 마찬가지로, 시스템 글꼴의 경우에도 개별 속성이 운영 체제의 사용 가능한 사용자 환경 설정의 일부가 아닌 경우, 해당 속성은 초기값으로 설정되어야 합니다.
바로 이 점 때문에 이 속성은 "거의" 축약형 속성입니다: 시스템 글꼴은 이 속성으로만 지정할 수 있으며, 'font-family' 자체로는 지정할 수 없으므로, 'font' 속성은 작성자가 하위 속성의 합 이상을 수행할 수 있도록 합니다. 그러나 'font-weight' 와 같은 개별 속성은 여전히 시스템 글꼴에서 가져온 값을 가지며, 독립적으로 변경할 수 있습니다.
button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
button p { font: menu }
button p em { font-weight: bolder }
특정 시스템에서 드롭다운 메뉴에 사용되는 글꼴이, 예를 들어, 9포인트 Charcoal이고 두께가 600인 경우, BUTTON의 하위 요소인 P 요소는 다음 규칙이 적용되는 것처럼 표시됩니다:
button p { font: 600 9px Charcoal }
축약형 'font' 속성은 명시적으로 값이 제공되지 않은 모든 속성을 초기값으로 재설정하므로, 이는 다음 선언과 동일한 효과를 가집니다:
button p {
font-family: Charcoal;
font-style: normal;
font-variant: normal;
font-weight: 600;
font-size: 9px;
line-height: normal;
}