CSS 폰트 모듈 레벨 4

1. 소개

이 명세서는 CSS3 Fonts 명세([CSS-FONTS-3])에서 설명된 기본 폰트 기능을 포함하고 확장합니다.

1.1. 값 정의

이 명세는 CSS 속성 정의 관례 ([CSS2])를 따르며, 값 정의 구문 ([CSS-VALUES-3])을 사용합니다. 이 명세에서 정의되지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에 정의되어 있습니다. 다른 CSS 모듈과의 조합으로 이러한 값 타입의 정의가 확장될 수 있습니다.

속성 정의에 명시된 속성별 값 외에도, 이 명세서에서 정의된 모든 속성은 CSS 범용 키워드도 속성 값으로 허용합니다. 가독성을 위해 반복적으로 명시하지는 않았습니다.

2. 기본 폰트 속성

문자를 렌더링할 때 사용되는 특정 폰트 페이스는 해당 요소에 적용되는 폰트 패밀리와 기타 폰트 속성에 의해 결정됩니다. 이 구조는 각 설정을 독립적으로 변경할 수 있게 해줍니다.

2.1. 폰트 패밀리: font-family 속성

이름:	font-family
값:	[ <font-family-name> \| <generic-font-family> ]#
초기값:	사용자 에이전트에 따라 다름
적용 대상:	모든 요소 및 텍스트
상속 여부:	예
퍼센트 지원:	해당 없음
계산값:	목록, 각 항목은 문자열 또는 <generic-font-family> 키워드
정식 순서:	문법에 따름
애니메이션 유형:	분리형(discrete)

테스트

이 속성은 우선순위가 지정된 폰트 패밀리 이름 또는 일반 패밀리 이름 목록을 지정합니다. 폰트 패밀리는 두께, 너비, 기울기 등이 다양한 여러 페이스 집합을 정의합니다. CSS는 패밀리 이름과 기타 폰트 속성의 조합을 사용하여 개별 페이스를 선택합니다. 이 선택 방식을 사용하면, 디자인 애플리케이션에서 스타일 이름으로 페이스를 선택하는 것과 달리, 폴백이 발생할 때 텍스트 표시의 일정한 규칙성을 어느 정도 보장할 수 있습니다.

구성 값은 대체를 나타내는 쉼표로 구분된 목록입니다. 사용자 에이전트는 패밀리 이름 목록을 순회하여 렌더링할 문자의 글리프를 포함하는 사용 가능한 폰트를 찾을 때까지 반복합니다. (§ 5.3 클러스터 매칭 참고.) 이를 통해 플랫폼별 사용 가능한 폰트의 차이와 개별 폰트의 지원 문자 범위 차이가 허용됩니다.

body {
    font-family: Helvetica, Verdana, sans-serif;
}

Helvetica가 있으면 렌더링에 사용됩니다. Helvetica와 Verdana 둘 다 없으면 일반 폰트 패밀리 sans-serif가 사용됩니다.

폰트 패밀리 이름에는 세 가지 종류가 있으며, 이 중 두 가지를 이 속성에서 사용할 수 있습니다:

<font-family-name>

글꼴 패밀리의 이름입니다. 예를 들어, 위의 예시에서 Helvetica나 Verdana와 같은 이름입니다.

이것은 로컬에 설치된 글꼴일 수도 있고, 웹 폰트일 수도 있습니다.

<generic-font-family>

각 <generic-font-family> 키워드는 일반적인 글꼴 선택지를 나타내며, 지정된 일반 글꼴 범주에 속하는 하나 이상의 로컬 설치된 글꼴의 별칭 역할을 할 수 있습니다. <generic-font-family>는 저자가 지정한 더 구체적인 글꼴 선택지가 없을 때 대체용(폴백)으로 사용할 수 있습니다.

일반 패밀리에는 세 종류가 있습니다:

모든 유니코드 문자에 적용되고 항상 로컬 설치 글꼴과 일치하는 일반 패밀리. 예: monospace.
모든 유니코드 문자에 적용되지만 일부 시스템에서는 로컬 설치 글꼴에 일치하지 않을 수도 있는 일반 패밀리. 예: ui-rounded.
문자 시스템별로 적용되며, 유니코드 문자의 하위 집합에만 적용되고 일부 시스템에서는 로컬 설치 글꼴에 일치하지 않을 수도 있는 일반 패밀리. 예: generic(fangsong).

저자(author)는 대체 글꼴(폴백)을 위해 마지막에 일반 글꼴 패밀리를 추가하는 것이 견고성을 높이는 데 도움이 되며, 더 구체적인 일반 글꼴 패밀리를 지정하면 개별 글꼴이 없을 때에도 특정 스타일을 선호하는 효과를 얻을 수 있습니다.

<generic-font-family> 키워드는 따옴표로 묶을 수 없습니다 (묶으면 <font-family-name>으로 해석됨에 주의하세요).

일반 패밀리 키워드의 집합은 § 2.1.5 일반 글꼴 패밀리에 정의되어 있습니다.

<system-font-family-name>

로컬에 설치된 시스템 글꼴로, 사용에 일부 제약이 따릅니다. 특히 font-family 속성과 함께 사용할 수 없고, font 단축 속성에서만 사용할 수 있습니다.

아래 값은 시스템 글꼴을 참조합니다:

caption: 캡션이 있는 컨트롤(예: 버튼, 드롭다운 등)에 사용되는 글꼴입니다.
icon: 아이콘에 라벨을 표시할 때 사용되는 글꼴입니다.
menu: 메뉴(예: 드롭다운 메뉴, 메뉴 리스트)에서 사용되는 글꼴입니다.
message-box: 대화 상자(dialog box)에서 사용되는 글꼴입니다.
small-caption: 작은 컨트롤의 라벨링에 사용되는 글꼴입니다.
status-bar: 윈도우 상태 표시줄에 사용되는 글꼴입니다.

Tests

system-fonts-serialization.tentative.html (live test) (source)

2.1.1. <font-family-name> 구문

<font-family-name> = <string> | <custom-ident>+

일반 패밀리나 시스템 글꼴 패밀리가 아닌 글꼴 패밀리 이름은 <string>로 따옴표를 사용해 지정하거나, 따옴표를 사용하지 않고 하나 이상의 <custom-ident> 시퀀스로 지정해야 합니다.

참고: 즉, 따옴표 없는 글꼴 패밀리 이름에서는 대부분의 문장 부호와 각 토큰의 시작에 오는 숫자를 이스케이프해야 합니다.

이를 설명하기 위해, 다음 선언들은 유효하지 않습니다:

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;

font-family 값 정의에서 미리 정의된 키워드로 오해받을 수 있는 식별자 또는 CSS 전역 키워드(CSS-wide keywords)는 사용할 수 없습니다.

참고: 실제로 <generic-font-family> 이름이나 시스템 글꼴 이름, 혹은 CSS 전역 키워드와 동일한 이름의 글꼴이 실제로 존재한다면 반드시 따옴표로 감싸야 합니다.

이를 설명하기 위해, 다음과 같이 특이한(일반 패밀리처럼 보이는) 글꼴 패밀리 이름은 따옴표로 감싸져 있기 때문에 유효합니다:

font-family: "sans-serif", sans-serif;
font-family: "default", sans-serif;
font-family: "initial", sans-serif;
font-family: "inherit", sans-serif;

식별자 시퀀스가 <font-family-name>로 지정된 경우, 계산값(computed value)은 시퀀스에 있는 모든 식별자를 공백 하나로 이어 붙인 문자열이 됩니다.

이스케이프 오류를 피하기 위해, 공백, 숫자, 또는 하이픈(-)을 제외한 문장 부호가 포함된 글꼴 패밀리 이름은 따옴표로 감싸는 것이 좋습니다:

따옴표로 감싸면 이스케이프 오류를 방지할 수 있습니다.

body { font-family: "New Century Schoolbook", serif }

<body style="font-family: '21st Century', fantasy">

font family 이름이 font-family 키워드 값(예: CSS 전역 키워드 inherit, 또는 <generic-font-family> 키워드 serif 등)과 같은 경우에는 키워드와의 혼동을 피하기 위해 반드시 따옴표로 감싸야 합니다. UA는 이런 키워드를 <font-family-name> 타입과 일치한다고 간주해서는 안 됩니다.

2.1.2. <generic-font-family> 구문

<generic-font-family> = <generic-font-script-specific>| <generic-font-complete> | <generic-font-incomplete>
<generic-font-script-specific> = generic(fangsong) | generic(kai) | generic(khmer-mul) |  generic(nastaliq)
<generic-font-complete> = serif | sans-serif | system-ui | cursive | fantasy | math | monospace
<generic-font-incomplete> = ui-serif | ui-sans-serif | ui-monospace | ui-rounded

구문이 충돌될 여지를 줄이기 위해 최근에 정의된 일부 generic 글꼴 패밀리는 함수형(funcitonal) 구문을 사용합니다.

body { font-family: "Adobe Fangsong Std R", generic(fangsong), serif}

이 예시의 첫 번째 선택지는 특정 이름의 글꼴로, Fang Song(仿宋) 스타일입니다. 글꼴 패밀리 이름에 공백이 있으므로 따옴표로 감싸야 합니다. 두 번째는 최근 추가된 스크립트 전용 generic 글꼴로, 유니코드 범위가 지정되어 있으므로 일부 시스템에서는 실제 설치 글꼴과 일치하지 않을 수도 있습니다. 그러나 일치한다면 요청한 스타일의 예시가 사용될 것입니다. 세 번째는 모든 시스템에서 일치가 보장되는 보편적인 generic 글꼴입니다.

2.1.3. <system-font-family-name> 구문

<system-font-family-name> = caption | icon | menu | message-box | small-caption | status-bar

2.1.4. 페이스와 패밀리의 관계

폰트 패밀리 이름은 폰트 페이스 집합에 부여된 이름만 지정하며, 개별 페이스를 지정하지 않습니다.

예를 들어, 아래 폰트들이 있을 때, Futura는 매칭되지만 Futura Medium은 매칭되지 않습니다:

참고: CSS에서 폰트 선택에 사용되는 속성 정의는 폰트 분류를 정의하려는 목적이 아닙니다. 타입 디자이너가 생각하는 패밀리는 종종 두께(font-weight), 너비(font-width), 기울기(font-style) 같은 표준 축 이외의 축을 따라 페이스가 다양해질 수 있습니다. 패밀리는 해당 패밀리에만 고유한 축을 따라 다를 수 있습니다. CSS 폰트 선택 메커니즘은 대체가 필요할 때 "가장 가까운" 매칭을 결정하는 방법만 제공합니다.

참고: 폰트들을 패밀리로 그룹화하는 방식은 플랫폼 폰트 관리 API에 따라 달라집니다. 예를 들어, Windows GDI API는 패밀리에 네 개의 페이스만 그룹화할 수 있지만, DirectWrite API, Core Text API, 기타 플랫폼들은 다양한 두께, 너비, 기울기를 가진 폰트 패밀리를 지원합니다 (자세한 내용은 부록 A: 플랫폼 폰트 속성을 CSS 속성으로 매핑 참고).

폰트 패밀리 이름이 어떻게 매칭되는지에 대한 정보는 아래 § 5.1 지역화 이름 매칭을 참고하세요.

2.1.5. 일반 폰트 패밀리

일반 폰트 패밀리는 CSS에서 정의된 표준 이름을 가지지만, 시스템에 존재하는 설치된 폰트 패밀리의 별칭입니다. 단, 하나의 일반 폰트 패밀리는 문자 유니코드 범위, 포함 요소의 콘텐츠 언어, 사용자 설정, 시스템 환경 등 다양한 요인에 따라 서로 다른 타입페이스를 조합한 복합 페이스일 수 있습니다. 서로 다른 일반 폰트 패밀리가 동일한 실제 폰트로 매핑될 수도 있습니다.

테스트

참고: 일반 글꼴 패밀리는 여러 플랫폼에서 널리 구현될 수 있도록 설계된 것이며, 임의의 <font-family-name> (보통 플랫폼 특화 이름)과는 다릅니다. 일반 패밀리는 각 플랫폼별로 다른 글꼴에 매핑될 수 있습니다. 여러 플랫폼에서 텍스트가 특정 디자인을 따르도록 하고 싶고, 구체적으로 어떤 글꼴이 선택되는지는 상관하지 않는 경우 저자는 이러한 일반 글꼴 패밀리 이름을 지정할 수 있습니다.

사용자 에이전트는 일반 글꼴 패밀리에 대해 합리적인 기본 선택을 제공해야 하며, 기반 기술이 허용하는 범위 내에서 각 패밀리의 특성을 가능한 한 잘 표현해야 합니다. 사용자 에이전트는 사용자가 일반 글꼴 패밀리에 대한 대체 글꼴을 선택할 수 있도록 허용하는 것이 권장됩니다.

serif

세리프 글꼴은 마무리 획, 벌어지거나 가늘어지는 끝, 또는 실제 세리프 종결부(슬랩 세리프 포함)를 가진 글리프를 나타냅니다. 세리프 글꼴은 일반적으로 비례폭입니다. 또한 sans-serif 일반 글꼴 패밀리의 글꼴보다 굵은 획과 가는 획 사이의 차이가 더 크게 나타나는 경우가 많습니다.

참고: serif와 sans-serif 는 소수의 문자 표기 체계에만 적용됩니다. CSS에서 일반 글꼴 패밀리로 사용하는 것은 역사적인 이유에서 비롯된 것이며, 초기 웹 개발이 라틴 문자 중심이었던 특성을 반영합니다. 예를 들어 더 적절하고 널리 적용 가능한 이름은 "modulated"와 "monoline"이었을 것입니다. 그러나 웹 호환성상의 이유로 이러한 이름은 바꿀 수 없습니다.

CSS는 "serif"라는 용어를 어떤 문자 체계의 글꼴에도 적용하지만, 특정 문자 체계에는 더 익숙한 다른 이름이 있을 수 있습니다. 예를 들어 Mincho(일본어), Sung 또는 Song(중국어), Batang(한국어) 등이 있습니다. 아랍어의 경우 Naskh 스타일이 serif에 해당합니다.

serif는 항상 하나 이상의 일치하는 글꼴 face에 매핑되어야 합니다.

참고: 해당 글꼴 face의 문자 범위에 대해서는 보장이 없습니다. 따라서 serif에 매핑된 글꼴은 모든 콘텐츠에 사용되지 않을 수도 있습니다.

sans-serif

CSS에서 사용되는 의미의 sans-serif 글꼴의 글리프는 일반적으로 대비가 낮고 (세로 및 가로 획의 굵기가 거의 동일하며) 획의 끝이 단순합니다 (벌어짐, 교차 획, 기타 장식이 없음). sans-serif 글꼴은 일반적으로 비례폭입니다. 또한 serif 계열 글꼴보다 굵은 획과 가는 획 사이의 차이가 적은 경우가 많습니다. CSS는 "sans-serif"라는 용어를 어떤 문자 체계의 글꼴에도 적용하지만, 특정 문자 체계에는 더 익숙한 다른 이름이 있을 수 있습니다. 예를 들어 Gothic(일본어), Hei(중국어), Gulim(한국어) 등이 있습니다.

sans-serif는 항상 하나 이상의 일치하는 글꼴 face에 매핑되어야 합니다.

참고: 해당 글꼴 face의 문자 범위에 대해서는 보장이 없습니다. 따라서 sans-serif 에 매핑된 글꼴은 모든 콘텐츠에 사용되지 않을 수도 있습니다.

sample sans-serif fonts — sans-serif 글꼴 예시

cursive

cursive 글꼴의 글리프는 일반적으로 필기체 스타일을 사용하며, 결과는 인쇄된 글자보다 손글씨나 붓글씨에 더 가깝게 보입니다. CSS는 "cursive"라는 용어를 어떤 문자 체계의 글꼴에도 적용하지만, Chancery, Brush, Swing, Script 같은 이름도 글꼴 이름에 사용됩니다.

fantasy

fantasy 글꼴은 주로 장식적이거나 표현적인 글꼴로, 문자에 대한 장식적 또는 표현적 표현을 포함합니다. 실제 문자를 나타내지 않는 Pi 또는 Picture 글꼴은 여기에 포함되지 않습니다.

monospace

monospace 글꼴의 유일한 기준은 모든 글리프가 동일한 고정 폭을 가진다는 점입니다. 이는 컴퓨터 코드 예시를 표시하는 데 자주 사용됩니다.

monospace는 항상 하나 이상의 일치하는 글꼴 face에 매핑되어야 합니다.

참고: 해당 글꼴 face의 문자 범위에 대해서는 보장이 없습니다. 따라서 monospace에 매핑된 글꼴은 모든 콘텐츠에 사용되지 않을 수도 있습니다.

sample monospace fonts — monospace 글꼴 예시

system-ui

이 일반 글꼴 패밀리는 텍스트를 시스템의 기본 사용자 인터페이스 글꼴로 렌더링할 수 있게 합니다 (다른 § 2.1.5 일반 글꼴 패밀리와 마찬가지로, 복합 글꼴일 수도 있습니다). 이는 UA가 실행 중인 플랫폼에서 사용됩니다. 크로스 플랫폼 UA는 지원하는 각 플랫폼마다 다른 글꼴을 사용해야 합니다. system-ui의 목적은 웹 콘텐츠가 기본 OS의 외형과 느낌에 맞게 통합되도록 하는 데 있습니다. 이는 하이브리드, 웹 또는 크로스 플랫폼 애플리케이션에 유용합니다.

Tests

정확히 어떤 글꼴이 사용되는지는 플랫폼 지원, 플랫폼 언어, 로케일 설정, 사용자 선호, 유니코드 범위 지원, 콘텐츠 언어와 같은 요인에 따라 달라집니다. UA는 선택적으로 system-ui를 사용할 때 플랫폼이 제공하는 텍스트 렌더링 엔진을 사용하여 기본 사용자 인터페이스의 외관에 더 가깝게 맞출 수 있습니다.

다른 일반 글꼴 패밀리와 마찬가지로, system-ui에 대해 구체적 설치 글꼴로의 대체는 계산된 스타일에 영향을 주지 않습니다.

<div id="system-text" style="font-family: system-ui"></div>
...
window.getComputedStyle(document.getElementById("system-text")).getPropertyValue("font-family");

위 스크립트는 system-ui가 시스템 사용자 인터페이스 글꼴 집합으로 어떻게 확장되는지 알아서는 안 됩니다. 특히 위 스크립트는 모든 플랫폼에서 "system-ui"라는 결과를 반환해야 합니다.

참고: system-ui는 플랫폼 환경에 크게 의존합니다. 여러 요소가 기본 사용자 인터페이스 글꼴에 영향을 줄 수 있고, 텍스트 렌더링 지원 수준도 다를 수 있기 때문입니다. 이로 인해 표시되는 서체가 일부 최종 사용자에게는 바람직하지 않을 수 있습니다 (예: Simplified Chinese 사용자는 오래된 Windows에서 고정폭 세리프 글꼴을 받을 수 있으며, lang 속성은 lang="uk"이 러시아 로케일에 있거나 lang="ja"가 중국 로케일에 있을 때 표시 글꼴에 영향을 주지 못할 수 있습니다). 일부 운영체제 공급자는 system-ui를 사용자 지정할 방법을 제공하지 않으며, 일반적으로 사용자가 sans-serif 또는 serif 일반 글꼴 패밀리를 사용자 지정할 수 있게 하는 UA와는 다릅니다. 이름에서 알 수 있듯이 system-ui는 웹 애플리케이션의 UI 요소에 사용하기 위한 것이며, 큰 문단이나 기사 본문용은 아닙니다.

math

이 글꼴 패밀리는 수학식에 사용하도록 의도되었습니다.

이러한 글꼴에는 추가 데이터 (예: OpenType MATH 테이블) 가 포함될 수 있으며, 이는 방정식 레이아웃의 계층적 과정을 돕습니다. 특히 수학 방정식을 조판하는 데 유용한 스타일 변형 및 확장 글리프를 포함할 수 있습니다.

generic(fangsong)

이 글꼴 패밀리는 중국어의 Fang Song (仿宋) 서체에 사용됩니다. Fang Song은 Song (serif)과 Kai (generic(kai)) 사이의 느슨하고 중간적인 형태입니다. 일반적으로 가로 획은 기울어져 있고, 끝부분 장식은 더 작으며, 송 스타일에 비해 획 굵기 변화가 적습니다. Fang Song은 중국 정부의 공식 문서에 자주 사용됩니다.

참고: generic(fangsong)은 로컬 설치 글꼴과 매핑되지 않을 수도 있지만, 매핑된다면 해당 글꼴은 Fang Song 스타일일 것입니다.

샘플 fang song 글꼴로 표시한 중국어 텍스트

generic(kai)

이 글꼴 패밀리는 Simplified 및 Traditional Chinese에서 사용됩니다. 중국어에 서예적 스타일을 제공하는 주요 서체입니다. 뚜렷한 필기 특성을 보여줍니다. Kai는 공식 문서와 교과서에서 흔히 사용됩니다. 대만의 대부분의 공식 문서는 전체 본문에 Kai를 사용합니다. Kai는 다른 서체와 결합되어 본문과 구분이 필요한 텍스트에 사용할 수도 있습니다. 예를 들어 제목, 참고문헌, 인용문, 대화문 등이 있습니다.

참고: generic(kai)는 로컬 설치 글꼴과 매핑되지 않을 수도 있지만, 매핑된다면 해당 글꼴은 Kai 스타일일 것입니다.

샘플 kai 글꼴로 표시한 중국어 텍스트

generic(khmer-mul)

이 글꼴 패밀리는 캄보디아에서 사용되는 크메르어에서 제목과 머리말에 사용되거나 중요한 이름이나 명사를 강조하는 데 사용됩니다. 일반 본문에 사용되는 upright(âksâr chôr) 스타일과 비교하면, âksâr mul은 더 무겁고 더 둥근 글자 형태를 가지며, 더 많은 결합형 글리프를 포함할 수 있습니다.

겉보기에는 더 무거운 스타일이지만, generic(khmer-mul)의 일반 본문에 대한 글꼴 weight는 변하지 않습니다(400).

참고: generic(khmer-mul)은 로컬 설치 글꼴과 매핑되지 않을 수도 있지만, 매핑된다면 해당 글꼴은 âksâr mul 스타일일 것입니다.

다음과 같이 표시된 캄보디아어 텍스트: (상단) âksâr chôr 스타일, Khmer OS Battambang 사용; (중앙) âksâr mul 스타일, Khmer OS Moul v6 사용, 합자가 없음; (하단) âksâr mul 스타일, Khmer OS Moul v4 사용, 두 개의 합자 포함. 모든 글꼴은 Dan Hong 제공.

generic(nastaliq)

이 글꼴 패밀리는 우르두어와 카슈미르어를 표기하는 표준적인 방식이며, 페르시아어 및 기타 언어 텍스트에서도 자주 선호되는 스타일이고, 특히 시와 같은 문학 장르에서 그렇습니다. 핵심 특징으로는 연결된 글자에 대한 기울어진 기준선과, 기본 글자와 부호 모두에 대해 전체적으로 복잡한 형태와 위치 지정이 있습니다. 또한 많은 글리프와 합자에 대해 독특한 형태가 있습니다. 우르두어와 카슈미르어 같은 언어에서는 naskh 스타일로 되돌아가지 않는 것이 중요합니다.

참고: generic(nastaliq)은 로컬 설치 글꼴과 매핑되지 않을 수도 있지만, 매핑된다면 해당 글꼴은 Nastaliq 스타일일 것입니다.

السلام علیکم — Noto Nastaliq Urdu를 사용한 샘플 nastaliq 글꼴로 표시한 우르두어 텍스트

ui-serif

이 글꼴 패밀리는 시스템의 사용자 인터페이스에서 serif 변형에 사용됩니다. ui-serif의 목적은 웹 콘텐츠가 네이티브 OS의 외형과 느낌에 맞게 통합되도록 하는 것입니다.

참고: 적절한 시스템 글꼴이 없는 플랫폼에서는 ui-serif가 어떤 글꼴에도 매핑될 것으로 기대되지 않습니다.

참고: 잠재적 문제는 system-ui에 대한 주석을 참고하세요.

sample ui-serif font — macOS Catalina 및 iOS 13의 샘플 ui-serif 글꼴: New York

ui-sans-serif

이 글꼴 패밀리는 시스템의 사용자 인터페이스에서 sans-serif 변형에 사용됩니다. ui-sans-serif의 목적은 웹 콘텐츠가 네이티브 OS의 외형과 느낌에 맞게 통합되도록 하는 것입니다.

참고: 적절한 시스템 글꼴이 없는 플랫폼에서는 ui-sans-serif가 어떤 글꼴에도 매핑될 것으로 기대되지 않습니다.

참고: 잠재적 문제는 system-ui에 대한 주석을 참고하세요.

sample ui-sans-serif font — macOS Catalina 및 iOS 13의 샘플 ui-sans-serif 글꼴: San Francisco

ui-monospace

이 글꼴 패밀리는 시스템의 사용자 인터페이스에서 monospace 변형에 사용됩니다. ui-monospace의 목적은 웹 콘텐츠가 네이티브 OS의 외형과 느낌에 맞게 통합되도록 하는 것입니다.

참고: 적절한 시스템 글꼴이 없는 플랫폼에서는 ui-monospace가 어떤 글꼴에도 매핑될 것으로 기대되지 않습니다.

참고: 잠재적 문제는 system-ui에 대한 주석을 참고하세요.

sample ui-monospace font — macOS Catalina 및 iOS 13의 샘플 ui-monospace 글꼴: SF Mono

ui-rounded

이 글꼴 패밀리는 시스템의 사용자 인터페이스에서 rounded 변형에 사용됩니다. ui-rounded의 목적은 웹 콘텐츠가 네이티브 OS의 외형과 느낌에 맞게 통합되도록 하는 것입니다.

참고: 적절한 시스템 글꼴이 없는 플랫폼에서는 ui-rounded가 어떤 글꼴에도 매핑될 것으로 기대되지 않습니다.

참고: 잠재적 문제는 system-ui에 대한 주석을 참고하세요.

sample ui-rounded font — macOS Catalina 및 iOS 13의 샘플 ui-rounded 글꼴: SF Rounded

2.2. 폰트 두께: font-weight 속성

Name:	font-weight
Value:	<font-weight-absolute> \| bolder \| lighter
Initial:	normal
Applies to:	all elements and text
Inherited:	yes
Percentages:	n/a
Computed value:	a number, see below
Canonical order:	per grammar
Animation type:	by computed value type

Tests

font-weight 속성은 폰트 글리프의 굵기(weight), 검은 정도(blackness), 또는 획 두께를 지정한다.

이 속성은 다음과 같은 값을 허용한다.

<font-weight-absolute> = [ normal | bold | <number [1,1000]> ]

각 값은 다음과 같은 의미를 가진다.

<number [1,1000]>

각 숫자는 바로 앞 숫자보다 적어도 더 어두운(굵은) 굵기를 나타낸다. 1 이상 1000 이하의 값만 유효하며, 그 외의 모든 값은 invalid이다. 숫자 값은 일반적으로 아래에 나열된 통상적인 굵기 이름에 대응한다.

100 - Thin
200 - Extra Light (Ultra Light)
300 - Light
400 - Normal
500 - Medium
600 - Semi Bold (Demi Bold)
700 - Bold
800 - Extra Bold (Ultra Bold)
900 - Black (Heavy)

Note: 폰트 내부적으로 자체 굵기 이름 매핑을 제공할 수 있지만, 그 매핑은 CSS에서는 고려되지 않는다.

normal

400과 같다.

bold

700과 같다.

bolder

상속된 값보다 더 굵은(weight가 더 큰) 값을 지정한다. § 2.2.1 Relative Weights를 보라.

lighter

상속된 값보다 더 가는(weight가 더 작은) 값을 지정한다. § 2.2.1 Relative Weights를 보라.

9단계 스케일이 아닌 다른 스케일을 사용하는 폰트 포맷은 자신의 스케일을 CSS 스케일에 매핑해야 하며, 이때 400은 대략 Regular, Book, Roman으로 표시되는 페이스에, 700은 대략 Bold로 표시되는 페이스에 대응하도록 해야 한다. 또는 위 스케일에 대략 대응하는 스타일 이름으로부터 굵기를 유추해도 된다. 이 스케일은 상대적이므로, 더 큰 weight 값을 가진 페이스가 더 가늘게 보이는 일은 절대 있어서는 안 된다. 스타일 이름으로부터 굵기를 유추하는 경우, 로케일마다 스타일 이름이 다를 수 있으므로 이를 적절히 처리해야 한다.

2.2.1. 상대적인 두께

bolder와 lighter 값은 부모 요소의 두께에 상대적인 값을 의미합니다. 계산된 두께는 상속된 font-weight 값을 기준으로 아래 표에 따라 결정됩니다.

상속값 (`w`)	bolder	lighter
`w` < 100	400	변경 없음
100 ≤ `w` < 350	400	100
350 ≤ `w` < 550	700	100
550 ≤ `w` < 750	900	400
750 ≤ `w` < 900	900	700
900 ≤ `w`	변경 없음	700

참고: 위 표는 일반/볼드/얇음/굵은 페이스가 있는 폰트 패밀리에서 다음 상대적 bolder/lighter 페이스를 선택하는 것과 같습니다. 특정 요소에 원하는 정확한 두께를 지정하려면 상대값 대신 숫자 값을 사용하는 것이 더 정밀한 제어가 가능합니다.

2.2.2. 없는 두께

대부분의 경우 특정 폰트 패밀리에는 몇 가지 두께만 존재합니다. 지정한 두께의 페이스가 없으면, 가까운 두께의 페이스가 사용됩니다. 일반적으로 볼드 두께는 더 두꺼운 페이스에, 라이트 두께는 더 얇은 페이스에 매핑됩니다. (정확한 정의는 § 5 폰트 매칭 알고리즘 참조)

아래 예시들은 서로 다른 두께에 대해 어떤 페이스가 사용되는지 보여줍니다. 회색은 원하는 두께의 페이스가 없어서, 가까운 두께의 페이스가 사용됨을 나타냅니다.

weight mappings for a family with 400, 700 and 900 weights — 400, 700, 900 두께 페이스만 있는 폰트 패밀리의 두께 매핑

weight mappings for a family with 300, 600 weights — 300, 600 두께 페이스만 있는 폰트 패밀리의 두께 매핑

대부분의 사용자 에이전트는 폰트에 특정 두께가 있다고 모델링하며, 이는 위의 9단계 스케일 중 하나에 해당하는 경우가 많습니다. 대부분의 폰트에서는 그렇지만, 일부 폰트는 다양한 두께 범위를 지원하도록 설정될 수 있습니다. 이 경우, 사용자 에이전트는 요청된 두께에 가장 가까운 두께의 페이스를 사용합니다 (정확한 알고리즘은 § 5 폰트 매칭 알고리즘 참조). 특히, 다양한 두께를 지원하는 폰트를 사용할 때는 범위 내 각 두께별로 폰트가 존재하는 것처럼 동작해야 합니다. TrueType/OpenType 폰트에서 변형을 사용하는 경우, wght 변형을 통해 다양한 두께를 구현합니다. 소수점 두께도 유효합니다.

타이포그래퍼들은 선호하지 않지만, 실제 볼드 페이스가 없는 패밀리에서는 사용자 에이전트가 볼드 페이스를 합성하는 경우가 많습니다. 폰트 매칭 목적에서는 이러한 페이스도 패밀리 내에 실제로 존재하는 것처럼 취급해야 합니다. 작성자가 이 동작을 명시적으로 막으려면 font-synthesis 속성을 사용할 수 있습니다.

2.3. 글꼴 너비: font-width 속성

Name:	font-width
Value:	normal \| <percentage [0,∞]> \| ultra-condensed \| extra-condensed \| condensed \| semi-condensed \| semi-expanded \| expanded \| extra-expanded \| ultra-expanded
Initial:	normal
Applies to:	all elements and text
Inherited:	yes
Percentages:	Not resolved
Computed value:	a percentage, see below
Canonical order:	per grammar
Animation type:	by computed value type

Tests

font-width 속성은 폰트 패밀리에서 보통(normal), 압축(condensed), 확장(expanded)된 페이스를 선택한다. 값은 퍼센트값으로 지정하거나, 아래 표에서 정의된 대로 퍼센트에 매핑되는 키워드로 지정할 수 있다.

Absolute keyword value	Numeric value
ultra-condensed	50%
extra-condensed	62.5%
condensed	75%
semi-condensed	87.5%
normal	100%
semi-expanded	112.5%
expanded	125%
extra-expanded	150%
ultra-expanded	200%

<percentage [0,∞]> 값은 글리프의 비율 너비를 나타내며, 100%는 "보통" 글리프 너비(글꼴 디자이너가 정의한 값)를 의미합니다. 0% 미만의 값은 잘못된 값입니다.

특정 너비 페이스가 없을 때, 100% 미만 값은 더 좁은 페이스가 있으면 그 페이스로, 없으면 더 넓은 페이스로 매핑됩니다. 반대로 100% 이상 값은 더 넓은 페이스가 있으면 그 페이스로, 없으면 더 좁은 페이스로 매핑됩니다. 일부 글꼴은 다양한 너비 값을 지원할 수 있으며, 요청한 너비 값이 글꼴에서 지원되지 않으면 가장 가까운 지원 값을 사용합니다. 같은 매핑 규칙이 적용됩니다 (정확한 알고리즘은 § 5 글꼴 매칭 알고리즘 참조). TrueType / OpenType 글꼴에서 변형을 지원하는 경우, wdth 변형을 통해 다양한 너비를 구현합니다.

아래 그림은 아홉 개의 font-width 속성 설정이 다양한 개별 너비를 가진 글꼴 패밀리에서 글꼴 매칭에 미치는 영향을 보여줍니다. 회색은 해당 너비의 페이스가 없고 다른 너비로 대체된 경우를 나타냅니다:

width mappings for a family with condensed, normal and expanded faces — 압축, 보통, 확장 너비 페이스가 있는 글꼴 패밀리의 너비 매핑

getComputedStyle() 은 값이 어떻게 지정되었든, 또는 키워드가 해당 값에 매핑되었든 관계없이 항상 값을 <percentage>로 직렬화합니다.

2.3.1. 글꼴 너비: font-stretch 레거시 이름 별칭

역사적 이유로, font-stretch 속성이 존재하며, 레거시 이름 별칭이고, font-width와 동일하게 동작합니다.

예를 들어, 아래에서는 레거시 font-stretch가 h1 요소(1단계 제목)에 사용되었습니다.

h1 {font-stretch: condensed; }

해당 제목의 font-width 지정값은 condensed로 설정됩니다.

예를 들어, 아래에서는 font-width가 h1 요소(1단계 제목)에 사용되었습니다.

h1 {font-width: condensed; }

해당 제목의 font-stretch 지정값은 condensed로 설정됩니다.

Tests

사용자 에이전트는 해당 페이스가 없는 글꼴 패밀리(너비 변형 축이 없는 경우)에 대해 압축 또는 확장 페이스를 합성해서는 안 됩니다. 특히, 사용자 에이전트는 해당 페이스를 기하학적으로 늘리거나 줄여서는 안 됩니다.

2.4. 글꼴 스타일: font-style 속성

Name:	font-style
Value:	normal \| italic \| left \| right \| oblique <angle [-90deg,90deg]>?
Initial:	normal
Applies to:	all elements and text
Inherited:	yes
Percentages:	n/a
Computed value:	the keyword specified, plus angle in degrees if specified
Canonical order:	per grammar
Animation type:	by computed value type; normal animates as oblique 0deg

Tests

font-style 속성은 이탤릭(italic) 또는 오블리크(oblique) 페이스를 선택할 수 있게 해 준다. 이탤릭 형태는 일반적으로 필기체(cursive) 성격을 띠는 반면, 오블리크 페이스는 보통 보통체(regular)의 기울어진 버전이다.

회색으로 표시된 Palatino의 “a”와 Baskerville의 “N”을 인위적으로 기울여 렌더링한 것과 실제 이탤릭 버전을 비교해 보자:

artificial sloping vs. real italics — 인위적 기울이기와 실제 이탤릭의 비교

값들은 다음과 같은 의미를 가진다.

normal: 보통(normal) 페이스로 분류된, 이탤릭도 아니고 오블리크도 아닌 페이스와 매칭된다. 이는 "0"의 오블리크 값을 나타낸다.
italic: 이탤릭 페이스로 라벨링된 폰트와 매칭되며, 그런 페이스가 없으면 오블리크 페이스와 매칭된다. 기울기의 각도와 방향은 정의되지 않는다.
left: 양의(시계 방향) 기울기를 가진 이탤릭 페이스와 매칭되며, 그런 페이스가 없으면 양의 기울기를 가진 오블리크 페이스와 매칭된다.
right: 음의(반시계 방향) 기울기를 가진 이탤릭 페이스와 매칭되며, 그런 페이스가 없으면 음의 기울기를 가진 오블리크 페이스와 매칭된다.
oblique <angle [-90deg,90deg]>?: 오블리크 페이스와의 매칭을 제어한다. 양의 각도는 시계 방향 기울기를 나타내며, 음의 각도는 반시계 방향 기울기를 나타낸다. <angle>이 없으면 14deg를 의미한다. (폰트가 내부적으로 "oblique"에 대한 자체 매핑을 제공할 수 있지만, 폰트 내부의 매핑은 무시된다.) 소수 및 음수 값도 허용된다. 그러나 -90deg 미만이거나 90deg 초과인 값은 invalid이다. 오블리크 페이스가 존재하지 않고 font-synthesis-style의 값이 auto이면, 합성(synthetic) 오블리크 페이스가 생성된다.

negative slant — 음의 기울기를 가진 이탤릭 페이스. 폰트는 Misti Hammers가 제작한 Mf Autumn Breeze이다.

하나의 폰트 패밀리는 이탤릭이나 오블리크 페이스를 전혀 포함하지 않을 수도 있고, 이탤릭 페이스만 있고 오블리크는 없을 수도, 오블리크만 있고 이탤릭은 없을 수도, 오블리크와 이탤릭을 모두 포함할 수도, 여러 각도의 오블리크 페이스를 다수 가질 수도 있으며, 이들의 다양한 조합을 가질 수도 있다. 폰트 매칭 루틴은 요청된 각도와 부호가 같은 폰트 중에서 (해당하는 페이스가 여러 개라면) 요청된 각도에 가장 가까운 폰트를 선택한다. 일반적으로 요청된 각도가 11deg 이상인 경우 더 큰 각도를 우선하고, 그렇지 않은 경우 더 작은 각도를 우선한다. (§ 5 Font Matching Algorithm 참조.) 가변 폰트를 사용하는 TrueType / OpenType 폰트의 경우, slnt 가변 축은 오블리크 값을 구현하는 데 사용되고, ital 가변 축의 값 1은 이탤릭 값을 구현하는 데 사용된다.

Note: OpenType의 slnt 축은, 양의 각도가 반시계 방향 기울기를 의미하도록 정의되어 있어 CSS와 방향이 반대이다. CSS 구현에서는 가변 폰트를 사용해 오블리크 페이스를 생성할 때 이 점을 고려해야 한다.

수직 쓰기 모드에서 양수 및 음수 오블리크는 어느 방향으로 기울어져야 하는가? 수직 쓰기에 필요한, 반대 방향(다른 차원)으로의 기울이기는 어떻게 구현해야 하는가?

이탤릭이나 오블리크 페이스가 전혀 없는 경우, 기울어지지 않은(non-obliqued) 페이스에 인위적인 오블리킹 연산을 적용해 오블리크 페이스를 합성할 수 있다. 이러한 인위적으로 오블리크된 페이스의 사용은 font-synthesis 속성을 사용해 비활성화할 수 있다.

Note: 오블리크 페이스는 보통 페이스의 글리프를 인위적으로 기울여 시뮬레이션할 수 있지만, 이는 실제 오블리크와 동일하지 않다. 실제 오블리크에서는 기울기에 상관없이 시각적인 획 두께가 적절히 유지된다. 합성 버전에 의존하기보다는 실제 오블리크 폰트를 사용하는 편이 항상 더 낫다.

폰트 매칭 목적상, 사용자 에이전트는 italic을 oblique의 동의어로 취급할 수 있다. 이 값을 구분해서 취급하는 사용자 에이전트의 경우, italic에 대해서는 합성(synthesis)을 수행해서는 안 된다.

Note: 저자들은, 키릴 문자처럼 이탤릭 형태가 일반 형태와 모양이 크게 다른 스크립트에는 합성 방식이 적합하지 않을 수 있다는 점을 인지해야 한다. 합성 버전에 의존하기보다는 실제 이탤릭 폰트를 사용하는 편이 항상 더 낫다.

Note: 많은 스크립트에는 보통(face) 텍스트 안에 필기체(cursive) 형태를 섞어 쓰는 전통이 없다. 중국어, 일본어, 한국어 폰트는 거의 항상 이탤릭이나 오블리크 페이스가 없다. 여러 스크립트를 지원하는 폰트는 때때로 아랍어 같은 특정 스크립트를 이탤릭 페이스에서 지원되는 글리프 집합에서 제외하기도 한다. 사용자 에이전트는 폰트 간 합성을 구현할 때, 패밀리 내 이탤릭 페이스가 로만(Roman) 페이스와 다른 character map을 가질 수 있으므로, 페이스 간의 character map에 대한 가정을 할 때 주의해야 한다.

2.5. 글꼴 크기: font-size 속성

이름:	font-size
값:	<absolute-size> \| <relative-size> \| <length-percentage [0,∞]> \| math
초기값:	medium
적용 대상:	모든 요소 및 텍스트
상속 여부:	예
퍼센트 지원:	상위 요소의 글꼴 크기를 기준으로 함
계산값:	절대 길이
정식 순서:	문법에 따름
애니메이션 유형:	계산값 타입에 따름

Tests

이 속성은 폰트에서 글리프의 원하는 높이를 나타낸다. 스케일이 가능한 폰트의 경우, font-size는 폰트의 EM 단위에 적용되는 스케일 팩터이다. 스케일이 불가능한 폰트의 경우, font-size는 절대 단위로 변환되며 동일한 절대 좌표 공간에서 선언된 폰트의 font-size와 매칭된다.

Note: 글리프가 자신의 EM 박스에 얼마나 정확히 맞아야 한다는 요구 사항은 없다. 개별 폰트는 동일한 font-size로 렌더링되더라도 서로 다른 시각적 크기를 가질 수 있다. 또한 글리프는 자신의 EM 박스 밖으로 임의로 멀리 렌더링될 수 있으며, containing block을 넘쳐날 경우 ink overflow를 유발할 수 있다.

값은 다음과 같은 의미를 가진다.

<absolute-size>

<absolute-size> 키워드는 사용자 에이전트가 계산하여 유지하는 폰트 크기 테이블의 항목을 가리킨다. § 2.5.1 Absolute Size Keyword Mapping Table을 보라.

가능한 값은 다음과 같다.

[ xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large ]

<relative-size>

<relative-size> 키워드는 부모 요소의 계산된 font-size와 (필요하다면) 폰트 크기 테이블을 기준으로 해석된다. 가능한 값은 다음과 같다.

[ larger | smaller ]

부모 요소가 절대 크기 키워드 매핑 테이블의 키워드 폰트 크기를 가진 경우, larger는 테이블의 다음 항목으로, smaller는 테이블의 이전 항목으로 폰트 크기를 계산할 수 있다. 예를 들어 부모 요소의 폰트 크기가 font-size:medium이라면, 자식 요소에 larger 값을 지정했을 때 자식의 폰트 크기가 font-size:large가 될 수 있다.

위의 키워드 테이블에서 이전·다음 항목을 사용하는 대신, 사용자 에이전트는 단순한 비율을 사용해 부모 요소에 비해 폰트 크기를 늘리거나 줄일 수도 있다. 구체적인 비율은 정의되지 않았지만 1.2–1.5 정도여야 한다. 이 비율은 요소마다 달라질 수 있다.

Note: 시력이 좋지 않은 사용자는 가독성을 높이기 위해 사용자 에이전트가 기본값보다 더 큰 비율을 사용하도록 요청할 수 있다. 또한 사용자 에이전트는 제목 텍스트와 단락 텍스트를 구분해 서로 다른 비율을 사용할 수도 있다.

<length-percentage [0,∞]>

길이(length) 값은 사용자 에이전트의 폰트 테이블과 무관한 절대적인 폰트 크기를 지정한다. 음수 길이 값은 invalid이다.

퍼센트 값은 부모 요소의 계산된 font-size에 대한 절대 폰트 크기를 지정한다. 음수 퍼센트 값은 invalid이다.

Note: 퍼센트 값이나 폰트 기준 길이(font-relative length) (예: em, rem 등)를 사용하면 스타일 시트를 더 견고하고 계단식(cascadable)으로 만들 수 있다.

math

수학적 스케일링 규칙을 특별히 적용해 font-size 속성의 계산값(computed value)을 결정해야 한다.

다음 스타일 시트는 폰트 크기를 지정하는 다양한 방법을 보여 준다.

p { font-size: 12pt; }
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }

Note: 이 속성의 사용 값(used value)은 font-size-adjust 때문에 계산값(computed value)과 다를 수 있다. 그러나 자식 요소는, font-size-adjust의 영향을 받지 않는 계산된 font-size 값을 상속한다 (그렇지 않으면 font-size-adjust의 효과가 누적(compound)될 것이다).

이 속성의 실제 값은, 특정 폰트 크기를 사용할 수 없는 경우 사용 값과 달라질 수 있다.

font-size는 반응형 타이포그래피를 위해 클램핑(clamping)할 수 있다.

font-size: clamp(10px, ..., 36px);

2.5.1. 절대 크기 키워드 매핑 테이블

아래 표는 사용자 에이전트가 절대 크기 스케일링 팩터 및 HTML 제목/절대 글꼴 크기와의 매핑에 대해 참고할 수 있는 가이드라인을 제공합니다. medium 값이 기준 중간값으로 사용됩니다. 사용자 에이전트는 다양한 글꼴 또는 다른 디스플레이 장치 유형에 맞게 이 값들을 미세 조정할 수 있습니다.

CSS absolute-size 값	xx-small	x-small	small	medium	large	x-large	xx-large	xxx-large
스케일링 계수	3/5	3/4	8/9	1	6/5	3/2	2/1	3/1
HTML 제목(heading)	h6		h5	h4	h3	h2	h1
HTML `font` 크기(size)	1		2	3	4	5	6	7

Note: CSS1에서는 인접한 인덱스 사이의 권장 스케일링 계수가 1.5였는데, 사용자 경험상 이것은 너무 큰 값으로 드러났다. CSS2에서는 컴퓨터 화면에서 인접한 인덱스 사이의 권장 스케일링 계수를 1.2로 제안했지만, 이 역시 작은 크기에서 문제를 일으켰다. 새로운 스케일링 계수는 각 인덱스마다 달라지며, 더 나은 가독성을 제공하기 위해 설계되었다.

가독성을 보존하기 위해, 이러한 가이드라인을 적용하는 UA는 EM 단위당 9 디바이스 픽셀보다 작은 폰트 크기를 생성하는 것은 피해야 한다.

2.6. 상대적 크기 조정: font-size-adjust 속성

Name:	font-size-adjust
Value:	none \| <number [0,∞]>
Initial:	none
Applies to:	all elements and text
Inherited:	yes
Percentages:	N/A
Computed value:	a number or the keyword none
Canonical order:	per grammar
Animation type:	by computed value type

Tests

주어진 폰트 크기에서 텍스트의 겉보기 크기와 실제 가독성은 폰트마다 다르게 나타난다. 대문자와 소문자를 구분하는 라틴·키릴 문자 같은 이문자(bicameral) 스크립트에서는, 대문자에 비해 소문자의 상대적 높이가 가독성을 결정하는 중요한 요인이다. 이는 일반적으로 aspect value라 부르며, 폰트의 x-높이를 폰트 크기로 나눈 값과 같다.

Note: 발음 구별 부호(diacritics)를 사용하는 텍스트의 경우, x-높이가 지나치게 크면 발음 구별 부호가 비좁아져 오히려 가독성이 떨어질 수 있다.

폰트 폴백이 발생하는 상황에서는, 폴백 폰트가 원하는 폰트 패밀리와 동일한 aspect value를 가지지 않을 수 있으며, 이 때문에 가독성이 떨어질 수 있다. font-size-adjust 속성은 폰트 폴백이 발생했을 때 텍스트 가독성을 보존하는 한 가지 방법이다. 사용된 폰트에 관계없이 x-높이가 동일하도록 font-size를 조정하는 방식으로 동작한다.

아래 스타일은 원하는 폰트 패밀리로 Verdana를 정의하지만, Verdana를 사용할 수 없는 경우에는 Futura 또는 Times를 사용한다. 한 단락에는 font-size-adjust도 지정되어 있다.

p {
  font-family: Verdana, Futura, Times;
}
p.adj {
  font-size-adjust: 0.545;
}

<p>Lorem ipsum dolor sit amet, ...</p>
<p class="adj">Lorem ipsum dolor sit amet, ...</p>

Verdana는 상대적으로 높은 aspect value(0.545)를 가진다. 이는 소문자가 대문자에 비해 비교적 키가 크다는 뜻이며, 작은 크기에서도 텍스트가 잘 읽힌다는 의미다. Times는 더 낮은 aspect value(0.447)를 가지므로, 폴백이 발생했을 때 font-size-adjust를 지정하지 않으면 작은 크기에서 Verdana에 비해 텍스트 가독성이 떨어진다.

아래는 각 폰트로 렌더링한 텍스트를 비교한 것으로, 열은 각각 Verdana, Futura, Times로 렌더링된 텍스트를 보여준다. 각 행 안의 셀들은 동일한 font-size 값을 사용하며, x-높이 차이를 보여 주기 위해 빨간 선이 포함되어 있다. 상단 절반에서는 각 행이 동일한 font-size 값으로 렌더링된다. 하단 절반도 마찬가지이지만, 이 부분에서는 font-size-adjust 속성이 0.545로 지정되어 있어서, 실제 폰트 크기가 조정되어 각 행에서 Verdana의 x-높이가 유지되도록 한다. 하단 절반에서 작은 텍스트가 각 행을 통틀어 상대적으로 잘 읽히는 것에 주목하라.

text with and without 'font-size-adjust' — font-size-adjust 사용 전후의 텍스트

이 속성은 요소에 대한 aspect value를 지정할 수 있게 해 주며, 이 값은 첫 번째 선택 폰트가 실제로 그 폰트가 사용되든 다른 폰트로 대체되든 간에 그 x-높이가 유지되도록 한다. 값은 다음과 같은 의미를 가진다.

none

폰트의 x-높이를 보존하지 않는다.

<number [0,∞]>

아래 계산식에서 사용할 aspect value를 지정하며, 이를 통해 조정된 폰트 크기를 계산한다:

c  =  ( a / a' ) s

여기서:

s  =  font-size 값
a  =  aspect value, 'font-size-adjust' 속성에 의해 지정된 값
a' =  실제 폰트의 aspect value
c  =  사용할 조정된 font-size

음수 값은 invalid이다.

이 값은 선택된 어떤 폰트에도 적용되지만, 일반적인 사용에서는 font-family 목록의 첫 번째 폰트에 대한 aspect value를 기반으로 해야 한다. 이 값이 정확하게 지정되면, 위 수식에서 (a/a') 항은 첫 번째 폰트에 대해서 사실상 1이 되며, 이 경우 조정은 일어나지 않는다. 값이 부정확하게 지정되면, font-family 목록의 첫 번째 폰트로 텍스트를 렌더링할 때 font-size-adjust를 지원하지 않는 이전 사용자 에이전트에서 표시 결과가 달라질 수 있다.

font-size-adjust의 값은 font-size의 사용 값(used value)에 영향을 주지만, 계산값(computed value)에는 영향을 주지 않는다. 또한 ex, ch처럼 폰트 메트릭에 기반한 상대 단위의 크기에는 영향을 주지만, em 단위의 크기에는 영향을 주지 않는다. line-height의 수치 값은 font-size의 계산값을 기준으로 하기 때문에, font-size-adjust는 line-height의 사용 값에는 영향을 주지 않는다.

Note: CSS에서 저자들은 종종 line-height를 font-size의 배수로 지정한다. font-size-adjust 속성이 font-size의 사용 값에 영향을 주기 때문에, font-size-adjust를 사용할 때는 line-height를 설정할 때 주의해야 한다. 이 상황에서 줄 높이를 너무 촘촘하게 설정하면 줄 간 텍스트가 서로 겹칠 수 있다.

저자는 동일한 내용을 가진 span들을 비교하고, 서로 다른 font-size-adjust 속성을 사용해, 특정 폰트에 대한 aspect value를 계산할 수 있다. 동일한 font-size를 사용하는 경우, 주어진 폰트에 대해 font-size-adjust 값이 정확하면 두 span이 서로 일치하게 된다.

두 개의 테두리(border)가 있는 span을 사용해 폰트의 aspect value를 측정한다. 두 span의 font-size는 동일하지만, font-size-adjust 속성은 오른쪽 span에만 지정된다. 0.5 값에서 시작해, 두 글자 둘레의 테두리가 일치할 때까지 aspect value를 조정할 수 있다.

p {
  font-family: Futura;
  font-size: 500px;
}

span {
  border: solid 1px red;
}

.adjust {
  font-size-adjust: 0.5;
}

<p><span>b</span><span class="adjust">b</span></p>

Futura with an aspect value of 0.5 — aspect value가 0.5인 Futura

오른쪽 상자는 왼쪽 상자보다 조금 크므로, 이 폰트의 aspect value는 0.5보다 작은 값이다. 두 상자가 정렬될 때까지 값을 조정한다.

2.7. 글꼴 단축 속성: font 속성

Name:	font
Value:	[ [ <'font-style'> \|\| <font-variant-css2> \|\| <'font-weight'> \|\| <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] \| <system-font-family-name>
Initial:	개별 속성 참조
Applies to:	모든 요소 및 텍스트
Inherited:	yes
Percentages:	개별 속성 참조
Computed value:	개별 속성 참조
Canonical order:	문법에 따름
Animation type:	개별 속성 참조

Tests

이 속성의 문법은 여러 폰트 관련 속성을 설정하기 위한 전통적인 타이포그래피 축약 표기법(shorthand notation)을 기반으로 한다. 역사적 이유와 하위 호환성 때문에, 이 속성은 거의 축약(shorthand) 속성이다.

font 속성은 (아래에서 설명한 경우를 제외하고) font-style, font-variant, font-weight, font-width, font-size, line-height, font-family를 스타일시트의 동일 위치에서 설정하기 위한 축약(shorthand) 속성이다.

font-variant 속성의 값도 포함할 수 있지만, CSS 2.1에서 지원되는 값만 허용된다. CSS Fonts Level 3 또는 4에서 추가된 font-variant 값은 font 축약 속성 안에서 사용할 수 없다.

<font-variant-css2>
    = normal | small-caps

font-width 속성의 값도 포함할 수 있지만, CSS Fonts Level 3에서 지원되던 값만 허용된다. 이 규격에서 추가된 font-width 값은 font 축약 속성 안에서 사용할 수 없다.

<font-width-css3>
    = normal | ultra-condensed | extra-condensed | condensed |
    semi-condensed | semi-expanded | expanded | extra-expanded |
    ultra-expanded

따라서 폰트 관련 속성과 이들이 font 속성과 상호 작용하는 방식은 다음과 같이 분류할 수 있다.

명시적으로 설정(Set Explicitly)

다음 장문(longhand) 속성들은 font 축약 속성을 통해서도 설정될 수 있다.

font-family
font-size
font-width
font-stretch (css3)
font-style
font-variant-caps (css2)
font-weight
line-height

암묵적으로 리셋(Reset Implicitly)

다음 속성들은 reset-only 하위 속성이며, font 속성으로 설정할 수는 없지만, 초기값으로 리셋된다.

font-feature-settings
font-kerning
font-language-override
font-optical-sizing
font-size-adjust
font-variant-alternates
font-variant-caps (css3 이상)
font-variant-east-asian
font-variant-emoji
font-variant-ligatures
font-variant-numeric
font-variant-position
font-variation-settings

독립적으로 캐스케이딩(Cascaded Independently)

다음 속성들은(비록 이름이 "font-"로 시작하지만) 축약(shorthand) 속성이 아니므로, font 속성에 의해 설정되거나 리셋되지 않는다.

font-palette
font-synthesis-weight
font-synthesis-style
font-synthesis-small-caps

font 속성의 하위 속성 중 Set Explicitly 및 Reset Implicitly 그룹에 포함된 모든 속성은 먼저 초기값으로 리셋된다.

그 다음, Set Explicitly 그룹 중 font 축약 속성 안에서 명시적으로 값이 지정된 속성들은 그 값으로 설정된다. 허용 값과 초기값에 대한 정의는 각 장문 속성 정의를 참조하라.

p { font: 12pt/14pt 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 }
p { font: condensed oblique 12pt "Helvetica Neue", serif; }
p { font: condensed oblique 25deg 753 12pt "Helvetica Neue", serif; }

두 번째 규칙에서, 폰트 크기 퍼센트 값("80%")은 부모 요소의 계산된 font-size를 기준으로 한다. 세 번째 규칙에서 줄 높이 퍼센트("110%")는 해당 요소 자신의 폰트 크기를 기준으로 한다.

처음 세 규칙은 font-variant와 font-weight를 명시적으로 지정하지 않으므로, 이 속성들은 초기값(normal)을 받는다. 공백을 포함하는 폰트 패밀리 이름 "new century schoolbook"은 따옴표로 감싸져 있다는 점에 주의하라. 네 번째 규칙은 font-weight를 bold로, font-style을 italic으로 설정하고, font-variant는 암묵적으로 normal로 설정한다.

다섯 번째 규칙은 font-variant (small-caps), font-size(부모 폰트 크기의 120%), line-height(폰트 크기의 120%), font-family (fantasy)를 설정한다. 따라서 나머지 두 속성 font-style과 font-weight에는 키워드 normal이 적용된다.

여섯 번째 규칙은 font-style, font-width, font-size, font-family를 설정하며, 다른 폰트 속성들은 초기값으로 설정된다.

일곱 번째 규칙은 font-style을 oblique 25deg로, font-weight를 753으로, font-width를 condensed로 설정한다. 이 규칙에서 25deg는 "oblique" 키워드 바로 뒤에 와야 한다는 점에 주의하라.

font-width 속성은 CSS 2.1에서 정의되지 않았으므로, font-width 값을 font 규칙 안에서 사용할 때는, 오래된 사용자 에이전트와의 호환성을 위해 추가 버전을 함께 포함하는 것이 좋다.

p {
  font: 80% sans-serif;   /* 예전 사용자 에이전트용 */
  font: condensed 80% sans-serif;
}

시스템 폰트는 전체로만 설정할 수 있다. 즉, 폰트 패밀리, 크기, 굵기, 스타일 등 모든 속성이 동시에 설정된다. 이후 필요하다면 개별 속성을 다시 변경할 수 있다. 특정 플랫폼에 지정된 특성을 가진 폰트가 없을 경우, 사용자 에이전트는 (예: caption 폰트를 더 작은 버전으로 줄여 small-caption 폰트로 사용하는 식으로) 지능적으로 대체하거나, 사용자 에이전트 기본 폰트를 대체로 사용해야 한다. 일반 폰트와 마찬가지로, 시스템 폰트에 대해 개별 속성 중 일부가 운영 체제의 사용자 설정에 존재하지 않는다면, 해당 속성들은 초기값으로 설정되어야 한다.

이 때문에 이 속성은 "거의" 축약 속성이라고 불린다. 시스템 폰트는 font-family만으로는 지정할 수 없고, 오직 이 속성(font)으로만 지정할 수 있기 때문에, 이 속성은 하위 속성들의 합보다 더 많은 일을 할 수 있다. 하지만 font-weight와 같은 개별 속성들은 여전히 시스템 폰트에서 가져온 값을 받으며, 이후 독립적으로 변경할 수 있다.

위에 나열된 시스템 폰트에 사용된 키워드들은 첫 번째 위치(initial position)에 있을 때만 키워드로 취급된다는 점에 주의하라. 다른 위치에서 같은 문자열은 폰트 패밀리 이름의 일부로 취급된다.

font: menu;        /* 시스템 메뉴에 사용되는 폰트 설정 사용 */
font: large menu;  /* "menu"라는 이름의 폰트 패밀리 사용 */

button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
button p { font: menu }
button p em { font-weight: bolder }

특정 시스템에서 드롭다운 메뉴에 사용되는 폰트가 예를 들어 9포인트, 굵기 600의 Charcoal이라면, BUTTON의 하위 요소인 P 요소는 다음 규칙이 적용된 것처럼 표시될 것이다.

button p { font: 600 9pt Charcoal }

font 축약 속성은 명시적으로 값이 주어지지 않은 모든 속성을 초기값으로 리셋하기 때문에, 이는 다음 선언과 동일한 효과를 가진다.

button p {
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9pt;
  line-height: normal;
  font-family: Charcoal
}

2.8. 합성 폰트 페이스 제어

합성 폰트 페이스는 폰트 패밀리에 적합한 페이스가 없을 때, 요청된 폰트를 근사해 제공하기 위한 폴백 전략입니다.

예를 들어, 사용자 에이전트는 다음과 같은 합성을 할 수 있습니다:

글리프마다 얇은 선을 둘러 그려 볼드 페이스를 합성
일반 글리프를 더 작은 크기로 렌더링하고 위치를 조정하여 스몰캡스, 위 첨자, 아래 첨자를 합성
각 글리프를 기하학적으로 기울여 오블리크 페이스를 합성

합성은 폴백 전략입니다. 최종 결과물이 아무것도 없는 것보다는 나을 수 있지만, 목적에 맞게 디자인된 페이스의 품질 수준에는 도달하지 못합니다.

가변 폰트의 경우, 폰트 디자이너가 하나 이상의 변형 축을 제공했다면 이는 폰트 합성으로 간주되지 않으며, font-synthesis 속성의 영향을 받지 않습니다.

2.8.1. 합성 볼드 제어: font-synthesis-weight 속성

이름:	font-synthesis-weight
값:	auto \| none
초기값:	auto
적용 대상:	모든 요소 및 텍스트
상속됨:	예
백분율:	해당 없음
계산값:	지정된 키워드
정식 순서:	문법에 따름
애니메이션 타입:	불연속
미디어:	시각적

Tests

이 속성은 폰트 패밀리에 굵기(bold) 페이스가 없는 경우, 사용자 에이전트가 굵은 폰트 페이스를 합성해도 되는지 여부를 제어한다.

auto: 굵은 페이스 합성을 허용한다.
none: 굵은 페이스 합성을 허용하지 않는다.

2.8.2. 합성 오블리크 제어: font-synthesis-style 속성

Name:	font-synthesis-style
Value:	auto \| none \| oblique-only
Initial:	auto
Applies to:	all elements and text
Inherited:	yes
Percentages:	N/A
Computed value:	specified keyword
Canonical order:	per grammar
Animation type:	discrete
Media:	visual

Tests

이 속성은 폰트 패밀리에 오블리크(oblique) 페이스가 없는 경우, 사용자 에이전트가 오블리크 폰트 페이스를 합성해도 되는지 여부를 제어한다.

auto: 오블리크 페이스 합성이 허용된다.
none: 오블리크 페이스 합성이 허용되지 않는다.
oblique-only: 오블리크 페이스 합성은 허용되지만, italic이 지정된 경우에는 폴백으로 사용되어서는 안 된다.

수직 텍스트에서, 양의 오블리크 각도의 경우 글리프는 기울어져서 line-over 가장자리가 line-right 쪽으로, line-under 가장자리가 line-left 쪽으로 이동하도록 변형된다. 음의 오블리크 각도의 경우 글리프는 기울어져서 line-over 가장자리가 line-left 쪽으로, line-under 가장자리가 line-right 쪽으로 이동하도록 변형된다. 기울이기는 글리프의 중심을 기준으로 한다.

Tests

synthetic-oblique-out-of-capabilities-range.html (live test) (source)

synthetic oblique in vertical text — 수직 텍스트에서의 합성 오블리크, 양의 오블리크 각도

2.8.3. 합성 스몰캡스 제어: font-synthesis-small-caps 속성

이름:	font-synthesis-small-caps
값:	auto \| none
초기값:	auto
적용 대상:	모든 요소 및 텍스트
상속됨:	예
백분율:	해당 없음
계산값:	지정된 키워드
정식 순서:	문법에 따름
애니메이션 타입:	불연속

테스트

이 속성은 사용자 에이전트가 폰트 패밀리에 스몰캡스 페이스가 없을 때, 스몰캡스 폰트 페이스를 합성할 수 있는지 제어합니다.

auto: 스몰캡스 페이스 합성을 허용
none: 스몰캡스 페이스 합성을 허용하지 않음

2.8.4. 합성 위첨자/아래첨자 제어: font-synthesis-position 속성

이름:	font-synthesis-position
값:	auto \| none
초기값:	auto
적용 대상:	모든 요소 및 텍스트
상속됨:	예
백분율:	해당 없음
계산값:	지정된 키워드
정식 순서:	문법에 따름
애니메이션 타입:	불연속

테스트

이 속성은 폰트에 font-variant-position에 해당하는 위첨자/아래첨자 글리프가 없을 때, 사용자 에이전트가 이를 합성해야 하는지 제어합니다.

auto: 위첨자/아래첨자 형식 합성을 반드시 수행
none: 위첨자/아래첨자 형식 합성을 허용하지 않음

2.8.5. 합성 페이스 제어: font-synthesis 단축 속성

이름:	font-synthesis
값:	none \| [ weight \|\| style \|\| small-caps \|\| position]
초기값:	weight style small-caps position
적용 대상:	모든 요소 및 텍스트
상속됨:	예
백분율:	해당 없음
계산값:	지정된 키워드들
정식 순서:	문법에 따름
애니메이션 타입:	불연속

Tests

이 속성은 font-synthesis-weight, font-synthesis-style, font-synthesis-small-caps, font-synthesis-position 속성들의 축약(shorthand) 속성이다. 값은 다음과 같이 매핑된다.

font-synthesis 값	font-synthesis-weight 값	font-synthesis-style 값	font-synthesis-small-caps 값	font-synthesis-position 값
none	none	none	none	none
weight	auto	none	none	none
style	none	auto	none	none
small-caps	none	none	auto	none
position	none	none	none	auto
weight style	auto	auto	none	none
weight small-caps	auto	none	auto	none
weight position	auto	none	none	auto
style small-caps	none	auto	auto	none
style position	none	auto	none	auto
small-caps position	none	none	auto	auto
weight style small-caps	auto	auto	auto	none
weight style position	auto	auto	none	auto
weight small-caps position	auto	none	auto	auto
style small-caps position	none	auto	auto	auto
weight style small-caps position	auto	auto	auto	auto

아래 스타일 규칙은 합성된 오블리크 아랍어의 사용을 비활성화한다:

*:lang(ar) { font-synthesis: none; }

3. 글꼴 렌더링 제어

3.1. 글꼴 렌더링 제어 소개

@font-face를 통해 웹 폰트를 다운로드하여 사용할 때, 사용자 에이전트는 폰트가 로딩 중일 때 어떻게 처리할지 알아야 합니다. 대부분의 웹 브라우저는 일정 시간 타임아웃을 적용합니다:

브라우저	타임아웃	폴백	스왑
Chrome 35+	3초	예	예
Opera	3초	예	예
Firefox	3초	예	예
Internet Explorer	0초	예	예
Safari	3초	예	예

Chrome, Firefox는 3초 타임아웃 후 폴백 폰트로 텍스트가 표시됩니다. 이후 스왑이 발생하여, 폰트가 준비되면 의도된 폰트로 다시 렌더링됩니다.
Internet Explorer는 타임아웃이 0초여서 즉시 텍스트를 렌더링합니다. 요청한 폰트가 아직 준비되지 않은 경우 폴백이 사용되고, 폰트가 준비되면 텍스트가 다시 렌더링됩니다.

이러한 기본 동작은 합리적이지만, 브라우저마다 일관성이 부족합니다. 더 나쁜 점은 단일 접근 방식으로는 현대 현행 표준 사용자 경험 및 성능 요구를 모두 충족할 수 없다는 것입니다.

Font Loading API [CSS-FONT-LOADING-3]를 사용하면 개발자가 위 동작 일부를 오버라이드할 수 있지만, 이는 스크립트가 필요하며, 상당한 노력이 들고, 궁극적으로 모든 사례를 커버하기엔 충분하지 않습니다. 또한 개발자는 로딩 스크립트를 인라인하거나 외부 라이브러리를 로드해야 하므로, 폰트가 로딩되기 전 추가 네트워크 지연이 생기고, 텍스트 렌더링이 지연될 수 있습니다.

디자인/성능을 중시하는 웹 개발자는 특정 웹 폰트가 사용자 경험에 얼마나 중요한지 잘 알고 있습니다. 이 명세는 글꼴 타임아웃과 렌더링 동작을 제어할 수 있도록 해줍니다. 즉, 개발자는 다음을 할 수 있습니다:

텍스트를 그릴 준비가 되었을 때의 글꼴 표시 정책을 정의: block 또는 폴백으로 표시
의도한 폰트가 준비되었을 때의 글꼴 표시 정책 정의: 새 폰트로 텍스트를 다시 렌더링하거나 폴백으로 유지
각 폰트별로 사용자 지정 타임아웃 값 정의
각 요소별로 사용자 지정 표시 및 타임아웃 정책 정의

3.2. 글꼴 표시 타임라인

사용자 에이전트가 특정 다운로드된 폰트 페이스를 페이지에서 처음 사용하려고 시도하는 순간, 폰트 페이스의 폰트 다운로드 타이머가 시작됩니다. 이 타이머는 폰트 페이스와 연관된 세 가지 시간 구간— block 기간, swap 기간, failure 기간— 을 거치며, 해당 폰트 페이스를 사용하는 요소의 렌더링 동작을 결정합니다:

첫 번째 구간은 폰트 block 기간입니다. 이 기간 동안 폰트 페이스가 로드되지 않았다면, 해당 폰트 페이스를 사용하려는 요소는 투명 폴백 폰트 페이스로 렌더링해야 합니다. block 기간 중 폰트 페이스가 성공적으로 로드되면, 폰트 페이스가 정상적으로 사용됩니다.
두 번째 구간은 block 기간 직후에 발생하는 폰트 swap 기간입니다. 이 기간 동안 폰트 페이스가 로드되지 않았다면, 해당 폰트 페이스를 사용하려는 요소는 폴백 폰트 페이스로 렌더링해야 합니다. swap 기간 중 폰트 페이스가 성공적으로 로드되면, 폰트 페이스가 정상적으로 사용됩니다.
세 번째 구간은 swap 기간 직후에 발생하는 폰트 failure 기간입니다. 이 기간이 시작될 때 폰트 페이스가 아직 로드되지 않았다면, 실패한 로드로 표시되어 일반 폰트 폴백이 발생합니다. 그렇지 않으면 폰트 페이스가 정상적으로 사용됩니다.

특정 요소에 대해 폴백 폰트 페이스로 렌더링하려면, 사용자 에이전트는 해당 요소의 font-family 목록에서 이미 로드된 첫 번째 폰트 페이스를 찾아, 텍스트 렌더링에 이를 사용해야 합니다. 이 작업은 폴백 폰트 로드를 유발하지 않아야 합니다.

특정 요소에 대해 투명 폴백 폰트 페이스로 렌더링하려면, "폴백 폰트 페이스로 렌더링"에 따라 폰트 페이스를 찾습니다. 선택된 폰트 페이스와 동일한 메트릭을 가진 익명 폰트 페이스를 만들되, 모든 글리프가 "잉크"가 없는(보이지 않는) 상태로, 텍스트 렌더링에 이를 사용합니다. 이 작업은 폴백 폰트 로드를 유발하지 않아야 합니다.

fallback 및 optional은 패밀리 내 일부 페이스는 사용되고, 일부는 폴백이 강제되어 '랜섬 노트'처럼 보일 수 있습니다. 패밀리 내 모든 폰트에 동일한 동작(모두 스왑 또는 모두 폴백)을 요구해야 할까요? 폰트 패밀리 단위로 동작 제어는 @font-feature-values도 참고하세요.

4. 폰트 리소스

4.1. @font-face 규칙

@font-face 규칙은 폰트를 연결할 수 있게 해줍니다. 폰트는 필요할 때 자동으로 가져와 활성화됩니다. 이를 통해 작성자는 특정 플랫폼에 설치된 폰트만 사용하는 것이 아니라, 페이지 디자인 목표에 더 잘 맞는 폰트를 선택할 수 있습니다. 폰트 디스크립터 집합은 폰트 리소스의 위치(로컬 또는 외부)와 개별 페이스의 스타일 특성을 정의합니다. 여러 @font-face 규칙을 이용해 다양한 페이스를 가진 폰트 패밀리를 만들 수 있습니다. CSS 폰트 매칭 규칙을 통해 사용자 에이전트는 필요한 텍스트에만 필요한 페이스를 선택적으로 다운로드할 수 있습니다.

문법은 다음과 같습니다:

@font-face {
  <declaration-list>
}

테스트

@font-face 규칙은 이 명세서에서 정의된 디스크립터를 허용합니다.

각 @font-face 규칙은 모든 폰트 디스크립터에 대해 값을 명시적 또는 암시적으로 지정합니다. 규칙에서 명시적으로 지정하지 않은 값은 각 디스크립터의 초기값을 사용합니다(이 명세서에 명시됨). 이러한 디스크립터는 해당 @font-face 규칙 내에서만 적용되며, 문서 언어 요소에는 적용되지 않습니다. 디스크립터가 어떤 요소에 적용되는지, 값이 자식 요소로 상속되는지 등의 개념은 없습니다. 하나의 @font-face 규칙에 디스크립터가 여러 번 등장하면, 마지막 디스크립터 선언만 사용되고, 앞선 선언들은 모두 무시됩니다.

다운로드 폰트 Gentium 사용 예시:

@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff);
}

p { font-family: Gentium, serif; }

사용자 에이전트는 Gentium을 다운로드하여 p 요소의 텍스트 렌더링에 사용합니다. 폰트 서버가 사용 불가일 경우 기본 serif 폰트가 사용됩니다.

특정 @font-face 규칙 집합은 해당 규칙을 포함한 문서에서 사용할 수 있는 폰트 집합을 정의합니다. 폰트 매칭 시, 이 규칙으로 정의된 폰트가 시스템의 다른 사용 가능한 폰트보다 먼저 고려됩니다.

다운로드된 폰트는 해당 폰트를 참조하는 문서에서만 사용할 수 있습니다. 이 폰트를 활성화하는 과정에서 다른 애플리케이션이나 해당 폰트를 직접 링크하지 않는 문서에는 사용할 수 없게 해야 합니다. 사용자 에이전트 구현자는 설치된 폰트 폴백 과정의 일부로 다른 문서에서 사용 가능한 폰트가 없을 때 다운로드 폰트를 사용하는 것이 편리할 수 있다고 생각할 수 있습니다. 하지만, 이는 보안상 위험이 있어 한 페이지의 내용이 다른 페이지에 영향을 줄 수 있으므로 공격자가 악용할 수 있습니다. 이러한 제한은 캐싱에는 영향이 없으며, 폰트는 다른 웹 리소스와 동일한 방식으로 캐싱됩니다.

Tests

이 at-rule은 CSS의 미래 호환 파싱 규칙을 따릅니다. 선언 블록의 속성처럼, 사용자 에이전트가 지원하지 않는 디스크립터의 선언은 무시되어야 합니다. @font-face 규칙은 font-family와 src 디스크립터를 필요로 하며, 둘 중 하나라도 없으면 @font-face 규칙은 폰트 매칭 알고리즘 수행 시 고려되지 않아야 합니다.

플랫폼 자원이 제한되거나, 다운로드 폰트 리소스 비활성화 기능을 구현한 경우, @font-face 규칙은 단순히 무시되어야 하며, 개별 디스크립터의 동작은 명세된 대로 변경되면 안 됩니다.

4.2. 폰트 패밀리: font-family 디스크립터

이름:	font-family
대상:	@font-face
값:	<font-family-name>
초깃값:	N/A

이 디스크립터는 CSS 폰트 패밀리 이름 매칭에 사용될 폰트 패밀리 이름을 정의합니다. 이는 폰트 데이터 내부에 포함된 폰트 패밀리 이름을 오버라이드합니다. 폰트 패밀리 이름이 사용자의 환경에 이미 존재하는 폰트 패밀리 이름과 동일하다면, 해당 스타일시트를 사용하는 문서에서는 내부 폰트가 가려지게 됩니다. 웹 작성자는 사용자 환경에 존재하는 폰트 패밀리 이름과의 충돌을 걱정하지 않고 자유롭게 font-family 이름을 지정할 수 있습니다. 마찬가지로, 플랫폼 대체 폰트 패밀리는 사용되어서는 안 됩니다.

4.3. 폰트 참조: src 디스크립터

이름:	src
대상:	@font-face
값:	<font-src-list>
초기값:	N/A

이 디스크립터는 폰트 데이터가 포함된 리소스를 지정합니다. 값은 우선순위가 있는 콤마로 구분된 외부 참조 또는 로컬 설치 폰트 페이스 이름 목록입니다. 폰트가 필요할 때 사용자 에이전트는 나열된 참조를 순회하여 성공적으로 파싱 및 활성화할 수 있는 첫 번째 항목을 사용합니다. 이 디스크립터의 파싱은 다른 디스크립터보다 복잡합니다. 파싱 규칙은 § 4.3.1 src 디스크립터 파싱 참고. 폰트 활성화는 파일을 다운로드 또는 디스크에서 읽고, 파싱하고, 경우에 따라 추가적인 UA 의존 단계가 있을 수 있습니다. 데이터가 잘못된 폰트 또는 찾을 수 없는 로컬 폰트 페이스는 무시되고 목록의 다음 폰트를 UA가 로드합니다.

4.3.1. src 디스크립터 파싱

<font-src-list> 생성물을 파싱하려면, 목록을 파싱하되, 각 항목을 <font-src>로 해석한다.

<font-src> = <url> [ format( <font-format> ) ]? [ tech( <font-tech># ) ]?
  | local( <font-family-name> )

<font-format>
    = [ <string> | collection | embedded-opentype | opentype
      | svg | truetype | woff | woff2 ]

<font-tech>
    = [ <font-features-tech> | <color-font-tech>
      | variations | palettes | incremental ]

<font-features-tech>
    = [ features-opentype | features-aat | features-graphite ]

<color-font-tech>
    = [ color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]

Tests

폰트 포맷을 식별하기 위해서는 키워드 사용이 권장되지만, 하위 호환성을 위해 아래의 문자열 형태도 허용되며, 해당 현대 문법을 사용한 것과 동일한 효과를 갖는다.

문자열 형태	동등한 문법
format("woff2")	format(woff2)
format("woff")	format(woff)
format("truetype")	format(truetype)
format("opentype")	format(opentype)
format("collection")	format(collection)
format("woff2-variations")	format(woff2) tech(variations)
format("woff-variations")	format(woff) tech(variations)
format("truetype-variations")	format(truetype) tech(variations)
format("opentype-variations")	format(opentype) tech(variations)

Tests

format-specifiers-variations.html (live test) (source)

Note: CSS WG는 이 포맷 문자열 목록을 앞으로 확장할 계획이 없다.

구성 값(component value)이 올바르게 파싱되었고, UA가 지원하는 폰트 포맷 또는 폰트 기술에 해당한다면, 이를 지원되는 소스 목록에 추가한다. 구성 값을 파싱하는 과정에서 파싱 오류가 발생했거나, 해당 포맷이나 기술이 지원되지 않는 경우에는 지원되는 소스 목록에 추가하지 않는다.

이 과정을 거친 후 지원되는 항목이 하나도 없다면, src 서술자의 값은 파싱 오류가 된다.

이러한 파싱 규칙은 특정 폰트 기술이나 포맷을 지원하지 않는 사용자 에이전트에 대해서도 폰트가 우아하게(fallback) 대체되도록 허용한다.

예를 들어, 증분 전송(incremental transfer)을 지원하지 않는 경우에는 성능을 최적화하기 위해 woff2로 압축된 폰트 버전을 제공한다. 그 다음, 증분 전송에는 압축되지 않은 원본 OpenType 폰트를 제공하고, 필요한 부분만 요청 시 로드되도록 한다.

@font-face {
  font-family: "MyIncrementallyLoadedWebFont";
  src: url("FallbackURLForBrowsersWhichDontSupportIncrementalLoading.woff2") format("woff2");
  src: url("MyIncrementallyLoadedWebFont.otf") format(opentype)  tech(incremental);
}

4.3.2. 개별 src 디스크립터 항목 로딩

CSS 내 다른 URL처럼, URL은 상대경로일 수 있습니다. 이 경우 @font-face 규칙이 포함된 스타일시트 위치를 기준으로 해석됩니다. SVG 폰트의 경우, URL은 SVG 폰트 정의가 포함된 문서 내 요소를 가리킵니다. 요소 참조가 생략되면, 첫 번째로 정의된 폰트가 암시적으로 참조됩니다. 마찬가지로, 여러 폰트를 포함할 수 있는 폰트 컨테이너 포맷은 하나의 @font-face 규칙에 대해 반드시 하나의 폰트만 로딩해야 합니다. 로딩할 폰트는 프래그먼트 식별자(fragment identifier)를 이용해 지정하며, 이는 [RFC8081]에서 정의된 PostScript 이름을 사용합니다.

테스트

font-opentype-collections.html (실시간 테스트) (소스)

준수하는 사용자 에이전트는, 조각 식별자가 PostScript 이름과 정확히 일치하지 않는 한 해당 리소스의 페이스를 사용해서는 안 하며, 주어진 조각 식별자가 유효한 PostScript 이름이 될 수 없는 경우 그 리소스의 다운로드를 건너뛰어야 한다.

src: url(fonts/simple.woff);       /* simple.woff를 스타일시트 위치 기준으로 로드 */
src: url(/fonts/simple.woff);      /* 절대 경로에서 simple.woff 로드 */
src: url(fonts/coll.otc#foo);      /* coll.otc 컬렉션에서 foo 폰트 로드 */
src: url(fonts/coll.woff2#foo);    /* coll.woff2 woff2 컬렉션에서 foo 폰트 로드 */
src: url(fonts.svg#simple);        /* id가 'simple'인 SVG 폰트 로드 */

4.3.3. src 항목 선택

외부 참조는 URL과 그 URL이 참조하는 폰트 리소스 포맷을 설명하는 선택적 힌트로 구성됩니다. 현행 표준 준수 UA는 포맷 힌트가 미지원/알 수 없는 폰트 포맷을 나타내거나, 폰트 기술 중 어떤 것이든 UA가 지원하지 않는 경우, 해당 폰트 리소스 다운로드를 건너뛰어야 합니다. 포맷 힌트가 없으면, UA는 폰트 리소스를 다운로드해야 합니다.

예시: WOFF 2 폰트를 지원하면 로드, 아니면 WOFF 1, 아니면 OpenType 폰트 사용

@font-face {
font-family: bodytext;
src: url(ideal-sans-serif.woff2) format("woff2"),
    url(ideal-sans-serif.woff) format("woff"),
  url(basic-sans-serif.ttf) format("opentype");
}

이 예시에서 woff2가 지원되지 않으면, 지원하지 않는 가상의 "zebra" 포맷은 건너뛰고 opentype 폰트를 다운로드합니다:

src: url(ideal.woff2) format("woff2"),
    url(unsupported.zeb) format("zebra"),
    url(basic.ttf) format("opentype");

여기서는 컬렉션 내의 개별 인스턴스를 로드하거나, 컬렉션이 지원되지 않으면 개별 폰트를 다운로드합니다.

@font-face {
  font-family: 源ノ角ゴシック Code JP;
  src: url(SourceHanCodeJP.otc#Regular) format("collection"),
    url(SourceHanCodeJP-Regular.ttf) format("opentype");
  }

4.3.3.1. 로컬 폰트 폴백

저자가 특정 글꼴의 로컬 복사본을 우선적으로 사용하고, 없을 경우 다운로드받고 싶을 때, local()를 사용할 수 있습니다. local()의 인자로 전달되는 로컬 설치 <font-family-name>은 포맷별 문자열이며, 하나의 글꼴 패밀리 내에서 특정 글꼴 페이스를 고유하게 식별합니다. 이름은 따옴표로 감싸도 되며, 따옴표 없이 쓸 경우 따옴표 없는 글꼴 패밀리 이름 처리 규칙을 따릅니다. 즉, 이름은 식별자 시퀀스여야 하며 공백으로 구분되고, 식별자들을 하나의 공백 문자로 이어 붙여 문자열로 변환합니다. 따라서, CSS 전역 키워드 (예: inherit)나 <generic-font-family> 키워드(예: serif) 등은 local() 내에서 사용할 수 없습니다.

/* Gentium의 레귤러 페이스 */
@font-face {
  font-family: MyGentium;
  src: local(Gentium),    /* 로컬에 설치된 Gentium을 우선 사용 */
    url(Gentium.woff);  /* 없으면 다운로드 */
}

예를 들어, 아래와 같은 local() 사용은 오류가 된다.

@font-face {
  font-family: foo;
  src: local(inherit);
}

OpenType 및 TrueType 폰트의 경우, 이 문자열은 로컬에서 사용 가능한 폰트들의 name 테이블에서 Postscript 이름이나 전체 폰트 이름과만 매칭하는 데 사용된다. 어떤 종류의 이름이 사용되는지는 플랫폼과 폰트에 따라 달라지므로, 저자는 플랫폼 전반에서 올바르게 매칭되도록 두 이름을 모두 포함하는 것이 좋다. 특정 폰트 이름에 대한 플랫폼별 대체는 사용되어서는 안 된다.

/* Gentium의 Bold 페이스 */
@font-face {
  font-family: MyGentium;
  src: local(Gentium Bold),    /* 전체 폰트 이름 */
    local(Gentium-Bold),    /* Postscript 이름 */
    url(GentiumBold.woff);  /* 없으면 다운로드 */
  font-weight: bold;
}

@font-face 규칙이 패밀리 안의 단일 폰트가 가진 특성을 지정하듯이, local()에 사용되는 고유 이름 역시 전체 폰트 패밀리가 아닌 단일 폰트를 지정한다. OpenType 폰트 데이터 관점에서, Postscript 이름은 폰트의 name 테이블에서 nameID = 6인 레코드에 있으며 (자세한 내용은 [OPENTYPE] 참조), Postscript 이름은 OSX의 모든 폰트와 Windows의 Postscript CFF 폰트에서 일반적으로 사용되는 키(key)이다. 전체 폰트 이름(nameID = 4)은 Windows에서 TrueType 글리프를 가진 폰트들의 고유 키로 사용된다.

여러 로케일의 전체 폰트 이름을 가진 OpenType 폰트의 경우, US 영어 버전 (Windows에서는 language ID = 0x409, Macintosh에서는 language ID = 0)을 사용해야 하며, US 영어 전체 폰트 이름이 없는 경우에는 첫 번째 로컬라이제이션을 사용해야 한다 (OpenType 명세에서는 모든 폰트에 최소한 US 영어 이름을 포함할 것을 권고한다). (예: 현재 시스템 로케일이 네덜란드어일 때 네덜란드어 이름을 매칭하는 등) 다른 전체 폰트 이름도 함께 매칭하는 UA는 비준수(non-conformant)로 간주된다.

Note: 이것은 영어를 선호하기 위해서가 아니라, 폰트 버전과 OS 로컬라이제이션 전반에서 매칭 결과가 일관되지 않게 되는 것을 막기 위한 조치이다. 폰트 스타일 이름(예: "Bold")은 여러 언어로 번역되는 경우가 많으며, 사용 가능한 로컬라이제이션 집합은 플랫폼 및 폰트 버전에 따라 크게 달라지기 때문이다.

패밀리 이름(nameID = 1)과 스타일 이름(nameID = 2)을 이어 붙인 값으로 매칭하는 UA는 비준수로 간주된다.

Note: 이 규칙을 통해, 더 큰 패밀리에 속해 있으면서 그렇지 않으면 참조할 수 없는 페이스를 참조하는 것도 가능해진다.

로컬 폰트를 사용하거나 다른 문서에 있는 SVG 폰트를 참조하기:

@font-face {
  font-family: Headline;
  src: local(Futura-Medium),
    url(images/fonts.svg#MyGeometricModern) format("svg");
}

서로 다른 플랫폼의 로컬 일본어 폰트에 대한 별칭 만들기:

@font-face {
  font-family: jpgothic;
  src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
}

더 큰 패밀리 안에서 매칭할 수 없는 폰트 페이스를 참조하기:

@font-face {
  font-family: Hoefler Text Ornaments;
  /* Hoefler Text Regular와 동일한 폰트 속성 보유 */
  src: local(HoeflerText-Ornaments);
}

로컬라이즈된 전체 이름은 매칭에 사용되지 않으므로, 아래 헤더 스타일 규칙을 가진 문서는 시스템 로케일이 핀란드어로 설정되어 있든 아니든 관계없이 항상 기본 serif 폰트로 렌더링된다:

@font-face {
  font-family: SectionHeader;
  src: local("Arial Lihavoitu");  /* Arial Bold의 핀란드어 전체 이름, 매칭 실패해야 함 */
  font-weight: bold;
}

h2 { font-family: SectionHeader, serif; }

준수하는 사용자 에이전트는 아래 예제에서 'gentium.eot' 폰트를 결코 로드하지 않는다. 이 폰트는 src 서술자의 첫 번째 정의에 포함되어 있지만, 같은 @font-face 규칙 안의 두 번째 정의에 의해 덮어써지기 때문이다:

@font-face {
  font-family: MainText;
  src: url(gentium.eot);                     /* 구형 사용자 에이전트용 */
  src: local("Gentium"), url(gentium.woff);  /* src 정의를 덮어씀 */
}

4.4. 폰트 속성 기술자: font-style, font-weight, font-width 기술자

Name:	font-style
For:	@font-face
Value:	auto \| normal \| italic \| left \| right \| oblique [ <angle [-90deg,90deg]>{1,2} ]?
Initial:	auto

Name:	font-weight
For:	@font-face
Value:	auto \| <font-weight-absolute>{1,2}
Initial:	auto

Name:	font-width
For:	@font-face
Value:	auto \| <'font-width'>{1,2}
Initial:	auto

Tests

이들 서술자는 특정 폰트 페이스의 특성을 정의하며, 스타일을 개별 페이스에 매칭하는 과정에서 사용된다. 여러 개의 @font-face 규칙으로 정의된 폰트 패밀리의 경우, 사용자 에이전트는 패밀리에 포함된 모든 페이스를 한꺼번에 다운로드할 수도 있고, 또는 이들 서술자를 이용해 문서에서 실제로 사용되는 스타일과 일치하는 폰트 페이스만 선택적으로 다운로드할 수도 있다. 이 서술자 값의 의미는 대응하는 폰트 속성의 값과 동일하지만, bolder 와 lighter 같은 상대 키워드는 사용할 수 없다. 이러한 서술자가 생략되면 초기값이 사용된 것으로 간주한다. 지정된 값이 같은 이름의 속성이 허용하는 값의 범위를 벗어나면, 그 서술자는 파싱 오류로 처리된다.

이 세 서술자에는 단일 값 대신 범위(range)를 지정할 수 있다. 단일 값이 지정된 경우, 시작점과 끝점이 동일한 범위와 같은 의미를 가진다. 사용자 에이전트는 감소하는 범위를 금지하기 위해, 범위의 시작점과 끝점의 계산값을 서로 바꾸어야 한다. 양 끝점은 포함(inclusive)이다. 이러한 범위는 아래의 Font Matching Algorithm에서 사용된다.

Tests

이 세 서술자의 auto 값은 다음과 같은 효과를 가진다.

폰트 선택 관점에서는, 적절한 normal 값 (normal, normal, 또는 normal)이 선택된 것처럼 폰트를 선택한다.
변형 축(variation axis) 클램핑 관점에서는, 클램핑이 일어나지 않는다.

이들 폰트 페이스 스타일 속성의 값은 기본 폰트 데이터가 암시하는 스타일 대신 사용된다. 이를 통해 저자는 원래 폰트 데이터가 다르게 구성되어 있더라도 다양한 조합으로 페이스를 유연하게 결합할 수 있다. 합성 볼딩(synthetic bolding)과 합성 오블리크(obliquing)를 구현하는 사용자 에이전트는, 폰트 데이터가 암시하는 스타일 속성이 아니라 이 서술자들이 암시하는 경우에만 합성 스타일을 적용해야 한다. 그러나 '@font-face'로 정의된 폰트에 적용되는 변형 값들은, 이 서술자에 지정된 값 (또는 wght 축 조작을 통해 요청된 font-weight를 만족시키는 등 변형 파라미터 적용으로 암시되는 값)과 폰트 파일 자체가 지원하는 값 양쪽 모두로 클램핑된다.

Tests

synthetic-bold-out-of-capabilities-range.html (live test) (source)

이 절에서 정의된 폰트 서술자는 주어진 패밀리에 대해 @font-face 규칙들로 정의된 폰트 집합 안에서 사용할 폰트를 선택할 때 사용된다.

단 하나의 레귤러 페이스만 포함하는 패밀리를 보자.

@font-face {
  font-family: BaskervilleSimple;
  src: url(baskerville-regular.woff2);
}

스타일이 지정되지 않은 텍스트는 @font-face 규칙에 정의된 레귤러 페이스를 사용해 표시된다.

그러나 이탤릭 텍스트는, 별도의 이탤릭 페이스가 정의되어 있지 않으므로 대부분의 사용자 에이전트에서 레귤러 페이스의 글리프를 인위적으로 기울인 합성 오블리크 글리프로 표시된다.

이번에는 실제 이탤릭 페이스가 정의된 패밀리를 보자.

@font-face {
  font-family: BaskervilleFull;
  src: url(baskerville-regular.woff2);
}

@font-face {
  font-family: BaskervilleFull;
  src: url(baskerville-italic.woff2);
  font-style: italic;
}

두 번째 @font-face 규칙은 폰트 리소스 baskerville-italic.woff에 보통 굵기(normal weight), 보통 폭(normal stretch), 그리고 italic 스타일의 속성을 부여한다. 이탤릭 텍스트를 표시할 때 사용자 에이전트는 이 폰트를 사용한다. 이 폰트가 이탤릭 텍스트에 가장 근접한 매치이기 때문이다. 따라서 텍스트는 레귤러 페이스를 인위적으로 기울인 글리프가 아닌, 타이프 디자이너가 설계한 글리프로 표시된다.

특정 패밀리 내에서 어떤 페이스를 선택하는지에 대한 보다 완전한 과정은 font matching 절을 참조하라.

폰트는 자신이 호환되는 font-weight, font-width, font-style 범위를 광고할 수 있다.

@font-face {
  font-family: Lastima;
  src: url(lastima-varfont.woff2);
  font-weight: 100 399;
}

위 @font-face 규칙은 lastima-varfont.woff가 font-weight 값이 100 이상 399 이하일 때 사용되어야 함을 나타낸다. 같은 font-family: Lastima를 지정하는 다른 @font-face 규칙이 있는지에 따라, lastima-varfont.woff가 font-weight 값이 100–399 범위를 벗어나는 경우에도 사용될 수 있다. 자세한 내용은 § 5 Font Matching Algorithm을 보라.

위 예와 마찬가지로, 여러 개의 @font-face 규칙을 하나의 패밀리로 묶어 여러 범위의 font-weight, font-width, 그리고/또는 font-style을 아우를 수 있다.

@font-face {
  font-family: Lastima;
  src: url(lastima-varfont-lightrange.woff2);
  font-weight: 100 399;
}
@font-face {
  font-family: Lastima;
  src: url(lastima-varfont-heavyrange.woff2);
  font-weight: 400 700;
}

위 @font-face 규칙은 lastima-varfont-lightrange.woff가 font-weight 값이 100 이상 399 이하일 때 사용되어야 하고, lastima-varfont-heavyrange.woff는 font-weight 값이 400 이상 700 이하일 때 사용되어야 함을 나타낸다.

4.4.1. 폰트 폭: font-stretch 레거시 명칭 별칭

역사적 이유로, a font-stretch 설명자가 존재하며 이는 레거시 이름 별칭이고 font-width 설명자와 동일하게 동작합니다.

테스트

4.5. 문자 범위: unicode-range 기술자

Name:	unicode-range
For:	@font-face
Value:	<unicode-range-token>#
Initial:	U+0-10FFFF

Tests

font-face-unicode-range-2.html (live test) (source)
font-face-unicode-range-nbsp.html (live test) (source)
font-face-unicode-range.html (visual test) (source)

이 서술자는 선언된 폰트 페이스가 지원할 수 있는 유니코드 코드포인트 집합을 정의한다. 서술자 값은 유니코드 범위 토큰(<unicode-range-token>) 값들의 쉼표로 구분된 목록이다. 이 범위들의 합집합이 코드포인트 집합을 이루며, 주어진 텍스트 런에 대해 폰트 리소스를 다운로드할지 여부를 결정할 때 사용자 에이전트에게 힌트로 사용된다.

각 <unicode-range-token> 값은 "U+" 또는 "u+" 접두사 뒤에 아래 세 가지 형식 중 하나의 코드포인트 범위가 붙은 토큰이다. 이 형식 중 어느 것에도 맞지 않는 범위는 잘못된 것으로 간주되며 선언 전체가 무시된다.

단일 코드포인트 (예: U+416): 1~6자리 16진수로 표현된 하나의 유니코드 코드포인트
구간 범위 (예: U+400-4ff): 두 개의 유니코드 코드포인트를 하이픈으로 연결해 표현하며, 범위의 포함 시작·끝 코드포인트를 나타낸다
와일드카드 범위 (예: U+4??): 꼬리 부분의 '?' 문자가 임의의 16진 숫자를 의미할 때, 이를 통해 암시되는 코드포인트 집합으로 정의된다

개별 코드포인트는 유니코드 문자 코드포인트에 해당하는 16진 값으로 작성한다. 유니코드 코드포인트 값은 0 이상 10FFFF 이하이어야 한다. 코드포인트의 숫자 값은 ASCII 대소문자 구분 없음이다. 구간 범위의 경우, 시작·끝 코드포인트는 위에서 언급한 범위 안에 있어야 하며, 끝 코드포인트는 시작 코드포인트보다 크거나 같아야 한다.

'?'로 지정된 와일드카드 범위 중 첫 자리에 숫자가 없는 경우(예: "U+???")는 유효하며, 첫 자리에 0이 있는 와일드카드 범위와 같다 (예: "U+0???" = "U+0000-0FFF"). 유니코드 코드포인트 범위를 넘어서는 와일드카드 범위는 무효이다. 이 때문에 뒤에 붙을 수 있는 '?' 와일드카드의 최대 개수는 5개이며, UNICODE-RANGE 토큰이 6개까지 허용하더라도 실제로는 5개까지만 유효하다.

unicode-range 서술자 선언 안의 쉼표로 구분된 유니코드 범위 목록에서는 범위들이 서로 겹쳐도 된다. 이 범위들의 합집합이 해당 폰트를 사용할 수 있는 코드포인트 집합을 정의한다. 사용자 에이전트는 이 집합에 속하지 않는 코드포인트에 대해서는 폰트를 다운로드하거나 사용해서는 안 된다. 사용자 에이전트는 동일한 코드포인트 집합을 나타내는 한에서 범위 목록을 다른 형태로 정규화해도 된다.

연관된 폰트가 unicode-range 서술자로 정의된 코드포인트 전체에 대해 글리프를 포함하지 않을 수도 있다. 폰트가 사용될 때의 유효 문자 맵은, unicode-range가 정의한 코드포인트 집합과 폰트의 character map의 교집합이다. 이를 통해 저자는 기저 폰트가 실제로 지원하는 정확한 코드포인트 범위를 신경 쓰지 않고도, 보다 넓은 범위로 지원 영역을 정의할 수 있다.

4.5.1. 문자 범위를 활용한 복합 폰트 정의

여러 개의 @font-face 규칙에서 같은 패밀리와 스타일 서술자 값을 갖되 서로 다른 유니코드 범위를 사용하면, 서로 다른 스크립트에 대해 서로 다른 폰트의 글리프를 섞어 쓰는 합성(composite) 폰트를 만들 수 있다. 이는 단일 스크립트(예: 라틴, 그리스, 키릴 문자)의 글리프만 포함한 폰트들을 결합하는 데 사용할 수도 있고, 저자가 자주 사용되는 문자와 덜 자주 사용되는 문자를 위한 폰트로 하나의 폰트를 분할하는 방식으로 사용할 수도 있다. 사용자 에이전트는 필요한 폰트만 내려받기 때문에 페이지 대역폭 절약에 도움이 된다.

같은 패밀리와 스타일 서술자 값을 가진 일련의 @font-face 규칙들 사이에서 유니코드 범위가 서로 겹치는 경우, 이 규칙들은 정의된 순서의 역순으로 정렬된다. 즉, 나중에 정의된 규칙이 주어진 문자에 대해 가장 먼저 검사된다.

특정 언어 또는 문자에 대한 예시 범위:

unicode-range: U+A5;: 단일 코드 포인트, 엔/위안 기호
unicode-range: U+0-7F;: 기본 ASCII 문자에 대한 코드 범위
unicode-range: U+590-5ff;: 히브리어 문자에 대한 코드 범위
unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;: 일본어 한자, 히라가나, 가타카나 문자와 엔/위안 기호에 대한 코드 범위

BBC는 다양한 언어로 뉴스 서비스를 제공하는데, 이들 중 상당수는 모든 플랫폼에서 잘 지원되지 않는다. @font-face 규칙을 사용하면, BBC는 이미 수동 폰트 다운로드 방식으로 하고 있는 것처럼 이런 언어들 각각에 대해 웹폰트를 제공할 수 있다.

@font-face {
  font-family: BBCBengali;
  src: url(fonts/BBCBengali.woff) format("woff");
  unicode-range: U+00-FF, U+980-9FF;
}

기술 문서는 종종 매우 폭넓은 기호 집합을 필요로 한다. STIX Fonts 프로젝트는 다양한 기술 조판을 표준화된 방식으로 지원하기 위한 폰트 제공을 목표로 하는 프로젝트 중 하나이다. 아래 예시는 유니코드 내 수많은 수학·기술 기호 범위에 대한 글리프를 제공하는 폰트 사용 예를 보여 준다.

@font-face {
  font-family: STIXGeneral;
  src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
  unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
}

이 예시는 저자가 일본어 폰트 안에서 라틴 문자에 사용되는 글리프를 다른 폰트의 글리프로 재정의(override)하는 방법을 보여 준다. 첫 번째 규칙은 범위를 지정하지 않았으므로 전체 범위를 기본값으로 사용한다. 두 번째 규칙에서 지정한 범위는 첫 번째 규칙과 겹치지만 나중에 정의되었기 때문에 우선권을 가진다.

@font-face {
  font-family: JapaneseWithGentium;
  src: local(MSMincho);
  /* 범위를 지정하지 않았으므로 전체 범위가 기본값 */
}

@font-face {
  font-family: JapaneseWithGentium;
  src: url(../fonts/Gentium.woff);
  unicode-range: U+0-2FF;
}

라틴 문자, 일본어 문자, 기타 문자를 서로 다른 폰트 파일로 분리하여 대역폭을 최적화하도록 구성된 패밀리를 생각해 보자.

/* 폴백 폰트 - 크기: 4.5MB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansFallback.woff);
  /* 범위를 지정하지 않았으므로 전체 범위가 기본값 */
}

/* 일본어 글리프 - 크기: 1.2MB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansJapanese.woff);
  unicode-range: U+3000-9FFF, U+ff??;
}

/* 라틴, 그리스, 키릴 문자와 일부
  구두점 및 기호 - 크기: 190KB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSans.woff);
  unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
}

단순한 라틴 텍스트의 경우, 라틴 문자용 폰트만 다운로드된다.

body { font-family: DroidSans; }

<p>This is that</p>

이 경우 사용자 에이전트는 먼저 라틴 문자를 포함하는 폰트(DroidSans.woff)에 대한 unicode-range를 확인한다. 위의 모든 문자가 U+0-5FF 범위에 속하므로, 사용자 에이전트는 폰트를 다운로드하고 해당 폰트로 텍스트를 렌더링한다.

다음으로, 화살표 문자(⇨)를 사용하는 텍스트를 생각해 보자.

<p>This &#x21e8; that<p>

사용자 에이전트는 다시 라틴 문자를 포함하는 폰트의 unicode-range를 먼저 확인한다. U+2000-2300에는 화살표 코드 포인트(U+21E8)가 포함되므로, 사용자 에이전트는 폰트를 다운로드한다. 그러나 이 문자에 대해서는 라틴 폰트에 일치하는 글리프가 없기 때문에, 폰트 매칭에 사용되는 유효 unicode-range에서 이 코드 포인트는 제외된다. 다음으로 사용자 에이전트는 일본어 폰트를 평가한다. 일본어 폰트의 unicode-range인 U+3000-9FFF 및 U+ff??에는 U+21E8이 포함되지 않으므로, 사용자 에이전트는 일본어 폰트를 다운로드하지 않는다. 그다음 폴백 폰트가 고려된다. 폴백 폰트에 대한 @font-face 규칙은 unicode-range를 정의하지 않았으므로, 그 값은 모든 유니코드 코드 포인트 범위로 기본 설정된다. 폴백 폰트가 다운로드되어 화살표 문자를 렌더링하는 데 사용된다.

4.6. 폰트 기능 및 변형: font-feature-settings 및 font-variation-settings 기술자

Name:	font-feature-settings
For:	@font-face
Value:	normal \| <feature-tag-value>#
Initial:	normal

Tests

Name:	font-variation-settings
For:	@font-face
Value:	normal \| [ <string> <number>]#
Initial:	normal

Tests

이들 서술자는 @font-face 규칙으로 정의된 폰트가 렌더링될 때 적용되는 초기 설정을 정의한다. 폰트 선택에는 영향을 주지 않는다. 값은 아래에 정의된 대응 font-feature-settings 및 font-variation-settings 속성과 동일하지만, CSS 전역 키워드는 제외된다는 점이 다르다. 여러 폰트 기능 서술자, 속성 또는 변형을 (선택적으로 이름이 있는 인스턴스와 함께) 사용할 때 텍스트 렌더링에 미치는 누적 효과는 아래의 § 7 Font Feature and Variation Resolution 절에서 자세히 설명된다.

이들 서술자는 전체 요소가 아니라 @font-face 규칙이 나타내는 폰트 객체에 기능과 변형 값을 설정한다. 따라서 이러한 서술자를 사용할 때는, § 5.3 Cluster matching에 따라 하나의 요소 안에서도 일부 글리프에만 해당 기능이 적용되어 렌더링될 수 있다.

4.7. 가변 폰트의 명명된 인스턴스 사용: font-named-instance 기술자

Name:	font-named-instance
For:	@font-face
Value:	auto \| <string>
Initial:	auto

font-named-instance 서술자가 auto가 아닌 값으로 설정된 경우, § 7 Font Feature and Variation Resolution의 해당 단계에서 폰트 파일을 검사하여, <string>으로 주어진 값과 § 5.1 Localized name matching에 정의된 규칙에 따라 로컬라이즈된 이름이 동일한 첫 번째 이름 있는 인스턴스를 찾는다. 그런 인스턴스가 존재하지 않으면, 이 서술자는 'font-named-instance/auto' 값을 가진 것처럼 취급된다. 그렇지 않으면, 이 이름 있는 인스턴스의 변형 축 값들이 § 7 Font Feature and Variation Resolution의 해당 위치에 적용된다.

예를 들어, 아래 @font-face 블록은 "Grotesque"라는 이름의 인스턴스를 적용하되, "XHGT" 축은 값 0.7로 재정의(overriding)한다.

@font-face {
  font-family: "AccuroVar";
  src: url("accurovar.otf") format("opentype");
  font-named-instance: "Grotesque";
  font-variation-settings: "XHGT" 0.7;
}

Note: font-weight, font-width, font-style 속성에 의해 제공되는 변형 축 값은 font-named-instance 서술자의 값보다 먼저 적용되므로, 이름 있는 인스턴스를 사용할 때 이들 속성의 값을 변경할 필요는 없다.

4.8. 폰트 요청 가이드라인

4.8.1. 폰트 로딩 가이드라인

@font-face 규칙은 문서에서 실제로 사용될 때만 폰트 리소스를 지연 로딩(lazy loading)할 수 있도록 설계되었다. 스타일시트는 여러 폰트로 이루어진 라이브러리에 대한 @font-face 규칙들을 포함할 수 있지만, 이 중 일부만 실제로 사용될 수 있다. 사용자 에이전트는 특정 페이지에 적용되는 스타일 규칙 안에서 참조된 폰트만 다운로드해야 한다. 페이지에서 실제로 사용되는지 고려하지 않고 @font-face 규칙에 정의된 모든 폰트를 다운로드하는 사용자 에이전트는 비준수(non-conformant)로 간주된다. 문자 폴백(fallback) 상황에서 폰트가 다운로드될 수 있는 경우, 사용자 에이전트는 주어진 텍스트 런에 대해 계산된 font-family 값에 해당 폰트가 포함되어 있을 때 그 폰트를 다운로드할 수 있다.

@font-face {
  font-family: GeometricModern;
  src: url(font.woff);
}

p {
  /* p 요소가 있는 페이지에서는 이 폰트가 다운로드됨 */
  font-family: GeometricModern, sans-serif;
}

h2 {
  /* h2 요소가 있는 페이지에서, Futura가 로컬에 있더라도 이 폰트가 다운로드될 수 있음 */
  font-family: Futura, GeometricModern, sans-serif;
}

텍스트 콘텐츠가 다운로드 가능한 폰트보다 먼저 로드되는 경우, 사용자 에이전트는 해당 @font-face 블록의 font-display 서술자에 따라 텍스트를 렌더링해야 한다. 폰트 다운로드가 실패하는 경우, 사용자 에이전트는 텍스트를 눈에 보이게 표시해야 한다. 저자들은 가능한 한 큰 레이아웃 재배치를 피하기 위해, 다운로드 폰트와 메트릭이 비슷한 폴백 폰트를 폰트 목록에 함께 넣을 것을 권장한다.

4.8.2. 폰트 가져오기 요구 사항(Font fetching requirements)

선택된 <url> url과 @font-face rule이 주어졌을 때 폰트를 가져오기(fetch a font) 위해서는, fetch url을 호출하되, ruleOrDeclaration은 rule, destination은 "font", CORS 모드는 "cors"로 설정하고, response res와 null, failure 또는 바이트 스트림 stream을 인자로 받는 processResponse를 다음 단계로 정의한다:

stream이 null이면, 반환한다.
stream의 타입에 따라 폰트를 로드한다.

Note: 이것이 저자에게 의미하는 바는, 특별한 조치를 취하지 않으면 폰트는 일반적으로 크로스 오리진으로 로드되지 않는다는 점이다. 사이트는 HTTP 헤더 Access-Control-Allow-Origin을 사용해 폰트 데이터의 크로스 사이트 로딩을 명시적으로 허용할 수 있다. 다른 스킴의 경우, fetch 알고리즘에서 허용하는 범위를 넘어서는 크로스 오리진 로딩을 허용하기 위한 별도의 메커니즘은 정의되지도, 요구되지도 않는다.

Tests

test_datafont_same_origin.html (live test) (source)

아래 예제에서, 문서는 https://example.com/page.html에 위치해 있고, 모든 URL은 사용자 에이전트가 지원하는 유효한 폰트 리소스를 가리킨다고 가정한다.

다음과 같은 src 서술자 값으로 정의된 폰트는 로드된다.

/* 동일 출처(즉, 도메인, 스키마, 포트가 문서와 일치) */
    src: url(fonts/simple.woff);

    /* 리디렉션 없이 data url은 동일 출처로 처리됨 */
    src: url("data:application/font-woff;base64,...");

    /* 교차 출처, 다른 도메인 */
    /* Access-Control-Allow-Origin 응답 헤더가 '*'로 설정됨 */
    src: url(http://another.example.com/fonts/simple.woff);

아래 src 디스크립터 값으로 정의된 글꼴은 로드에 실패합니다:

/* 교차 출처, 다른 스킴 */
    /* 응답에 Access-Control-xxx 헤더 없음 */
    src: url(http://example.com/fonts/simple.woff);

    /* 교차 출처, 다른 도메인 */
    /* 응답에 Access-Control-xxx 헤더 없음 */
    src: url(http://another.example.com/fonts/simple.woff);

4.9. 폰트 페이스별 표시 제어: font-display 서술자

font-display 서술자는 @font-face에 대해, 폰트 페이스가 언제, 어떤 조건에서 다운로드되어 사용할 준비가 되었는지에 따라 어떻게 표시될지를 결정한다.

Name:	font-display
For:	@font-face
Value:	auto \| block \| swap \| fallback \| optional
Initial:	auto

Tests

Note: 이들 모든 값에 대해, 사용자 에이전트는 font-display 구문으로는 직접 표현할 수 없지만, 사용자에게 더 유용한 동작을 제공하기 위해 약간 다른 기간이나 좀 더 정교한 동작을 사용할 수 있다. 또한 사용자에게 더 바람직한 동작으로 저자가 선택한 동작을 재정의하는 기능을 제공할 수도 있다. 예를 들어, 모든 폰트가 0s 길이의 block period를 가지도록 강제하는 식이다.

auto

폰트 표시 정책은 사용자 에이전트가 정의한다.

Note: 많은 브라우저는 block 값으로 지정된 것과 비슷한 기본 정책을 갖는다.

block

폰트 페이스에 짧은 block period (대부분의 경우 3s를 권장)와 무한대의 swap period를 부여한다.

Note: 즉, 폰트가 아직 로드되지 않은 경우 처음에는 텍스트를 "보이지 않게" 그리지만, 로드되자마자 즉시 해당 폰트 페이스로 교체한다.

이 값은 페이지가 사용 가능하려면 특정 폰트로 텍스트를 렌더링하는 것이 필수적인 경우에만 사용해야 한다. 또한 작은 양의 텍스트에만 사용해야 한다.

예를 들어, 잘못 설계된 "아이콘 폰트"는 "⎙"(프린터) 아이콘을 "P" 같은 관련 없는 문자에 매핑할 수 있다. 이 경우 폴백 폰트로 텍스트를 렌더링하면 원하는 아이콘 대신 페이지 전체에 헷갈리는 글자들이 흩어지게 된다. 이런 상황에서는 폴백 폰트를 사용하는 것보다 잠깐 빈 자리를 두는 편이 더 낫다.

(그러나 폴백 폰트는 결국에는 사용된다. 링크 등이 끝내 나타나지 않는 것보다는, 다소 혼란스러운 글자가 보이는 편이 낫기 때문이다.)

더 나은 해결책은 Accessibility Considerations 절에서 설명한다.

swap

폰트 페이스에 극히 짧은 block period (대부분의 경우 100ms 이하 권장)와 무한대의 swap period를 부여한다.

Note: 즉, 폰트 페이스가 아직 로드되지 않은 경우, 브라우저는 폴백 폰트로 텍스트를 바로 그리지만, 폰트 페이스가 로드되는 즉시 그 폰트로 교체한다.

이 값은 특정 폰트로 텍스트를 렌더링하는 것이 페이지에 매우 중요하지만, 어떤 폰트로든 렌더링되면 메시지 자체는 올바르게 전달되는 경우에만 사용해야 한다. 또한 작은 양의 텍스트에만 사용해야 한다.

예를 들어, 웹사이트가 로고를 렌더링하기 위해 커스텀 폰트를 사용하는 경우, 브랜딩 측면에서 로고를 올바르게 렌더링하는 것이 상당히 중요하지만, 어떤 폰트로든 로고 텍스트를 표시하면 최소한 의미는 혼동 없이 전달된다.

fallback

폰트 페이스에 극히 짧은 block period (대부분의 경우 100ms 이하 권장)와 짧은 swap period (대부분의 경우 3s 권장)를 부여한다.

Note: 즉, 폰트가 로드되지 않은 경우 처음에는 폴백 폰트로 텍스트를 렌더링하고, 로드되면 즉시 교체한다. 다만 시간이 너무 많이 지나면, 페이지의 남은 수명 동안에는 계속 폴백 폰트를 사용하게 된다.

이 값은 본문 텍스트나 선택한 폰트를 사용하는 것이 유용하고 바람직하지만, 사용자가 폴백 폰트로 텍스트를 보는 것도 허용 가능한 경우에 사용해야 한다. 큰 양의 텍스트에 사용하기 적합하다.

예를 들어, 많은 양의 본문 텍스트에서는 사용자가 가능한 빨리 읽기 시작할 수 있도록 텍스트를 신속히 렌더링하는 것이 가장 중요하다. 또한 사용자가 읽기 시작한 뒤에는, 새 폰트가 교체되면서 텍스트가 갑자기 "이동"하는 일이 없어야 한다. 이런 움직임은 방해가 되고, 다시 읽던 위치를 찾기 번거롭기 때문이다.

optional

폰트를 "즉시" 로드할 수 있어서 텍스트의 "첫 페인트(first paint)"에 사용할 수 있다면, 해당 폰트를 사용한다.

그렇지 않으면, 이 폰트는 block period와 swap period가 로딩 완료 전에 둘 다 만료된 것처럼 취급된다. 이 때문에 폰트가 사용되지 않게 되면, 사용자 에이전트는 폰트 다운로드를 중단하거나 매우 낮은 우선순위로 다운로드하도록 선택할 수 있다. 사용자 에이전트가 사용자에게 유용하다고 판단하는 경우, 아예 폰트 다운로드를 시작하지 않고 즉시 폴백 폰트를 사용하는 쪽을 택할 수도 있다.

optional 폰트는 로드되는 과정에서 페이지 레이아웃이 "점프"하는 현상을 절대 일으켜서는 안 된다. 사용자 에이전트는 다소 느린 로컬 캐시에서 폰트를 로드할 시간을 주기 위해 optional 폰트를 사용하는 요소의 렌더링을 약간 지연시킬 수는 있지만, 한 번 폴백 폰트로 텍스트가 화면에 그려지고 나면, 페이지 수명 동안 해당 텍스트를 optional 폰트로 다시 렌더링해서는 안 된다.

이 값은 본문 텍스트나, 선택한 폰트가 순전히 장식적인 "있으면 좋은(nice-to-have)" 용도인 그 밖의 텍스트에 사용해야 한다. 첫 방문 시 페이지가 빠르게 렌더링되는 것이 사용자가 완벽한 모양을 즉시 보기 위해 더 오래 기다리는 것보다 더 중요한 경우라면, 언제든 이 값을 사용하는 것이 좋다.

예를 들어, 본문 텍스트는 브라우저 기본 폰트로도 충분히 읽을 수 있지만, 다운로드 가능한 폰트 페이스가 사이트의 미학과 더 잘 어울리고 더 보기 좋을 수 있다. 사이트에 처음 방문하는 사용자들은 일반적으로 표시의 미세한 부분보다 사이트가 얼마나 빨리 사용 가능한지가 훨씬 더 중요하며, optional은 이런 사용자들에게 좋은 동작을 제공한다. 사용자가 나중에 다시 방문하면, 원하는 폰트 페이스가 이미 다운로드를 마쳤을 수도 있고, 이 경우 첫 방문과 재방문 모두 느려지지 않으면서 "의도된" 경험을 제공할 수 있다.

매우 느린 연결을 사용하는 사용자는 "의도된" 경험을 전혀 받지 못할 수도 있지만, optional은 이들이 사이트를 실제로 사용할 수 있게 보장한다. 로딩 시간이 너무 길어 사이트를 떠나 다른 곳으로 가버리는 대신 말이다.

optional 폰트가 일부 텍스트 렌더링에 제때 사용될 수 있는 가능성을 높이려면, 사용자 에이전트가 휴리스틱을 사용해 더 빠르게 접근하거나 일부 텍스트 렌더링을 지연시킬 가치가 있는지 판단하도록 하는 것이 좋다. 예를 들어 HTML에서 폰트가 미리 로드(preload)되었는지 확인하거나, 스타일시트에서 폰트가 보이자마자 (아직 페이지에서 실제로 사용될지 알기 전이라도) 느린 캐시에서 빠른 메모리 캐시로 옮기는 식이다.

그러나 이러한 휴리스틱은 저자가 신뢰할 수 있는 것이 아니다. optional 값은 폰트가 결국 한 번도 사용되지 않는 결과를 초래할 수 있음을 이해해야 한다. 폰트가 실제로 사용될 것이라는 좀 더 높은 보장이 필요하다면, 저자는 fallback 값을 사용하는 것을 고려해야 한다.

4.9.1. @font-feature-values를 통한 폰트 패밀리별 폰트 표시 제어

font-display 서술자는 @font-feature-values에 대해 같은 폰트 패밀리를 대상으로 하는 @font-face 규칙의 "기본" font-display 값을 설정함으로써 폰트 패밀리가 어떻게 표시될지를 결정한다. @font-face 규칙에서 font-display가 생략된 경우, 사용자 에이전트는 해당 폰트 패밀리에 대해 @font-feature-values를 통해 설정된 font-display 값을 사용하며, 그런 값이 없다면 auto를 기본값으로 사용한다.

이 메커니즘은 전체 폰트 패밀리에 대한 기본 표시 정책을 설정하는 데 사용할 수 있으며, 또한 개발자가 직접 제어하지 못하는 @font-face 규칙에 대해서도 표시 정책을 설정할 수 있게 해 준다. 예를 들어, 폰트가 서드파티 폰트 주조소에서 제공되는 경우, 개발자는 @font-face 규칙을 제어할 수 없지만, 제공된 폰트 패밀리에 대한 기본 font-display 정책은 여전히 설정할 수 있다. 전체 폰트 패밀리에 대한 기본 정책을 설정하는 기능은 랜섬 노트 효과(서로 어울리지 않는 폰트 페이스 혼합)를 방지하는 데도 유용한데, 이렇게 하면 표시 정책이 폰트 패밀리 전체에 일괄 적용되기 때문이다.

Name:	font-display
For:	@font-feature-values
Value:	auto \| block \| swap \| fallback \| optional
Initial:	auto

4.10. 기본 폰트 언어 재정의: font-language-override 서술자

Name:	font-language-override
For:	@font-face
Value:	normal \| <string>
Initial:	normal

이 서술자는 @font-face 규칙으로 정의된 폰트가 렌더링될 때 적용되는 초기 설정을 정의한다. 폰트 선택에는 영향을 주지 않는다. 값은 아래에 정의된 font-language-override 속성과 동일하지만, 값 inherit는 제외된다는 점이 다르다. 여러 폰트 기능 서술자, 속성 또는 변형을 사용할 때 텍스트 렌더링에 미치는 누적 효과는 아래의 § 7 Font Feature and Variation Resolution 절에서 자세히 설명된다.

4.11. 기본 폰트 메트릭 재정의: ascent-override, descent-override, line-gap-override 서술자

Name:	ascent-override
For:	@font-face
Value:	normal \| <percentage [0,∞]>
Initial:	normal

Tests

Name:	descent-override
For:	@font-face
Value:	normal \| <percentage [0,∞]>
Initial:	normal

Tests

Name:	line-gap-override
For:	@font-face
Value:	normal \| <percentage [0,∞]>
Initial:	normal

Tests

ascent-override, descent-override, line-gap-override 서술자는 각각 폰트의 ascent 메트릭, descent 메트릭, line gap 메트릭을 정의한다.

서술자 값이 normal인 경우, 해당 메트릭 값은 폰트 파일에서 직접 가져온다.

Note: 사용자 에이전트는 메트릭 값으로 폰트 파일의 서로 다른 위치에서 데이터를 가져올 수 있으며, 이로 인해 텍스트 레이아웃이 서로 다르게 나타날 수 있다.

서술자 값이 percentage인 경우, 해당 메트릭 값은 주어진 퍼센트에 사용된 폰트 크기를 곱한 값으로 계산된다. 음수 값은 파싱 시점에 무효이다.

퍼센트 값은 요소마다 다른 폰트 크기를 기준으로 해석된다.

@font-face {
  font-family: overridden-font;
  ascent-override: 50%;
  ...
}

<span style="font-family: overridden-font; font-size: 20px;">
  Outer span content
  <span style="font-size: 150%;">Inner span content</span>
</span>

바깥 span은 ascent 값을 10px로 사용하고, 안쪽 span은 15px를 사용한다.

기본 폰트(웹폰트)의 메트릭에 맞추기 위해 로컬 폴백 폰트의 메트릭을 재정의할 수 있다. 이렇게 하면 폴백에서 기본 폰트로 전환할 때 레이아웃 이동이 줄어든다.

@font-face {
  font-family: cool-web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: fallback-to-local;
  src: local(Some Local Font);
  /* cool-web-font와 메트릭 값이 일치하도록 재정의 */
  ascent-override: 125%;
  descent-override: 25%;
  line-gap-override: 0%;
}

<div style="font-family: cool-web-font, fallback-to-local">Title goes here</div>
<img src="https://example.com/largeimage" alt="A large image that you don’t want to shift">

사용자 에이전트가 웹폰트 로딩을 마치고 해당 폰트로 전환하더라도, 이미지는 수직으로 이동하지 않는다.

5. 폰트 매칭 알고리즘

아래 알고리즘은 폰트가 개별 텍스트 런에 어떻게 연관되는지를 설명한다. 런 안의 각 문자에 대해 폰트 패밀리가 선택되고, 그 문자에 대한 글리프를 포함하는 특정 폰트 페이스가 선택된다.

폰트 매칭 알고리즘이 사용할 수 있는 설치된 폰트 집합은 명시적으로 정의되지 않는다.

기본 설치 폰트 집합은 UA, 플랫폼, 로캘에 따라 달라진다. 사용자가 웹 페이지 렌더링에 사용 가능한 설치 폰트를 어떤 것으로 할지, 그리고 있다면 어떤 일반 폰트 패밀리에 이 폰트들을 매핑할지를 사용자 스스로 커스터마이즈할 수 있는 것이 중요하다.

UA는 해당 폰트가 어떻게 설치되었는지와 상관없이 모든 설치 폰트를 웹에 노출하도록 선택할 수 있다. 이는 기본 언어가 운영체제에 내장된 폰트로는 지원되지 않는 사용자들에게 국제화 측면에서 좋은 특성을 가질 가능성이 크다.

UA는 또 다른 선택으로, 처음에는 어떤 사용자 설치 폰트도 노출하지 않아 웹에서의 프라이버시를 돕도록 할 수 있다. 사용자가 설치한 폰트 집합은 종종 웹 전반에서 사용자를 추적하기 위한 추적 벡터로 사용되기 때문이다. 그 후 사용자는 자신의 필요에 따라 이 집합에 폰트를 추가하거나 제거할 수 있어야 한다.

UA는 하이브리드 접근을 선택할 수도 있다. 일부 사용자 설치 폰트는 국제화를 위해 처음부터 노출하지만, 나머지는 그렇지 않을 수 있다. 이 경우에도 사용자는 이 초기 집합을 커스터마이즈할 수 있어야 한다.

UA는 국제화와 프라이버시 간 균형을 맞추기 위해, 기본적으로 어떤 폰트를 웹에 노출할지 충분히 숙고된 결정을 내려야 한다. 또한 사용자가 자신의 개별적인 필요를 충족할 수 있도록 폰트를 추가·삭제할 수 있는 편리한 수단을 제공해야 한다.

테스트

5.1. 로컬라이즈된 이름 매칭

일부 폰트 파일 형식은 특정 문자열(예: 패밀리명 또는 명명 인스턴스)의 여러 지역화 버전을 포함할 수 있습니다. UA는 이러한 모든 이름을 기본 플랫폼 로케일, 시스템 API, 문서 인코딩과 관계없이 인식하고 올바르게 매칭해야 합니다.

예를 들어, 아래 나열된 각 폰트에 대해, 저자는 font-family 속성에서 라틴 이름 또는 지역화된 이름을 사용할 수 있으며, 모든 시스템에서 결과는 동일합니다:

UA는 이러한 이름을 대소문자 구분 없이 매칭해야 하며, 유니코드 사양 [UNICODE]에 기술된 "Default Caseless Matching" 알고리즘을 사용해야 합니다. 이 알고리즘은 3.13 "Default Case Algorithms" 섹션에 자세히 설명되어 있습니다. 구체적으로, 알고리즘은 문자열을 정규화하지 않고, 언어별 맞춤을 적용하지 않고 사용해야 합니다. 이 알고리즘의 케이스 폴딩 방식은 Unicode Character Database의 CaseFolding.txt 파일에서 상태 필드가 "C" 또는 "F"인 케이스 매핑을 사용합니다.

참고: 저자에게 이는 폰트 패밀리 이름이 대소문자 구분 없이 매칭되며, 해당 이름이 플랫폼 폰트에 있든, 스타일시트의 @font-face 규칙에 있든 동일하다는 의미입니다. 저자는 실제 폰트 패밀리 이름의 문자 시퀀스와 일치하도록 이름을 지정해야 하며, 특히 발음 구별 기호와 같은 결합 문자를 사용할 때 주의해야 합니다. 예를 들어, 소문자 a(U+0061) 뒤에 결합 링(U+030A)이 있는 패밀리명은 겉보기엔 같아도 결합 시퀀스 대신 미리 조합된 소문자 a-ring(U+00E5)을 사용할 경우 매칭되지 않습니다.

참고: 구현자는 주어진 대소문자 구분 없는 문자열 비교 구현이 반드시 이 알고리즘을 사용하도록 확인해야 하며, 플랫폼 문자열 매칭 루틴이 이를 따를 것이라 가정해서는 안 됩니다. 많은 플랫폼 API가 로케일별 동작이나 문자열 정규화를 사용하기 때문입니다.

5.2. 폰트 스타일 매칭

텍스트 런의 각 문자에 대해 폰트를 선택하는 절차는 font-family 속성에 명시된 폰트 패밀리를 순회하며, 다른 폰트 속성을 바탕으로 적절한 스타일의 폰트 페이스를 선택하고, 해당 문자에 대한 글리프가 존재하는지 판단하는 과정입니다. 이는 폰트의 character map을 사용해 이루어지며, 이 데이터는 문자를 해당 문자에 대한 기본 글리프에 매핑합니다. 폰트가 특정 문자를 지원한다고 판단하려면 (1) 문자가 폰트의 character map에 포함되어 있어야 하며, (2) 해당 스크립트에서 요구하는 경우, 해당 문자를 위한 셰이핑 정보가 있어야 합니다.

일부 레거시 폰트는 character map에는 문자가 포함되어 있지만 해당 문자로 이루어진 텍스트 런을 올바르게 렌더링하는 데 필요한 셰이핑 정보 (예: OpenType layout tables 또는 Graphite tables) 가 없는 경우도 있습니다.

기본 문자 뒤에 결합 문자가 이어진 코드포인트 시퀀스는 약간 다른 방식으로 처리되며, 아래 클러스터 매칭 섹션을 참고하세요.

이 절차에서, 특정 폰트 패밀리에 대한 기본 폰트 페이스(default font face)는 모든 폰트 스타일 속성이 초기값으로 설정되었을 때 선택될 페이스로 정의된다.

특정 요소에 대한 계산된 폰트 속성 값을 사용하여, 사용자 에이전트는 font-family 속성에 지정된 첫 번째 패밀리 이름부터 시작한다.
패밀리 이름이 일반 패밀리 키워드인 경우, 사용자 에이전트는 사용될 적절한 폰트 패밀리 이름을 찾는다. 사용자 에이전트는 포함 요소의 언어나 문자의 유니코드 범위에 따라 사용할 일반 폰트 패밀리를 선택할 수 있다.
그 외 패밀리 이름에 대해서, 사용자 에이전트는 먼저 @font-face 규칙으로 정의된 폰트들에서 패밀리 이름을 찾고, 그 다음 사용 가능한 설치 폰트들(폰트 별칭 포함 가능)에서 찾는다. 이때 위 절에서 설명한 § 5.1 Localized name matching에 따라 이름을 매칭한다. 만약 특정 페이스에 대해 @font-face 규칙으로 정의된 폰트 리소스가 사용 불가능하거나 잘못된 폰트 데이터를 포함한다면, 그 페이스는 패밀리에 존재하지 않는 것으로 취급해야 한다. @font-face 규칙으로 정의된 패밀리에 어떤 페이스도 존재하지 않는다면, 그 패밀리는 누락된 것으로 취급해야 하며, 이 경우 같은 이름의 플랫폼 폰트에 매칭해서는 안 된다.
폰트 패밀리 매칭이 발생하면, 사용자 에이전트는 해당 패밀리 안의 폰트 페이스 집합을 모으고, 아래에 제시된 순서의 다른 폰트 속성들을 사용해 이 집합을 하나의 페이스로 좁힌다. 이 그룹 안에는 font-width, font-style, font-weight 속성의 범위를 지원하는 폰트들이 있을 수 있다. 이 경우 알고리즘은 지원되는 각 값 조합을 집합 안의 고유한 하나의 폰트인 것처럼 취급하여 진행한다. 이런 폰트가 알고리즘에 의해 최종적으로 선택되면, font-width, font-style, font-weight에 대한 특정 값이 레이아웃이나 렌더링이 일어나기 전에 적용되어야 한다. 이러한 값의 적용은 § 7 Font Feature and Variation Resolution에 자세히 설명된 Apply font matching variations 단계에서 수행되어야 한다. 또한 @font-face 규칙으로 정의된 페이스들 중에서 폰트 서술자 값은 동일하지만 unicode-range 값이 서로 다른 페이스들의 그룹은, 이 단계에서는 하나의 합성 폰트 페이스(composite font face)로 간주된다:
Tests
1. font-width가 먼저 사용된다. 폰트가 폭(width) 강도의 변화를 전혀 지원하지 않는 경우, 그 폭 값은 속성 정의의 표에 따라 매핑된다. 매칭 집합에 font-width의 원하는 값을 포함하는 폭 값을 가진 페이스가 있다면, 원하는 폭 값을 포함하지 않는 폭 값을 가진 페이스는 매칭 집합에서 제거된다. 원하는 값을 포함하는 페이스가 하나도 없다면, 아래 규칙에 따라 폭 값을 선택한다:
  - 원하는 폭 값이 100% 이하인 경우, 원하는 폭 값 이하의 폭들을 내림차순으로 검사한 뒤, 이어서 원하는 폭 값보다 큰 폭들을 오름차순으로 검사하여 일치 항목을 찾을 때까지 진행한다.
  - 그 외의 경우에는, 원하는 폭 값 이상의 폭들을 오름차순으로 먼저 검사한 뒤, 이어서 원하는 폭 값보다 작은 폭들을 내림차순으로 검사하여 일치 항목을 찾을 때까지 진행한다.
  이 과정을 통해 가장 가까운 폭이 결정되면, 이 폭을 포함하지 않는 폭 값을 가진 페이스는 매칭 집합에서 제거된다.
  
  이 검색 알고리즘은 거리 함수로 생각할 수 있는데, 패밀리 전체에서 가장 작은 거리 값을 가진 폭이 선택되고, 그 값을 포함하지 않는 폰트는 모두 제거된다.
  세 개의 폰트 A, B, C가 있는 폰트 패밀리를 생각해 보자. 각 폰트는 font-width 서술자에 대해 서로 다른 지원 범위를 가진다. 요소가 "font-width: 125%"로 스타일링된 경우, 검색 알고리즘은 아래와 같이 시각화할 수 있다.
  
  위 그래프에서 폰트 A, B, C가 지원하는 폭 범위를 볼 수 있다. 보듯이, 패밀리 전체에서 최소 폭 값을 포함하는 폰트는 B이므로, 이 알고리즘에 따라 B가 선택된다. 그러나 B가 패밀리에서 제거된다면, 이번에는 C가 최소 거리를 포함하게 되어 C가 선택된다.
  
  이전 예와 유사하게, 여기서는 요소가 "font-width: 75%"로 스타일링된 경우의 개념적 거리 그래프를 보여 준다:
  
  보듯이, 패밀리 전체에서 최소 폭 값을 포함하는 폰트는 B이므로, 이 알고리즘에 따라 B가 선택된다. B가 제거된다면 A가 최소 거리를 가지게 되어 A가 선택된다.
2. 다음으로 font-style이 사용된다 (§ 5.2 Matching font styles 참고). 폰트가 이탤릭 강도나 오블리크 각도의 변화를 전혀 지원하지 않는 경우, 스타일은 font-style 속성 정의의 설명에 따라 매핑된다.
  
  font-style 값이 italic인 경우:
  1. 매칭 집합에 italic의 매핑된 값을 포함하는 이탤릭 값을 가진 페이스가 있다면, 원하는 이탤릭 매핑 값을 포함하지 않는 이탤릭 값을 가진 페이스는 매칭 집합에서 제거된다.
  2. 그렇지 않으면, 원하는 이탤릭 값보다 큰 이탤릭 값들을 오름차순으로 먼저 검사하고, 이어서 원하는 이탤릭 값보다 작은 이탤릭 값들을 0에 도달할 때까지 내림차순으로 검사한다. 이 단계에서는 양수 이탤릭 값만 검사한다.
  3. 여전히 매치가 없으면, 11deg 이상인 오블리크 값을 오름차순으로 먼저 검사하고, 이어서 11deg 미만인 오블리크 값을 0에 도달할 때까지 내림차순으로 검사한다. 이 단계에서도 양수 오블리크 값만 검사한다.
    
    오블리크를 normal보다 선호하는 임계값은 평균 각도보다 낮아야 한다.
  4. 여전히 매치가 없으면, 0 이하의 이탤릭 값을 매치가 나올 때까지 내림차순으로 검사한다.
  5. 여전히 매치가 없으면, 0deg 이하의 오블리크 값을 매치가 나올 때까지 내림차순으로 검사한다.
    
    이전 예와 유사하게, 여기서는 요소가 "font-style: italic"으로 스타일링된 경우의 개념적 거리 그래프를 보여 준다:
    
    보듯이, 패밀리 전체에서 최소 이탤릭 값을 포함하는 폰트는 D이므로, 이 알고리즘에 따라 D가 선택된다. 그러나 D가 제거된다면 E가 최소 거리를 가지게 되어 E가 선택된다. E가 제거되면 C가 선택된다. C가 제거되면, 바로 B를 선택하지는 않고 먼저 오블리크 값들을 확인하여 적절한 오블리크 값이 있으면 그것을 선택한다. 오블리크 값도 없다면 그제야 B가 선택되고, 그 다음이 A이다.
  font-style 값이 oblique이고 요청된 각도가 11deg 이상인 경우,
  1. 매칭 집합에 oblique 값을 포함하는 페이스가 있다면, 원하는 오블리크 값을 포함하지 않는 오블리크 값을 가진 페이스는 매칭 집합에서 제거한다.
  2. 그렇지 않으면, 원하는 오블리크 값보다 큰 값들을 오름차순으로 먼저 검사하고, 이어서 0에 도달할 때까지 원하는 값보다 작은 값들을 내림차순으로 검사한다. 이 단계에서는 양수 오블리크 값만 검사한다.
  3. slnt 축을 가진 가변 폰트의 경우, 지정된 오블리크 값으로 slnt 값을 설정하여 매치를 생성한다. 그렇지 않고 font-synthesis-style 값이 auto라면, 지정된 오블리크 값에 맞추어 기하학적 시어링(기울이기)을 통해 폴백 매치를 만든다.
  4. 여전히 매치가 없으면, 1 이상인 이탤릭 값을 오름차순으로 먼저 검사하고, 이어서 1 미만인 이탤릭 값을 0에 도달할 때까지 내림차순으로 검사한다. 이 단계에서는 양수 이탤릭 값만 검사한다.
  5. 여전히 매치가 없으면, 0deg 이하의 오블리크 값을 매치가 나올 때까지 내림차순으로 검사한다.
  6. 여전히 매치가 없으면, 0 이하의 이탤릭 값을 매치가 나올 때까지 내림차순으로 검사한다.
    
    이전 예와 유사하게, 여기서는 요소가 "font-style: oblique 40deg"로 스타일링된 경우의 개념적 거리 그래프를 보여 준다:
    
    보듯이, 패밀리 전체에서 최소 오블리크 값을 포함하는 폰트는 D이므로, 이 알고리즘에 따라 D가 선택된다. D가 제거되면 E가 최소 거리를 가지게 되어 E가 선택된다. E가 제거되면 C가 선택된다. C가 제거되면, 곧바로 B가 선택되지는 않고 먼저 이탤릭 값들을 확인해 적절한 이탤릭 값이 있으면 그것을 선택한다. 이탤릭 값도 없으면 그제야 B가 선택되고, 그 다음이 A이다.
  font-style 값이 oblique이고 요청된 각도가 0deg 이상 11deg 미만인 경우,
  1. 매칭 집합에 oblique 값을 포함하는 페이스가 있다면, 원하는 오블리크 값을 포함하지 않는 페이스는 매칭 집합에서 제거한다.
  2. 그렇지 않으면, 원하는 오블리크 값보다 작은 값들을 0에 도달할 때까지 내림차순으로 검사하고, 이어서 원하는 값보다 큰 값들을 검사한다. 이 단계에서는 양수 오블리크 값만 검사한다.
  3. slnt 축을 가진 가변 폰트의 경우, 지정된 오블리크 값으로 slnt 값을 설정해 매치를 생성한다. 그렇지 않고 font-synthesis-style 값이 auto라면, 지정된 오블리크 값에 맞춰 기하학적 시어링을 통해 폴백 매치를 생성한다.
  4. 여전히 매치가 없으면, 1 미만의 이탤릭 값을 0에 도달할 때까지 내림차순으로 검사하고, 이어서 1보다 큰 이탤릭 값을 오름차순으로 검사한다. 이 단계에서는 양수 이탤릭 값만 검사한다.
  5. 여전히 매치가 없으면, 0deg 이하의 오블리크 값을 매치가 나올 때까지 내림차순으로 검사한다.
  6. 여전히 매치가 없으면, 0 이하의 이탤릭 값을 매치가 나올 때까지 내림차순으로 검사한다.
  이전 예와 유사하게, 여기서는 요소가 "font-style: oblique 13deg"로 스타일링된 경우의 개념적 거리 그래프를 보여 준다:
  
  보듯이, 패밀리 전체에서 최소 오블리크 값을 포함하는 폰트는 D이므로, 이 알고리즘에 따라 D가 선택된다. D가 제거되면 C가 최소 거리를 가지게 되어 C가 선택된다. C가 제거되면 E가 선택된다. E가 제거되면, 곧바로 B가 선택되지는 않고 먼저 이탤릭 값들을 확인해 적절한 이탤릭 값이 있으면 그것을 선택한다. 이탤릭 값도 없으면 그제야 B가 선택되고, 그 다음이 A이다.
  
  font-style 값이 oblique이고 요청된 각도가 0deg보다 작고 -11deg보다 큰 경우에는, 위의 단계를 부호를 반대로 하고 방향을 반대로 하여 따른다. font-style 값이 oblique이고 요청된 각도가 -11deg 이하인 경우에는, 위의 단계를 역시 부호와 방향을 반대로 하여 따른다.
  
  font-style 값이 normal인 경우,
  1. 0 이상인 오블리크 값을 오름차순으로 검사한다.
  2. 매치가 없으면, 0 이상인 이탤릭 값을 오름차순으로 검사한다.
  3. 매치가 없으면, 0deg 미만의 오블리크 값을 매치가 나올 때까지 내림차순으로 검사한다.
  4. 매치가 없으면, 0 미만의 이탤릭 값을 매치가 나올 때까지 내림차순으로 검사한다.
  이전 예와 유사하게, 여기서는 요소가 "font-style: normal"로 스타일링된 경우의 개념적 거리 그래프를 보여 준다:
  
  보듯이, 패밀리 전체에서 최소 오블리크 값을 포함하는 폰트는 C이므로, 이 알고리즘에 따라 C가 선택된다. C가 제거되면 곧바로 B를 선택하지는 않고 먼저 이탤릭 값들을 확인해 적절한 이탤릭 값이 있으면 그것을 선택한다. 이탤릭 값도 없으면 그제야 B가 선택되고, 그 다음이 A이다.
  
  위 검색에서 오블리크 각도가 발견된 경우, 그 각도를 포함하지 않는 모든 페이스는 매칭 집합에서 제외된다. 그렇지 않고 이탤릭 값이 발견된 경우, 그 이탤릭 값을 포함하지 않는 모든 페이스가 매칭 집합에서 제외된다.
  Tests
  - oblique-last-resort-weight-selection.html (live test) (source)
  - oblique-request-italic-only-family-no-crash.html (live test) (source)
  사용자 에이전트는 이탤릭과 오블리크 폰트를 구분하지 않아도 된다. 이런 사용자 에이전트에서는, 위의 font-style 매칭 단계가 이탤릭 값과 오블리크 각도를 공통 스케일로 매핑한 뒤 수행된다. 이 매핑의 정확한 방식은 정의되지 않지만, 이탤릭 값 1은 오블리크 각도 11deg와 동일한 값으로 매핑되어야 한다. @font-face 규칙으로 정의된 폰트 패밀리 내에서는, 이탤릭과 오블리크 페이스를 font-style 서술자의 값으로 반드시 구분해야 한다.
  
  이탤릭이나 오블리크 페이스가 전혀 없는 패밀리에 대해서, 사용자 에이전트는 font-synthesis 속성 값이 허용하는 경우에 한해 인위적인 오블리크 페이스를 생성해 사용할 수 있다.
3. 다음은 font-weight가 매칭된다. 폰트가 가중(weight) 강도의 변화를 전혀 지원하지 않는 경우, 그 가중치는 속성 정의의 목록에 따라 매핑된다. bolder/lighter 같은 상대 가중치가 사용된 경우, 효과적인 가중치는 font-weight 속성 정의에 설명된 대로 상속된 가중치 값을 기반으로 계산된다. 위 단계를 수행한 뒤의 매칭 집합에 원하는 font-weight 값을 포함하는 가중치 값을 가진 페이스가 있다면, 원하는 font-weight 값을 포함하지 않는 가중치 값을 가진 페이스는 매칭 집합에서 제거된다. 원하는 값을 포함하는 페이스가 없다면, 아래 규칙에 따라 가중치를 선택한다:
  - 원하는 가중치가 400 이상 500 이하일 때는, 먼저 원하는 값 이상 500 이하의 가중치를 오름차순으로 검사하고, 이어서 원하는 값보다 작은 가중치를 내림차순으로, 그 다음 500보다 큰 가중치를 검사하며 매치가 나올 때까지 진행한다.
  - 원하는 가중치가 400 미만이면, 원하는 값 이하의 가중치를 내림차순으로 먼저 검사하고, 이어서 원하는 값보다 큰 가중치를 오름차순으로 검사하여 매치가 나올 때까지 진행한다.
  - 원하는 가중치가 500 초과이면, 원하는 값 이상의 가중치를 오름차순으로 먼저 검사하고, 이어서 원하는 값보다 작은 가중치를 내림차순으로 검사하여 매치가 나올 때까지 진행한다.
    Tests
    - font-weight-search-direction.html (live test) (source)
  이전 예와 유사하게, 여기서는 요소가 "font-weight: 400"으로 스타일링된 경우의 개념적 거리 그래프를 보여 준다:
  
  보듯이, 패밀리 전체에서 최소 거리를 가지는 폰트는 B이므로, 이 알고리즘에 따라 B가 선택된다. B가 제거되면 C가 최소 거리를 가지게 되어 C가 선택된다. C가 제거되면 D가 선택되고, 그 다음 A, 그 다음 E가 선택된다.
  
  이전 예와 유사하게, 여기서는 요소가 "font-weight: 450"으로 스타일링된 경우의 개념적 거리 그래프를 보여 준다:
  
  보듯이, 패밀리 전체에서 최소 거리를 가지는 폰트는 C이므로, 이 알고리즘에 따라 C가 선택된다. C가 제거되면 D가 최소 거리를 가지게 되어 D가 선택된다. D도 제거되면 B가 선택되고, 그 다음 A, 그 다음 E가 선택된다.
  
  이전 예와 유사하게, 여기서는 요소가 "font-weight: 500"으로 스타일링된 경우의 개념적 거리 그래프를 보여 준다:
  
  보듯이, 패밀리 전체에서 최소 거리를 가지는 폰트는 D이므로, 이 알고리즘에 따라 D가 선택된다. D가 제거되면 B가 최소 거리를 가지게 되어 B가 선택된다. B가 제거되면 C가 선택되고, 그 다음 B, A, E 순으로 선택된다.
  
  이전 예와 유사하게, 여기서는 요소가 "font-weight: 300"으로 스타일링된 경우의 개념적 거리 그래프를 보여 준다:
  
  보듯이, 패밀리 전체에서 최소 거리를 가지는 폰트는 B이므로, 이 알고리즘에 따라 B가 선택된다. B가 제거되면 A가 최소 거리를 가지게 되어 A가 선택된다. A가 제거되면 C가 선택된다.
  
  이 과정을 통해 가장 가까운 가중치가 결정되면, 이 가중치를 포함하지 않는 모든 페이스는 매칭 집합에서 제거된다.
  
  Note: [CSS-FONTS-3]와 이 명세 사이에는 font-weight 속성 애니메이션 동작에 작은 변화가 있다. 이전에는 font-weight의 보간 값이 가장 가까운 100 단위로 반올림된 뒤, 이 반올림 값에 대해 폰트 매칭 알고리즘이 수행되었다. 이 명세에서는 폰트 매칭 알고리즘이 임의의 값을 입력으로 받을 수 있으므로 반올림이 일어나지 않는다. 폰트 매칭 알고리즘이 불연속적이기 때문에 이로 인해 작은 동작 차이가 발생한다.
4. font-size는 UA에 의존적인 허용 오차 범위 내에서 매칭되어야 한다. (일반적으로 스케일 가능한 폰트의 크기는 가장 가까운 정수 픽셀로 반올림되고, 비트맵 폰트의 경우 허용 오차는 최대 20%까지 될 수 있다.) 이후 다른 속성에서의 em 값 등 추가 계산은 지정된 값이 아니라 실제로 사용된 font-size 값을 기준으로 수행된다.
위 단계를 모두 수행한 뒤에도 매칭 집합에 둘 이상의 폰트가 남아 있을 수 있다. 이 경우 사용자 에이전트는 매칭 집합에서 하나의 폰트를 선택하고 그 폰트에 대해 이후 단계를 계속 수행해야 한다. 어떤 폰트를 선택할지는 사용자 에이전트나 운영체제 플랫폼에 따라 다를 수 있지만, 같은 문서 내의 두 요소 사이에서는 달라져서는 안 된다.
매칭된 페이스가 @font-face 규칙으로 정의된 페이스라면, 사용자 에이전트는 단일 폰트를 선택하기 위해 아래 절차를 사용해야 한다:
1. 폰트 리소스가 아직 로드되지 않았고, unicode-range 서술자 값이 정의하는 문자 범위에 해당 문자가 포함된다면, 폰트를 로드한다.
2. 다운로드 후 유효 문자 맵이 해당 문자를 지원한다면, 그 폰트를 선택한다.
매칭된 페이스가 합성 페이스(composite face)인 경우, 사용자 에이전트는 합성 페이스를 구성하는 각 페이스에 대해 위 절차를 수행하되, @font-face 규칙이 정의된 역순으로 처리해야 한다.

다운로드가 진행되는 동안, 사용자 에이전트는 폰트가 다운로드될 때까지 기다리거나, 먼저 대체된 폰트 메트릭으로 한 번 렌더링한 뒤 폰트 다운로드가 완료되면 다시 렌더링해야 한다.
매칭되는 페이스가 존재하지 않거나, 매칭된 페이스가 렌더링할 문자에 대한 글리프를 포함하지 않는다면, 다음 패밀리 이름을 선택하고 이전의 세 단계를 반복한다. 패밀리 내 다른 페이스의 글리프는 고려되지 않는다. 단 한 가지 예외로, 특정 글리프를 지원하는 경우 그리고 font-synthesis 속성 값이 이러한 합성을 허용하는 경우에 한해, 사용자 에이전트는 선택적으로 기본 페이스(default face)의 합성 오블리크 버전으로 대체할 수 있다. 예를 들어, 이탤릭 페이스가 아랍어 글리프를 지원하지 않는다면, 레귤러 페이스의 합성 이탤릭 버전을 사용할 수 있다.
평가할 폰트 패밀리가 더 이상 없고 매칭된 페이스도 찾지 못했다면, 사용자 에이전트는 렌더링할 문자에 가장 잘 맞는 폰트를 찾기 위해 설치 폰트 폴백(installed font fallback) 절차를 수행한다. 이 절차의 결과는 사용자 에이전트마다 서로 다를 수 있다.
특정 문자를 어떤 폰트로도 표시할 수 없는 경우, 사용자 에이전트는 문자가 표시되지 못하고 있음을 어떤 식으로든 드러내야 하며, (예: Last Resort Font를 사용하여) 누락된 글리프의 상징적인 표현을 표시하거나, 기본 폰트의 누락 문자 글리프를 사용해야 한다.

이 과정의 최적화는 허용되지만, 구현이 이 알고리즘을 정확히 따른 것과 동일하게 동작해야 한다. 매칭은 동일한 사용 가능한 폰트와 렌더링 기술이 주어졌을 때 사용자 에이전트 간 결과가 가능한 한 일관되도록 하기 위해 잘 정의된 순서로 수행된다.

첫 번째 사용 가능한 폰트(first available font)는 ex 같은 폰트 상대 길이나, line-height 속성 정의 등에서 사용되는 개념으로, unicode-range에 의해 U+0020(공백) 문자가 제외되지 않는 첫 번째 폰트를 의미한다. 이때 기준은 font-family 목록에 있는 폰트 패밀리들(또는 사용 가능한 것이 없다면 사용자 에이전트의 기본 폰트)이다.

@font-face 규칙이 아니라 패밀리 이름으로 직접 참조되는 설치 폰트는, 전체 유니코드 코드 공간을 덮는 unicode-range를 가진 것으로 간주된다.

Tests

Note: 해당 폰트에 실제로 공백 문자에 대한 글리프가 있는지는 중요하지 않다.

5.3. 클러스터 매칭

텍스트에 결합 기호와 같은 문자가 포함된 경우, 이상적으로는 기본 문자가 기호와 동일한 폰트로 렌더링되어야 하며, 이는 기호 위치가 올바르게 배치되도록 보장합니다. 이러한 이유로, 클러스터에 대한 폰트 매칭 알고리즘은 단일 문자 매칭의 일반적인 경우보다 더 특화되어 있습니다. 변형 선택자(variation selector)가 포함된 시퀀스의 경우, 해당 문자를 위한 정확한 글리프를 지정하므로, 사용자 에이전트는 항상 설치 폰트 폴백을 시도해 적절한 글리프를 찾은 후, 기본 문자의 기본 글리프를 사용합니다.

결합 기호나 기타 수정자를 포함하는 코드포인트 시퀀스는 그래프임 클러스터라 불립니다 (자세한 설명은 [CSS3TEXT] 및 [UAX29] 참고). 기본 문자 b와 결합 문자 시퀀스 c1, c2…가 포함된 클러스터의 경우, 전체 클러스터는 다음 단계로 매칭됩니다:

폰트 목록의 각 패밀리에 대해, 이전 섹션에 정의된 스타일 선택 규칙을 사용해 페이스를 선택합니다.
1. 시퀀스 b + c1 + c2 …의 모든 문자가 폰트에서 완전히 지원된다면, 해당 폰트를 시퀀스에 선택합니다.
2. 여러 코드포인트 시퀀스가 단일 문자와 정규적으로 동일하고, 폰트가 해당 문자를 지원한다면, 해당 폰트를 시퀀스에 선택하고, 전체 클러스터에는 정규적으로 동일한 문자에 연결된 글리프를 사용합니다.
1단계에서 폰트를 찾지 못한 경우:
1. c1이 변형 선택자라면, 시스템 폴백을 사용해 b + c1 전체 시퀀스를 지원하는 폰트를 찾아야 합니다. 시스템의 어떤 폰트도 전체 시퀀스를 지원하지 않으면, 단일 문자 b를 일반 단일 문자 매칭 절차로 매칭하고 변형 선택자는 무시합니다. 참고: 변형 선택자가 2개 이상일 경우 인코딩 오류로 처리하며, 뒤쪽 선택자는 무시합니다. [UNICODE]
2. 그 밖의 경우, 사용자 에이전트는 설치 폰트 폴백을 사용해 전체 클러스터를 지원하는 폰트를 매칭할 수 있습니다.
2단계에서 폰트를 찾지 못하면, 1단계의 매칭 시퀀스를 사용해 폰트 목록에서 완전히 지원되는 최장 시퀀스를 결정하고, 나머지 결합 문자는 단일 문자 규칙으로 각각 따로 매칭 시도합니다.

5.4. 문자 처리 이슈

CSS 폰트 매칭은 항상 유니코드 문자[UNICODE]가 포함된 텍스트 런에서 수행됩니다. 따라서 레거시 인코딩을 사용하는 문서는 폰트 매칭 전에 트랜스코딩된 것으로 간주합니다. 레거시 인코딩 및 유니코드에 대한 character map을 모두 포함한 폰트의 경우, 레거시 인코딩 character map 내용은 폰트 매칭 결과에 아무런 영향을 주지 않아야 합니다.

폰트 매칭 과정에서는 텍스트 런이 정규화 또는 비정규화 형태임을 가정하지 않습니다 (자세한 내용은 [CHARMOD-NORM] 참고). 폰트는 사전조합(precomposed) 형태만 지원할 수 있고, 분해(decomposed)된 기본 문자+결합 기호 시퀀스는 지원하지 않을 수 있습니다. 저자는 자신의 콘텐츠에 맞는 폰트를 항상 선택해야 하며, 콘텐츠가 정규화 또는 비정규화 문자 스트림을 포함하는지까지 고려해야 합니다.

특정 문자가 Private-Use Area 유니코드 코드포인트인 경우, 사용자 에이전트는 font-family 목록에 지정된, 일반 패밀리가 아닌 폰트 패밀리만 매칭해야 합니다. font-family 목록에 지정된 패밀리 중 해당 코드포인트의 글리프를 포함한 폰트가 없으면, 사용자 에이전트는 해당 문자에 대해 누락된 글리프 심볼을 반드시 표시해야 하며, 해당 코드포인트에 설치 폰트 폴백을 시도하면 안 됩니다. 대체 문자(U+FFFD)를 매칭할 때, 사용자 에이전트는 폰트 매칭 과정을 생략하고 즉시 누락된 글리프 심볼을 표시할 수 있으며, 폰트 매칭 과정에서 선택될 폰트의 글리프를 반드시 표시할 필요는 없습니다.

일반적으로, 특정 패밀리의 폰트들은 모두 동일하거나 유사한 character map을 갖습니다. 여기서 설명된 과정은 character map이 크게 다른 페이스가 포함된 폰트 패밀리도 처리할 수 있도록 설계되었습니다. 하지만, 저자는 이런 패밀리 사용이 예상치 못한 결과를 초래할 수 있음을 주의해야 합니다.

Tests

6. 폰트 기능 속성

최신 폰트 기술은 다양한 고급 타이포그래피 및 언어별 폰트 기능을 지원합니다. 이러한 기능을 활용하면, 하나의 폰트로 다양한 범위의 합자(ligature), 문맥적 및 스타일 대체 글리프, 표 및 구식 숫자, 스몰 캐피털, 자동 분수, 스와시, 특정 언어에 특화된 대체 글리프까지 제공할 수 있습니다. 저자가 이러한 폰트 기능을 제어할 수 있도록 font-variant 속성이 확장되었습니다. 이제 이 속성은 스타일 폰트 기능을 제어할 수 있는 속성 집합의 약어(shorthand)로 동작합니다.

6.1. 글리프 선택 및 배치

이 섹션은 규범적이지 않습니다

라틴 텍스트를 표시하는 간단한 폰트는 매우 기본적인 처리 모델을 사용합니다. 폰트에는 각 문자를 해당 글리프에 매핑하는 character map이 포함되어 있습니다. 이후 문자의 글리프는 단순히 텍스트 런을 따라 순서대로 배치됩니다. OpenType, AAT(Apple Advanced Typography) 등 최신 폰트 포맷은 더 풍부한 처리 모델을 사용합니다. 특정 문자의 글리프는 문자 코드포인트 자체뿐 아니라, 인접 문자, 언어, 스크립트, 텍스트에 활성화된 기능에 따라 선택 및 위치가 결정됩니다. 폰트 기능은 특정 스크립트에 반드시 필요한 기능일 수도 있고, 권장 기본 활성 기능일 수도 있으며, 저자가 직접 제어할 수 있는 스타일 기능일 수도 있습니다. 폰트 선택 및 배치가 전체 텍스트 처리 순서(예: 텍스트 변환, 방향, 정렬)에서 언제 발생하는지는 CSS Text 3 § A 텍스트 처리 작업 순서에서 설명되어 있습니다.

OpenType 폰트의 글리프 처리에 대한 자세한 설명은 [WINDOWS-GLYPH-PROC]을 참고하세요.

스타일 폰트 기능은 크게 두 범주로 나뉩니다: 주변 문맥과의 조화를 위한 글리프 형태에 영향을 주는 기능(커닝, 합자 등), 그리고 스몰캡, 첨자/아래첨자, 대체 글리프처럼 형태 선택에 영향을 주는 기능입니다.

아래에 나열된 font-variant의 하위 속성들은 이러한 스타일 폰트 기능을 제어하는 데 사용됩니다. 이들은 특정 스크립트 표시를 위해 반드시 필요한 기능(예: 아랍어나 인도계 언어 표시에 사용되는 OpenType 기능)까지는 제어하지 않습니다. 글리프 선택과 배치에는 영향을 주지만, 폰트 매칭 섹션에서 설명된 폰트 선택에는 영향을 주지 않습니다 (단, CSS 2.1과의 호환이 필요한 경우는 예외입니다).

사용자 에이전트 간 일관된 동작을 보장하기 위해, 개별 속성에 대해 등가 OpenType 속성 설정을 명시하며, 이는 규범적입니다. 다른 폰트 포맷을 사용할 때도 CSS 폰트 기능 속성 값을 특정 폰트 기능에 매핑하는 지침으로 활용해야 합니다.

6.2. 언어별 표시

OpenType은 언어별 글리프 선택 및 배치를 지원하므로, 언어가 특정 표시 동작을 요구하는 경우에도 텍스트를 올바르게 표시할 수 있습니다. 많은 언어들이 동일한 스크립트를 공유하지만, 특정 글자 형태는 언어에 따라 달라질 수 있습니다. 예를 들어, 일부 키릴 문자들은 러시아어와 불가리아어에서 형태가 다릅니다. 라틴 텍스트에서는 "fi"를 점 없는 합자(fi-ligature)로 렌더링하는 것이 일반적입니다. 하지만 터키어처럼 점 있는 i/dotless i를 모두 쓰는 언어에서는 이 합자를 사용하면 안 되거나, "i" 위에 점이 있는 특화 버전을 사용해야 합니다.

테스트

language-specific-01.html (시각적 테스트) (소스)

아래 예시는 스페인어, 이탈리아어, 프랑스어 정서법의 스타일 전통에 따른 언어별 변형을 보여줍니다:

요소의 콘텐츠 언어가 문서 언어의 규칙에 따라 알려져 있는 경우, 사용자 에이전트는 콘텐츠 언어(content language)에서 OpenType 언어 시스템을 유추하고, OpenType 폰트를 사용해 글리프를 선택하고 배치할 때 이를 사용해야 한다. 문자 체계가 명시적으로 지정된 경우, 콘텐츠 언어에서 암시되는 관례적인 문자 체계보다 이 명시된 문자 체계가 우선해야 한다.

OpenType 폰트의 경우, 때로는 사용할 OpenType 언어를 명시적으로 선언해야 할 수 있다. 예를 들어, 특정 언어의 텍스트를 표시하지만 다른 언어의 타이포그래피 관례를 사용하는 경우, 또는 폰트가 그 언어를 명시적으로 지원하지는 않지만 타이포그래피 관례를 공유하는 언어를 지원하는 경우가 그렇다. 이 목적을 위해 font-language-override 속성을 사용한다.

6.3. 커닝: font-kerning 속성

Name:	font-kerning
Value:	auto \| normal \| none
Initial:	auto
Applies to:	all elements and text
Inherited:	yes
Percentages:	n/a
Computed value:	as specified
Canonical order:	per grammar
Animation type:	discrete

Tests

커닝(kerning)은 글리프 간 간격을 문맥에 따라 조정하는 것이다. 이 속성은 메트릭 커닝, 즉 폰트에 포함된 조정 데이터를 이용하는 커닝을 제어한다.

auto: 커닝을 적용할지 여부를 사용자 에이전트의 재량에 맡긴다
normal: 커닝을 적용하도록 지정한다
none: 커닝을 적용하지 않도록 지정한다

커닝 데이터를 포함하지 않는 폰트의 경우 이 속성은 눈에 보이는 효과를 가지지 않는다. OpenType 폰트로 렌더링할 때 [OPENTYPE] 명세는 기본적으로 커닝을 활성화할 것을 제안한다. 커닝이 활성화된 경우, 관련 OpenType 커닝 기능들이 활성화된다 (수평 조판 모드(typographic modes)와 수직 조판 모드에서 sideways 조판의 경우 kern 기능; upright 조판을 사용하는 수직 조판 모드의 경우 vkrn 기능). 사용자 에이전트는 또, OpenType 명세에 설명된 대로 kern 폰트 테이블에 포함된 데이터만으로 커닝을 지원하는 폰트도 반드시 지원해야 한다. letter-spacing 속성이 정의된 경우, 커닝 조정은 기본 간격의 일부로 간주되며, 글자 간 간격(letter spacing) 조정은 커닝이 적용된 이후에 수행된다.

auto로 설정된 경우, 사용자 에이전트는 텍스트 크기, 스크립트(script), 그 밖에 텍스트 처리 속도에 영향을 주는 여러 요인을 바탕으로 커닝을 적용할지 여부를 결정할 수 있다. 올바른 커닝을 원하는 저자는 normal을 사용해 커닝을 명시적으로 활성화해야 한다. 마찬가지로, 일부 저자는 성능이 정밀한 외형보다 더 중요한 상황에서는 커닝을 비활성화하기를 원할 수도 있다. 그러나 잘 설계된 최신 구현에서는 커닝 사용이 일반적으로 텍스트 렌더링 속도에 큰 영향을 주지 않는다.

6.4. 합자: font-variant-ligatures 속성

Name:	font-variant-ligatures
Value:	normal \| none \| [ `<common-lig-values>` \|\| `<discretionary-lig-values>` \|\| `<historical-lig-values>` \|\| `<contextual-alt-values>` ]
Initial:	normal
Applies to:	all elements and text
Inherited:	yes
Percentages:	n/a
Computed value:	as specified
Canonical order:	per grammar
Animation type:	discrete

Tests

리가처(ligature)와 문맥형(contextual form)은 글리프를 결합하여 더 조화로운 형태를 만드는 방법이다.

<common-lig-values>        = [ common-ligatures | no-common-ligatures ]

<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]

<historical-lig-values>    = [ historical-ligatures | no-historical-ligatures ]

<contextual-alt-values>    = [ contextual | no-contextual ]

각 개별 값은 다음과 같은 의미를 가진다.

normal: normal 값은 기본적인 공통 기능들이 활성화됨을 지정한다. 이는 다음 절에서 자세히 설명된다. OpenType 폰트의 경우, 공통 리가처와 문맥형은 기본적으로 켜져 있고, 재량(discretionary) 및 역사적(historical) 리가처는 꺼져 있다.
none: 이 속성이 다루는 모든 종류의 리가처 및 문맥형을 명시적으로 비활성화한다. 리가처가 필요하지 않은 상황에서는, 이렇게 하면 텍스트 렌더링 속도가 향상될 수도 있다.
common-ligatures: 공통 리가처의 표시를 활성화한다 (OpenType 기능: liga, clig). OpenType 폰트의 경우, 공통 리가처는 기본적으로 활성화되어 있다.
no-common-ligatures: 공통 리가처의 표시를 비활성화한다 (OpenType 기능: liga, clig).
discretionary-ligatures: 재량(discretionary) 리가처의 표시를 활성화한다 (OpenType 기능: dlig). 어떤 리가처가 재량적/선택적인지는 타이프 디자이너가 결정하므로, 저자는 특정 폰트의 문서를 참조하여 어떤 리가처가 재량적 리가처로 취급되는지 이해해야 한다.
no-discretionary-ligatures: 재량 리가처의 표시를 비활성화한다 (OpenType 기능: dlig).
historical-ligatures: 역사적 리가처의 표시를 활성화한다 (OpenType 기능: hlig).
no-historical-ligatures: 역사적 리가처의 표시를 비활성화한다 (OpenType 기능: hlig).
contextual: 문맥 대체(contextual alternates)의 표시를 활성화한다 (OpenType 기능: calt). 엄밀히 말해 리가처 기능은 아니지만, 리가처와 마찬가지로 이 기능은 주변 문맥과 조화를 이루도록 글리프 모양을 조정하는 데 흔히 사용된다. OpenType 폰트의 경우, 이 기능은 기본적으로 켜져 있다.
no-contextual: 문맥 대체의 표시를 비활성화한다 (OpenType 기능: calt).

필수(required) 리가처는 복잡 스크립트를 올바르게 렌더링하는 데 필요하며, 위 설정들의 영향을 받지 않는다. 이는 none 값을 포함해서도 마찬가지이다 (OpenType 기능: rlig).

6.5. 첨자 및 윗첨자 형태: font-variant-position 속성

Name:	font-variant-position
Value:	normal \| sub \| super
Initial:	normal
Applies to:	all elements and text
Inherited:	yes
Percentages:	n/a
Computed value:	as specified
Canonical order:	per grammar
Animation type:	discrete

Tests

이 속성은 활자학적 아래첨자(subscript)와 위첨자(superscript) 글리프를 활성화하는 데 사용된다. 이러한 글리프는 기본 글리프와 동일한 em-box 안에서 설계된 대체 글리프이며, 기준선을 재배치하거나 크기를 조정하지 않고 기본 글리프와 같은 기준선 위에 배치되도록 의도된 것이다. 이 글리프들은 주변 텍스트와 어울리도록 명시적으로 설계되어, 줄 높이에 영향을 주지 않으면서 더 읽기 쉽도록 한다.

comparison between real subscript glyphs and synthesized ones

아래첨자 글리프(위)와 일반적으로 합성된 아래첨자(아래)의 비교

각 개별 값은 다음과 같은 의미를 가진다.

normal: 아래에 나열된 어떤 기능도 활성화되지 않는다.
sub: 아래첨자 변형의 표시를 활성화한다 (OpenType 기능: subs).
super: 위첨자 변형의 표시를 활성화한다 (OpenType 기능: sups).

아래첨자와 위첨자는 의미론적 특성을 가지므로, 특정 연속 텍스트 런에 대해 값이 sub 또는 super인 경우, 런 안의 모든 문자에 대해 변형 글리프를 사용할 수 없다면, 이 기능이 적용되지 않았을 때 사용될 글리프를 축소한 형태를 이용해 모든 문자에 대해 합성 글리프를 만들어야 한다. 이는 런 단위로 수행되며, 정렬이 맞지 않게 되는 변형 글리프와 합성 글리프의 혼용을 피하기 위한 것이다. 주어진 문자에 대해 아래첨자나 위첨자 글리프가 없는 OpenType 폰트의 경우, 사용자 에이전트는 적절한 아래첨자 및 위첨자 글리프를 반드시(sic) 합성해야 한다.

alternate superscripts vs. glyphs synthesized using superscript metrics

위첨자 대체 글리프(왼쪽), 합성된 위첨자 글리프(가운데), 둘을 잘못 섞은 경우(오른쪽)

텍스트 장식이 위첨자 또는 아래첨자 글리프를 포함하는 텍스트 런에만 적용되는 상황에서는, 장식 위치 문제를 피하기 위해 합성 글리프를 사용할 수 있다.

과거에는 사용자 에이전트가 sub 요소와 sup 요소에 대해 font-size와 vertical-align을 사용하여 아래첨자와 위첨자를 시뮬레이션해 왔다. 아래첨자와 위첨자를 하위 호환 방식으로 정의할 수 있도록, 저자는 조건부 규칙 [CSS3-CONDITIONAL]을 사용해, 오래된 사용자 에이전트도 예전 메커니즘을 통해 아래첨자와 위첨자를 렌더링하도록 하는 것이 권장된다.

font-size: smaller가 이러한 요소들에 자주 사용되기 때문에, 아래첨자와 위첨자 텍스트에 적용되는 실질적인 스케일링 계수는 크기에 따라 달라진다. 큰 텍스트에서는 폰트 크기를 보통 3분의 1 정도 줄이지만, 작은 텍스트 크기에서는 축소 비율이 훨씬 작을 수 있다. 이를 통해 작은 텍스트 크기를 사용하는 요소 안에서도 아래첨자와 위첨자가 읽기 쉬운 상태로 유지될 수 있다. 사용자 에이전트는 아래첨자와 위첨자 글리프를 합성하는 방법을 결정할 때 이를 고려해야 한다.

OpenType 폰트 포맷은 OS/2 테이블에서 아래첨자와 위첨자 메트릭을 정의하지만 [OPENTYPE], 실제로는 이 값들이 항상 정확하지 않으므로, 아래첨자/위첨자 글리프를 합성할 때 신뢰할 수 없다.

저자들은 폰트가 일반적으로 폰트가 지원하는 모든 문자에 대해 아래첨자·위첨자 글리프를 제공하지는 않는다는 점을 유념해야 한다. 예를 들어, 라틴 숫자에 대한 아래첨자/위첨자 글리프는 자주 제공되지만, 문장 부호나 문자 글리프는 훨씬 덜 제공된다. 이 속성에 대해 정의된 합성 폴백 규칙은 아래첨자와 위첨자가 항상 나타나도록 시도하지만, 사용된 폰트가 아래첨자 또는 위첨자 안에 포함된 모든 문자에 대해 적절한 대체 글리프를 제공하지 않는다면, 그 모양은 저자의 기대와 다를 수 있다.

이 속성은 누적적이지 않다. 아래첨자나 위첨자 안의 요소에 이 속성을 다시 적용해도 아래첨자 또는 위첨자 글리프의 배치가 중첩되지는 않는다. 이 속성 값이 sub 또는 super인 텍스트 런 안에 포함된 이미지는, 값이 normal인 경우와 동일한 방식으로 그려진다.

이러한 제한 때문에, font-variant-position을 사용자 에이전트 스타일시트에서 사용하는 것은 권장되지 않는다. 저자는 아래첨자나 위첨자에 폰트가 지원하는 좁은 범위의 문자만 포함될 것임을 확신할 수 있는 경우에 이 속성을 사용해야 한다.

변형 글리프는 기본 글리프가 사용하는 것과 동일한 기준선을 사용한다. 기준선 방향으로의 이동은 없으므로, 변형 글리프를 사용해도 인라인 박스의 높이나 줄 상자의(line box) 높이에 영향을 주지 않는다. 이는 위첨자·아래첨자 변형이, 여러 단(column) 레이아웃처럼 행간(leading)이 일정하게 유지되는 것이 중요한 상황에 특히 적합하게 만든다.

sub 요소에 대한 전형적인 사용자 에이전트 기본 스타일:

sub {
      vertical-align: sub;
      font-size: smaller;
      line-height: normal;
    }

구식 사용자 에이전트에서도 아래첨자를 표시할 수 있게 타이포그래피용 아래첨자를 font-variant-position를 이용해 지정하는 예:

@supports ( font-variant-position: sub ) {
      sub {
        vertical-align: baseline;
        font-size: 100%;
        line-height: inherit;
        font-variant-position: sub;
      }
    }

font-variant-position 속성을 지원하는 사용자 에이전트는 아래첨자 변형 글리프를 선택해 기준선이나 글꼴 크기를 조정하지 않고 렌더링합니다. 구버전 사용자 에이전트는 font-variant-position 속성 정의를 무시하고 아래첨자에 대해 표준 기본값을 사용합니다.

6.6. 대문자 변형: font-variant-caps 속성

Name:	font-variant-caps
Value:	normal \| small-caps \| all-small-caps \| petite-caps \| all-petite-caps \| unicase \| titling-caps
Initial:	normal
Applies to:	all elements and text
Inherited:	yes
Percentages:	n/a
Computed value:	as specified
Canonical order:	per grammar
Animation type:	discrete

Tests

이 속성은 스몰 캡(small capitals)이나 페티트 캡(petite capitals), 또는 타이틀링(titling)에 사용되는 대체 글리프를 선택하기 위해 사용된다. 이러한 글리프는 주변의 일반 글리프와 잘 어우러지도록 특별히 설계되었으며, 단순히 텍스트 크기를 줄여서 맞출 때처럼 가독성과 획 굵기가 손상되지 않도록 한다.

각 개별 값은 다음과 같은 의미를 가진다.

normal: 아래에 나열된 기능들 중 어떤 것도 활성화되지 않는다.
small-caps: 스몰 캡 표시를 활성화한다 (OpenType 기능: smcp). 스몰 캡 글리프는 보통 대문자 형태를 사용하지만, 소문자 크기로 축소된다.
all-small-caps: 대문자와 소문자 모두에 대해 스몰 캡 표시를 활성화한다 (OpenType 기능: c2sc, smcp).
petite-caps: 페티트 캡(petite capitals) 표시를 활성화한다 (OpenType 기능: pcap).
all-petite-caps: 대문자와 소문자 모두에 대해 페티트 캡 표시를 활성화한다 (OpenType 기능: c2pc, pcap).
unicase: 대문자에 대해서는 스몰 캡을, 소문자에는 일반 소문자를 섞어서 사용하는 유니케이스(unicase) 형태의 표시를 활성화한다 (OpenType 기능: unic).
titling-caps: 타이틀링 캡(titling capitals) 표시를 활성화한다 (OpenType 기능: titl). 대문자 글리프는 보통 소문자와 함께 사용되도록 설계된다. 이를 모든 대문자 타이틀 시퀀스에 사용하면 지나치게 강해 보일 수 있다. 타이틀링 캡은 바로 이런 상황을 위해 특별히 설계된 글리프이다.

이러한 글리프의 사용 가능 여부는 해당 폰트의 기능(feature) 목록에 해당 기능이 정의되어 있는지에 따라 달라진다. 사용자 에이전트는 스크립트(script)별로 이를 선택적으로 판단할 수 있지만, 문자 단위(per-character)로 판단해서는 안 된다.

일부 폰트는 이 속성에 대해 설명된 기능의 일부만 혹은 전혀 지원하지 않을 수 있다. CSS 2.1과의 하위 호환성을 위해, small-caps 또는 all-small-caps가 지정되었지만 해당 폰트에 스몰 캡 글리프가 없는 경우, 사용자 에이전트는 스몰 캡 폰트를 시뮬레이션해야 한다. 예를 들어, 일반 폰트를 사용하되 소문자 글리프를 대문자 글리프를 축소한 버전으로 교체하는 식이다 (all-small-caps의 경우에는 대문자와 소문자 글리프 모두를 교체한다).

합성 스몰 캡 vs. 실제 스몰 캡

font-feature-settings 속성도 (CSS Fonts 3와는 달리) 스몰 캡 폰트를 시뮬레이션할지 여부에 영향을 미친다.

#example1 { font-variant-caps: small-caps; }
      #example2 { font-variant-caps: small-caps; font-feature-settings: 'smcp' 0; }

스몰 캡을 지원하지 않는 폰트의 경우, #example1과 #example2 둘 다 합성 스몰 캡으로 렌더링되어야 한다. 그러나 스몰 캡을 지원하는 폰트의 경우, #example1은 네이티브 스몰 캡으로, #example2는 스몰 캡(네이티브 및 합성 모두 없이) 없이 렌더링되어야 한다.

주변 텍스트와의 일치성을 높이기 위해, 폰트는 이러한 기능이 활성화되었을 때 대소문 구분이 없는(caseless) 문자에 대해 대체 글리프를 제공할 수 있다. 그러나 사용자 에이전트가 스몰 캡을 시뮬레이션할 때에는, 대/소문 구분이 없는 코드포인트에 대한 대체를 시뮬레이션하려 해서는 안 된다.

caseless characters with small-caps, all-small-caps enabled

small-caps, all-small-caps가 활성화된 상황의 대소문 구분 없는 문자

petite-caps 또는 all-petite-caps가 해당 기능을 지원하지 않는 폰트에 대해 지정된 경우, 이 속성은 각각 small-caps 또는 all-small-caps가 지정된 것처럼 동작한다. unicase가 해당 기능을 지원하지 않는 폰트에 대해 지정된 경우, 이 속성은 small-caps가 소문자로 변환된 대문자에만 적용된 것처럼 동작한다. titling-caps가 이 기능을 지원하지 않는 폰트에 대해 지정된 경우, 이 속성은 눈에 보이는 효과를 가지지 않는다. 합성 스몰 캡 글리프가 사용되는 경우, 대/소문 구분이 없는 스크립트에서는 small-caps, all-small-caps, petite-caps, all-petite-caps, unicase는 어떤 가시적인 효과도 가지지 않는다.

스몰 캡을 시뮬레이션하기 위해 대소문 변환(casing transform)을 사용할 때, 변환 방식은 text-transform 속성에 사용되는 변환과 일치해야 한다.

마지막 수단으로, 일반 폰트의 축소되지 않은 대문자 글리프가 스몰 캡 폰트의 글리프를 대체해, 텍스트가 전부 대문자로 보이도록 할 수 있다.

using all-small-caps in acronym-laden text

약어(acronym)가 많은 텍스트에서 스몰 캡을 사용해 가독성을 높인 예

따옴표 구문을 이탤릭으로 렌더링하되, 첫 줄에만 스몰 캡을 사용하는 예:

blockquote            { font-style: italic; }
    blockquote:first-line { font-variant: small-caps; }

    <blockquote>I'll be honor-bound to slap them like a haddock.</blockquote>

6.7. 숫자 포맷팅: font-variant-numeric 속성

이름:	font-variant-numeric
값:	normal \| [ <numeric-figure-values> \|\| <numeric-spacing-values> \|\| <numeric-fraction-values> \|\| ordinal \|\| slashed-zero ]
초기값:	normal
적용 대상:	모든 요소 및 텍스트
상속 여부:	yes
백분율:	해당 없음
계산값:	지정한 그대로
정규 순서:	문법에 따름
애니메이션 유형:	불연속(discrete)

Tests

숫자 형태를 제어합니다. 아래 예시는 이러한 값들 중 일부를 조합하여, 해당 기능을 지원하는 글꼴로 표 형식 데이터를 렌더링하는 방식을 보여 줍니다. 일반 문단 텍스트에서는 비례 숫자가 사용되고, 표 형식 숫자는 숫자 열이 제대로 정렬되도록 사용할 수 있습니다:

숫자 스타일 사용

가능한 조합:

<numeric-figure-values>   = [ lining-nums | oldstyle-nums ]

<numeric-spacing-values>  = [ proportional-nums | tabular-nums ]

<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]

각 개별 값의 의미는 다음과 같습니다:

normal: 아래에 나열된 기능들 중 어느 것도 활성화되지 않습니다.
lining-nums: 라이닝(기준선 정렬) 숫자를 표시하도록 활성화합니다 (OpenType 기능: lnum).
oldstyle-nums: 올드스타일(상승/하강) 숫자를 표시하도록 활성화합니다 (OpenType 기능: onum).
proportional-nums: 비례 숫자를 표시하도록 활성화합니다 (OpenType 기능: pnum).
tabular-nums: 표 형식(고정 폭) 숫자를 표시하도록 활성화합니다 (OpenType 기능: tnum).
diagonal-fractions: 라이닝 대각선 분수를 표시하도록 활성화합니다 (OpenType 기능: frac).
stacked-fractions: 세로로 쌓인 분수를 표시하도록 활성화합니다 (OpenType 기능: afrc).
ordinal: 서수 숫자에 사용되는 문자 형태를 표시하도록 활성화합니다 (OpenType 기능: ordn).
slashed-zero: 빗금 처리된 0을 표시하도록 활성화합니다 (OpenType 기능: zero).

ordinal의 경우, 서수 형태가 보통 위첨자 형태와 같더라도 마크업 방식은 다릅니다.

위첨자의 경우, 변형 속성은 위첨자를 포함하는 하위 요소에만 적용됩니다:

sup { font-variant-position: super; }
x<sup>2</sup>

서수의 경우, 변형 속성은 접미사에만 적용되지 않고 전체 서수 숫자 (또는 이를 포함하는 문단)에 적용됩니다:

.ordinal { font-variant-numeric: ordinal; }
<span class="ordinal">17th</span>

이 경우 서수 형태로 표시되는 것은 "th"뿐이고, 숫자들은 변경되지 않은 채로 남습니다. 사용되는 언어의 활자 전통에 따라 서수 형태는 위첨자 형태와 다를 수 있습니다. 예를 들어 이탈리아어에서는 서수 형태에 밑줄 장식을 포함하는 경우가 있습니다.

자동 분수와 올드스타일 숫자로 렌더링한 간단한 플랭크 스테이크 마리네이드 레시피 예:

.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }

    <h4>Steak marinade:</h4>
    <ul>
      <li><span class="amount">2</span> tbsp olive oil</li>
      <li><span class="amount">1</span> tbsp lemon juice</li>
      <li><span class="amount">1</span> tbsp soy sauce</li>
      <li><span class="amount">1 1/2</span> tbsp dry minced onion</li>
      <li><span class="amount">2 1/2</span> tsp italian seasoning</li>
      <li>Salt &amp; pepper</li>
    </ul>

    <p>Mix the meat with the marinade
    and let it sit covered in the refrigerator
    for a few hours or overnight.</p>

분수 기능은 전체 문단이 아니라 값에만 적용된다는 점에 유의하십시오. 글꼴은 이 기능을 종종 슬래시('/') 문자의 사용을 기준으로 한 문맥 규칙으로 구현합니다. 따라서 문단 수준 스타일로 사용하기에는 적합하지 않습니다.

6.8. 대체 글리프 및 스와시: font-variant-alternates 속성

이름:	font-variant-alternates
값:	normal \| [ stylistic(<font-feature-value-name>) \|\| historical-forms \|\| styleset(<font-feature-value-name>#) \|\| character-variant(<font-feature-value-name>#) \|\| swash(<font-feature-value-name>) \|\| ornaments(<font-feature-value-name>) \|\| annotation(<font-feature-value-name>) ]
초기값:	normal
적용 대상:	모든 요소 및 텍스트
상속 여부:	예
퍼센트 지원:	해당 없음
계산값:	지정값 그대로
정식 순서:	문법에 따름
애니메이션 유형:	분리형(discrete)

Tests

<font-feature-index> = <integer>

<font-feature-value-name> = <ident>

주어진 문자마다, 글꼴은 해당 문자의 기본 글리프 외에도 다양한 대체 글리프를 제공할 수 있습니다. 이 속성은 이러한 대체 글리프 선택을 제어합니다.

아래에 나열된 많은 속성 값에서는 여러 대체 글리프(글꼴 대체문자)를 사용할 수 있습니다. 대체문자의 갯수와 의미는 글꼴마다 다르므로, 아래 값 정의에서는 각각을 글꼴 전용(font specific)으로 표기합니다. 이러한 대체물의 성격이 글꼴마다 다르기 때문에, @font-feature-values 규칙이, 특정 글꼴 패밀리 또는 여러 패밀리에 대해 글꼴 전용의 숫자 <font-feature-index>와 커스텀 <font-feature-value-name>을 연결해서 정의하는 데 사용되며, 이 속성에서 특정 대체형을 선택할 때 활용됩니다:

@font-feature-values Noble Script { @swash { swishy: 1; flowing: 2; } }

p {
  font-family: Noble Script;
  font-variant-alternates: swash(flowing); /* swash 대체 2번 사용 */
}

특정 <font-feature-value-name>이 주어진 패밀리나 특정 기능 타입에 대해 정의되지 않았다면, 계산값(computed value)은 정의된 경우와 같아야 합니다. 다만, 정의되지 않은 <font-feature-value-name> 식별자가 포함된 속성 값은 글리프를 선택할 때 무시되어야 합니다.

/* 아래 두 스타일 규칙은 사실상 동일함 */

p { font-variant-alternates: swash(unknown-value); } /* 정의된 값 아님, 무시됨 */
p { font-variant-alternates: normal; }

이렇게 하면, 한 세트의 글꼴 패밀리에 대해 값이 정의되어 있다가 폴백이 발생할 때 무시할 수 있습니다. (즉, 글꼴 패밀리 이름이 다르다면 무시됨) 만약 어떤 값이 해당 글꼴에서 지원 범위 밖이면 역시 무시합니다. 이러한 값은 결코 "일반 글꼴 패밀리"에는 적용되지 않습니다.

각 개별 값의 의미는 다음과 같습니다:

normal: 아래에 나열된 기능(feature)들 중 어느 것도 활성화되어 있지 않습니다.
historical-forms: 역사적 글꼴 형태(예: OpenType 기능 hist)의 표시를 활성화합니다.
stylistic(<font-feature-value-name>): 스타일 대체형(글꼴 전용, OpenType 기능:salt <font-feature-index>)의 출력을 활성화합니다.
styleset(<font-feature-value-name>#): 스타일 세트(글꼴 전용, OpenType 기능: ss<font-feature-index>)로 표시를 활성화합니다. OpenType에서는 현재 ss01~ss20까지 정의되어 있습니다.
character-variant(<font-feature-value-name>#): 특정 문자 변형(글꼴 전용, OpenType 기능:cv<font-feature-index>) 표시를 활성화합니다. OpenType에서는 현재 cv01~cv99까지 정의되어 있습니다.
swash(<font-feature-value-name>): 획 장식(swash) 글리프(글꼴 전용, OpenType 기능: swsh <font-feature-index>, cswh <font-feature-index>)의 보기를 활성화합니다.
ornaments(<font-feature-value-name>): 글꼴에 제공되는 경우, 기본 글리프를 장식 글리프로 대체합니다(글꼴 전용, OpenType 기능: ornm <font-feature-index>). 일부 글꼴은 많은 문자에 대해 장식 글리프를 제공할 수 있지만, 임의의(예, 영숫자) 문자를 장식으로 표시하는 것은 데이터의 의미를 왜곡하므로 바람직하지 않습니다. 글꼴 디자이너는 (유니코드 Dingbats 블록 등에서 명시적으로 부호화된 경우를 제외하고) 모든 장식 문자를 글머리표 문자(U+2022)의 대체문자로 코딩하는 것을 권장합니다. 이를 통해 저자가 ornaments()를 사용해 원하는 글리프를 선택할 수 있게 됩니다.
annotation(<font-feature-value-name>): 대체 주석(annotation) 형태의 표시(글꼴 전용, OpenType 기능: nalt <font-feature-index>)를 활성화합니다.

6.9. 폰트별 대체 글리프 정의: @font-feature-values 규칙

위에서 나열된 font-variant-alternates의 가능한 값들 중 여러 개는 글꼴별(font specific)이라고 표시되어 있습니다. 글꼴은 해당 기능에 대해 단일 글리프만 정의하는 것이 아니라, 여러 개의 가능한 글리프 변형을 정의할 수 있으며, 각각에 숫자 인덱스를 연결하여 어떤 것을 활성화할지 선택할 수 있게 합니다.

이러한 숫자 인덱스는 각각의 글꼴 페이스마다 제각각입니다. 한 글꼴 페이스에서 swsh 1 기능은 대문자 Q의 스워시 버전을 켜지만, 다른 글꼴 페이스에서는 &의 스워시 버전을 켤 수 있습니다. 따라서 font-feature-settings에서 인덱스를 지정하려면 작성자가 어떤 요소에 어떤 글꼴이 사용될지 정확히 알고 있어야 합니다. (글꼴 폴백으로 인해 다른 글꼴이 선택되면서) 이를 잘못 추측하게 되면, 원래 원했던 것과는 완전히 다른, 바람직하지 않은 기능을 활성화해 버릴 수도 있습니다! 이는 또한 작성자가 서로 다른 글꼴을 사용하는 요소들에 대해 비슷한 기능을 쉽게 켜지 못하게 만듭니다. 각 요소마다 원하는 기능에 맞는 숫자 인덱스를 사용하도록 서로 다른 font-feature-settings 값을 개별적으로 설정해야 합니다.

이 문제를 해결하기 위해, @font-feature-values 규칙은 작성자가 각 글꼴 페이스마다 특정 기능 인덱스에 사람 친화적인 이름을 할당할 수 있도록 합니다. 이러한 친숙한 이름을 사용하면 작성자는 사용 중인 글꼴에 상관없이 (모든 글꼴에 대해 해당 이름을 정의해 두었다면) 비슷한 기능을 쉽게 켤 수 있으며, 관련 없는 기능이 실수로 켜지는 일을 피할 수 있습니다. (해당 이름이 정의되어 있지 않은 글꼴은 단순히 아무 일도 하지 않기 때문입니다.)

공통으로 이름 붙인 값을 사용하면, 작성자가 각 글꼴마다 기본 선택자가 서로 다르더라도 한 가지 스타일 규칙으로 글꼴 집합 전체를 다룰 수 있습니다. 아래 예시에서 둘 중 어느 글꼴이든 발견되면, 동그라미 숫자 글리프가 사용됩니다:

@font-feature-values Otaru Kisa {
  @annotation { circled: 1; black-boxed: 3; }
}
@font-feature-values Taisho Gothic {
  @annotation { boxed: 1; circled: 4; }
}

h3.title {
  /* 두 글꼴 모두에 대해 circled 형태가 정의되어 있음 */
  font-family: Otaru Kisa, Taisho Gothic;
  font-variant: annotation(circled);
}

@font-feature-values를 사용해, 두 글꼴 중 어느 쪽이든에 대해 "circled" 형태를 명시적으로 켜려고 하면, 작성자는 어떤 글꼴이 사용될지 확실히 알고 있어야 합니다. "Otaru Kisa"가 사용될 것이라 예상하고 font-feature-settings: "nalt" 1;을 작성했다면, 시스템이 Otaru Kisa를 사용할 경우에는 동그라미 친 문자를 켜겠지만, 폴백으로 Taisho Gothic이 선택되었을 경우에는 Taisho Gothic이 nalt 1에 연결해 둔 기능이 boxed 문자이므로, 대신 boxed 문자를 켜게 됩니다!

6.9.1. 기본 문법

@font-feature-values 규칙의 프리루드는 글꼴 패밀리 이름들의 목록과, 이어지는 여러 개의 feature value blocks으로 이루어진 블록으로 구성되며, 이는 보조 at-rule의 한 특별한 형태입니다. 각 feature value block은 작성자가 선택한 사람 친화적인 이름 (예: "flowing")을 해당 기능의 인덱스에 매핑하는 선언들을 포함합니다.

각 font feature value는 font-variant-alternates 속성의 해당 값과 동일한 의미를 가집니다.

@font-feature-values = @font-feature-values <font-family-name># { <declaration-rule-list> }

<font-feature-value-type> = <@stylistic> | <@historical-forms> | <@styleset> | <@character-variant>
  | <@swash> | <@ornaments> | <@annotation>

@stylistic = @stylistic { <declaration-list> }
@historical-forms = @historical-forms { <declaration-list> }
@styleset = @styleset { <declaration-list> }
@character-variant = @character-variant { <declaration-list> }
@swash = @swash { <declaration-list> }
@ornaments = @ornaments { <declaration-list> }
@annotation = @annotation { <declaration-list> }

Tests

@font-feature-values 프렐류드는 font-family 속성에 대한 <font-family-name> 정의에 부합하는 글꼴 패밀리 이름들을 콤마로 구분한 리스트입니다. 즉, 명시적인 이름의 글꼴 패밀리만 사용할 수 있으며, 글꼴 패밀리 목록에 일반 글꼴이나 시스템 글꼴이 포함되어 있으면 문법 오류가 됩니다. 다만, 만약 사용자 에이전트가 특정 일반 글꼴을 특정 이름의 글꼴로 정의한다면(예: Helvetica), 해당 패밀리 이름에 연관된 설정이 사용됩니다. <font-family-name> 리스트 내에서 문법 오류가 발생하면, 전체 @font-feature-values 규칙이 무효로 간주되어 무시되어야 합니다.

@font-feature-values 블록은 그 내용으로 <declaration-rule-list>를 받습니다. 이 목록 항목들은 다음 중 하나입니다:

at-rules로, 그 이름은 <font-feature-value-type> at-키워드 토큰들 중 하나입니다.

또는

font-display 디스크립터.

같은 <font-feature-value-type>을 여러 번 지정하는 것은 허용되며, 그 내용은 함께 병합(cascade)됩니다. 각 기능 값 블록(feature value block)에는 선언(declaration)들의 목록, 즉 글꼴 기능 값 선언(font feature value declaration)을 넣을 수 있으며, 이 선언의 이름(name)은 임의의 CSS 식별자(identifier)일 수 있고, 값은 0 이상의 <integer>들의 목록이어야 합니다.

기능 값 블록에서는 어느 선언 이름이든 허용됩니다; 이 이름은 표준 CSS 문법에 따라 <font-feature-value-name>이어야 하며, 대소문자 구분입니다. (즉, foo: 1;과 FOO: 2는 서로 다른 기능을 정의)

@annotation, @ornaments, @stylistic, @swash에서의 각 선언 값은 반드시 <font-feature-index> 문법과 일치해야 하며, 그렇지 않으면 그 선언은 무효로 간주하고 무시합니다.

@character-variant에서의 각 선언 값은 <font-feature-index [0,99]> <font-feature-index [0,∞]> 문법과 일치해야 하며, 아니면 무효로 간주하고 무시합니다.

@styleset에서의 각 선언 값은 <font-feature-index [0,20]>+ 문법과 일치해야 하며, 아니면 무효로 간주하고 무시합니다.

참고: 각 기능 이름은 개별 기능 값 블록(feature value block) 내에서만 고유합니다. 서로 다른 기능 값 블록들 또는 서로 다른 동일 유형의 기능 값 블록들을 별개의 @font-feature-values 규칙에 둘 경우 이름을 중복 사용해도 충돌하지 않습니다.

<font-family-name>별로 @font-feature-values 프렐류드 안에 각 글꼴 기능 값 선언이 (패밀리 이름, 기능 블록 이름, 선언 이름) 튜플(tuple)과, 선언 값에서 얻은 하나 이상의 정수 목록 간의 매핑을 정의합니다. 동일한 튜플이 문서 내에 여러 번 등장한다면 (예: 동일한 블록에 있는 경우), 마지막에 정의된 값이 사용됩니다.

예를 들어, 아래의 모든 예시는 정확히 동일한 font feature 값 집합을 정의합니다:

/* 기본값 */
@font-feature-values foo {
  @swash { pretty: 1; cool: 2; }
}

/* 선언 이름 반복 */
@font-feature-values foo {
  @swash { pretty: 0; pretty: 1; cool: 2; }
}

/* 같은 종류의 블록 여러 개 */
@font-feature-values foo {
  @swash { pretty: 1; }
  @swash { cool: 2; }
}

/* 같은 패밀리에 대한 여러 규칙 */
@font-feature-values foo {
  @swash { pretty: 1; }
}
@font-feature-values foo {
  @swash { cool: 2; }
}

font feature value declaration 안의 문법 오류는 해당 선언을 잘못된 것으로 만들고 무시되게 하지만, 그 선언이 포함된 font feature value block 전체를 무효로 만들지는 않습니다. @font-feature-values 블록 안에 (허용된 at-키워드 목록에 없는 이름을 사용하는) 알 수 없는 at-rule이 있으면, 그 at-rule은 잘못된 것으로 간주되어 무시되지만, @font-feature-values 규칙 자체는 무효가 되지 않습니다.

문법 오류 처리를 고려했을 때 서로 동등한 규칙들:

@font-feature-values Bongo {
  @swash { ornate: 1; }
  annotation { boxed: 4; } /* @annotation이어야 함! */
  @swash { double-loops: 1; flowing: -1; } /* 음수 값 */
  @ornaments ; /* 불완전한 정의 */
  @styleset { double-W: 14; sharp-terminals: 16 1 } /* ; 누락 */
  redrum  /* 우연히 입력된 쓰레기 텍스트 */
}

위 예시는 다음과 동일합니다:

@font-feature-values Bongo {
  @swash { ornate: 1; }
  @swash { double-loops: 1; }
  @styleset { double-W: 14; sharp-terminals: 16 1; }
}

주어진 패밀리에 대해 여러 개의 @font-feature-values 규칙이 정의된 경우, 최종 값 정의는 이 규칙들 안에 포함된 정의들의 합집합입니다. 이를 통해 특정 글꼴 패밀리에 대한 이름 붙은 값 집합을 사이트 전역에 대해 정의하고, 페이지별로 특정 값을 추가할 수 있습니다.

사이트 전역 및 페이지별 feature 값을 함께 사용하는 예:

site.css:

@font-feature-values Mercury Serif {
  @styleset {
    stacked-g: 3; /* g, a의 "two-storey" 버전 */
    stacked-a: 4;
  }
}

page.css:

@font-feature-values Mercury Serif {
  @styleset {
  geometric-m: 7; /* m의 대체 버전 */
  }
}

body {
  font-family: Mercury Serif, serif;

  /* stacked g와 대체 m 둘 다 사용하도록 활성화 */
  font-variant-alternates: styleset(stacked-g, geometric-m);
}

6.9.2. 다중 값 기능 값 정의

대부분의 글꼴 전용 기능값 font-variant-alternates 속성의 경우 한 개짜리 값(예: swash())을 지정해 해당 기능을 활성화합니다.

@font-feature-values Jupiter Serif {
    @swash {
      swishy: 5;     /* ss05 = 1을 의미 */
      swirly: 2;     /* ss02 = 1을 의미 */
    }
  }

character-variant() 속성값과 @character-variant 디스크립터는 두 개의 값을 허용합니다. (첫 번째 값이 기능을 활성화하고, 두 번째 값으로 해당 기능에 값을 지정)

@font-feature-values MM Greek {
      @character-variant { alpha-2: 1 2; }   /* cv01 = 2를 의미 */
      @character-variant { beta-3: 2 3; }    /* cv02 = 3을 의미 */
    }

styleset() 속성값과 @styleset 규칙에서는 여러 값을 지정해 여러 스타일 세트를 사용할 수 있습니다. 1~99 사이의 값은 OpenType 기능 ss01~ss99을 활성화합니다. 단, OpenType 표준에서 공식적으로 정의한 것은 ss01~ss20까지입니다. OpenType 글꼴에서 99 초과 값이나 0은 구문 오류(syntax error)를 발생시키지 않지만 어떤 OpenType 기능도 활성화하지 않습니다.

@font-feature-values Mars Serif {
    @styleset {
      alt-g: 1;        /* ss01 = 1을 의미 */
      curly-quotes: 3; /* ss03 = 1을 의미 */
      code: 4 5;       /* ss04 = 1, ss05 = 1을 의미 */
    }

    @styleset {
      dumb: 125;        /* 99 초과, 무시됨 */
    }

    @swash {
      swishy: 3 5;     /* swash에 2개 이상 값, 구문 에러 */
    }
  }

  p.codeblock {
    /* ss03 = 1, ss04 = 1, ss05 = 1을 의미 */
    font-variant-alternates: styleset(curly-quotes, code);
  }

<@character-variant>에서는 1~99 사이의 값 한 개는 OpenType 기능 cv01 ~ cv99을 활성화합니다. OpenType 글꼴에서 99 초과 값이나 0은 구문 오류 없이 무시되며 어떤 기능도 활성화하지 않습니다. 두 값이 동시에 지정된 경우, 첫 번째 값은 선택된 기능, 두 번째는 해당 기능에 전달될 값을 의미합니다. 한 이름에 2개를 초과하는 값을 지정하면 구문 오류가 발생해 전체 해당 기능값 정의가 무시됩니다.

@font-feature-values MM Greek {
    @character-variant { alpha-2: 1 2; }   /* cv01 = 2를 의미 */
    @character-variant { beta-3: 2 3; }    /* cv02 = 3을 의미 */
    @character-variant { epsilon: 5 3 6; } /* 2개 초과, 구문 오류, 정의 무시 */
    @character-variant { gamma: 12; }      /* cv12 = 1을 의미 */
    @character-variant { zeta:   20 3; }   /* cv20 = 3을 의미 */
    @character-variant { zeta-2: 20 2; }   /* cv20 = 2를 의미 */
    @character-variant { silly: 105; }     /* 99 초과, 무시됨 */
    @character-variant { dumb: 323 3; }    /* 99 초과, 무시됨 */
  }

  #title {
    /* beta의 세 번째 대체, gamma의 첫 번째 대체 사용 */
    font-variant-alternates: character-variant(beta-3, gamma);
  }

  p {
    /* zeta-2가 zeta를 따라옴, cv20 = 2 의미  */
    font-variant-alternates: character-variant(zeta, zeta-2);
  }

  .special {
    /* zeta가 zeta-2를 따라옴, cv20 = 3 의미  */
    font-variant-alternates: character-variant(zeta-2, zeta);
  }

Matching text on Byzantine seals using character variants

문자 대체 형태를 이용해 표시한 비잔틴 인장 텍스트

위 그림에서 빨간색 텍스트는 8세기 비잔틴 인장의 문자 형태를 모방한 문자 변형(character variants)을 가진 글꼴로 렌더링된 예입니다. 그 바로 아래 두 줄은 변형이 없는 글꼴로 표시된 동일한 텍스트입니다. 인장(seal)에서 U와 N에 두 개의 변형이 사용된 점을 주목하십시오.

@font-feature-values Athena Ruby {
      @character-variant {
        leo-B: 2 1;
        leo-M: 13 3;
        leo-alt-N: 14 1;
        leo-N: 14 2;
        leo-T: 20 1;
        leo-U: 21 2;
        leo-alt-U: 21 4;
      }
    }

    p {
      font-variant: discretionary-ligatures
      character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
    }

    span.alt-N {
      font-variant-alternates: character-variant(leo-alt-N);
    }

    span.alt-U {
      font-variant-alternates: character-variant(leo-alt-U);
    }

    <p>ENO....UP͞RSTU<span class="alt-U">U</span>͞<span class="alt-U">U</span>ΚΑΙTỤẠG̣IUPNS</p>

    <p>LEON|ΚΑΙCONSTA|NTI<span class="alt-N">N</span>OS..|STOIBAṢ.|LIṢROM|AIO<span class="alt-N">N</span></p>

6.10. 동아시아 텍스트 렌더링: font-variant-east-asian 속성

이름:	font-variant-east-asian
값:	normal \| [ <east-asian-variant-values> \|\| <east-asian-width-values> \|\| ruby ]
초기값:	normal
적용 대상:	모든 요소 및 텍스트
상속 여부:	yes
백분율:	해당 없음
계산값:	지정한 그대로
정규 순서:	문법에 따름
애니메이션 유형:	불연속(discrete)

Tests

동아시아 텍스트에서 글리프 치환과 크기 조정을 제어할 수 있게 합니다.

<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]

<east-asian-width-values>   = [ full-width | proportional-width ]

각 개별 값의 의미는 다음과 같습니다:

normal: 아래에 나열된 기능들 중 어느 것도 활성화되지 않습니다.
jis78: JIS78 형태로 렌더링되도록 활성화합니다 (OpenType 기능: jp78).
jis83: JIS83 형태로 렌더링되도록 활성화합니다 (OpenType 기능: jp83).
jis90: JIS90 형태로 렌더링되도록 활성화합니다 (OpenType 기능: jp90).
jis04: JIS2004 형태로 렌더링되도록 활성화합니다 (OpenType 기능: jp04).
여러 JIS 변형은 서로 다른 일본 국가 표준에서 정의된 글리프 형태를 반영합니다. 글꼴은 일반적으로 가장 최신 국가 표준에서 정의된 글리프를 포함하지만, 간판과 일치시켜야 하는 등 예외적으로 예전 변형을 사용해야 하는 경우도 있습니다.
simplified: 간체(간화자) 형태로 렌더링되도록 활성화합니다 (OpenType 기능: smpl).
traditional: 번체(전통) 형태로 렌더링되도록 활성화합니다 (OpenType 기능: trad).
simplified 및 traditional 값은 시간이 지나면서 간략화되었지만, 예전의 전통적인 형태가 아직도 일부 문맥에서 사용되는 문자들에 대해 글리프 형태를 제어할 수 있게 해 줍니다. 정확한 문자 집합과 글리프 형태는 해당 글꼴이 설계된 사용 맥락에 따라 어느 정도 달라질 수 있습니다.
full-width: 전각(풀-위드스) 변형으로 렌더링되도록 활성화합니다 (OpenType 기능: fwid).
proportional-width: 비례 폭 변형으로 렌더링되도록 활성화합니다 (OpenType 기능: pwid).
ruby: 루비용 변형 글리프 표시를 활성화합니다 (OpenType 기능: ruby). 루비 텍스트는 일반적으로 관련 본문 텍스트보다 작기 때문에, 글꼴 디자이너는 축소된 기본 글리프보다 더 읽기 쉬운 루비 전용 글리프를 설계할 수 있습니다. 여기서는 글리프 선택만 영향을 받으며, 줄 레이아웃에 영향을 주는 글꼴 크기 조정이나 기타 변경은 없습니다.
아래의 빨간 루비 텍스트는 위쪽은 기본 글리프로, 아래쪽은 루비 변형 글리프로 표시한 것입니다. 획 두께의 미세한 차이에 주목하십시오.

6.11. 폰트 렌더링 전체 약어: font-variant 속성

이름:	font-variant
값:	normal \| none \| [ [ <common-lig-values> \|\| <discretionary-lig-values> \|\| <historical-lig-values> \|\| <contextual-alt-values> ] \|\| [ small-caps \| all-small-caps \| petite-caps \| all-petite-caps \| unicase \| titling-caps ] \|\| [ stylistic(<font-feature-value-name>) \|\| historical-forms \|\| styleset(<font-feature-value-name>#) \|\| character-variant(<font-feature-value-name>#) \|\| swash(<font-feature-value-name>) \|\| ornaments(<font-feature-value-name>) \|\| annotation(<font-feature-value-name>) ] \|\| [ <numeric-figure-values> \|\| <numeric-spacing-values> \|\| <numeric-fraction-values> \|\| ordinal \|\| slashed-zero ] \|\| [ <east-asian-variant-values> \|\| <east-asian-width-values> \|\| ruby ] \|\| [ sub \| super ] \|\| [ text \| emoji \| unicode ] ]
초기값:	normal
적용 대상:	모든 요소 및 텍스트
상속 여부:	예
퍼센트 지원:	해당 없음
계산값:	지정값 그대로
정식 순서:	문법에 따름
애니메이션 유형:	분리형(discrete)

Tests

font-variant 속성은 모든 font-variant 하위 속성들을 위한 축약(shorthand) 속성입니다:

font-variant-ligatures
font-variant-position
font-variant-caps
font-variant-numeric
font-variant-alternates
font-variant-east-asian
font-variant-emoji

normal 값은 font-variant의 모든 하위 속성을 그 초기값으로 재설정합니다. none 값은 font-variant-ligatures를 'font-variant-ligatures/none'으로 설정하고 다른 모든 글꼴 기능 관련 속성들을 그 초기값으로 재설정합니다. 다른 축약 속성과 마찬가지로, font-variant를 사용하면 지정되지 않은 font-variant 하위 속성들이 그 초기값으로 재설정됩니다.

다음 속성들의 값은 재설정하지 않습니다: font-language-override, font-feature-settings 및 font-variation-settings.

6.12. 로우레벨 폰트 기능 설정 제어: font-feature-settings 속성

이름:	font-feature-settings
값:	normal \| <feature-tag-value>#
초기값:	normal
적용 대상:	모든 요소 및 텍스트
상속 여부:	yes
백분율:	n/a
계산값:	지정한 그대로
정규 순서:	문법에 따름
애니메이션 유형:	불연속(discrete)

Tests

이 속성은 OpenType 폰트 기능에 대한 저수준 제어를 제공합니다. 널리 사용되지는 않지만 특정 사용 사례에 필요할 수 있는 폰트 기능에 접근할 수 있는 수단으로 의도되었습니다.

작성자는 아래 표에 있는 어떤 폰트 기능도 font-feature-settings로 설정해서는 안 됩니다. 대신 더 상위 수준의 대체 속성들을 사용해야 하는데, 그 이유는:

상위 수준 속성들은 각각 독립적으로 캐스케이딩됩니다. 전체 font-feature-settings 목록을 설정하지 않고도 개별 속성만 설정할 수 있습니다.
일부 상위 수준 속성은 해당 폰트 기능을 지원하지 않는 글꼴에 대해서도 합성(synthesize)해서 구현될 수 있습니다.

이 폰트 기능을 설정하려는 경우	font-feature-settings 대신 이 속성을 사용	메모
커닝(`kern`) 또는 수직 커닝(`vkrn`)	font-kerning: normal	font-kerning 속성은 writing-mode에 따라 `kern` 또는 `vkrn` 기능을 설정합니다.
표준 합자(`liga`) 또는 문맥 합자(`clig`)	font-variant-ligatures: common-ligatures
임의(discretionary) 합자(`dlig`)	font-variant-ligatures: discretionary-ligatures
역사적 합자(`hlig`)	font-variant-ligatures: historical-ligatures
문맥 대체(`calt`)	font-variant-ligatures: contextual
아래 첨자(`subs`)	font-variant-position: sub
위 첨자(`sups`)	font-variant-position: super
스몰 캡(`smcp`)	font-variant-caps: small-caps
대문자에서 스몰 캡(`c2sc`)	font-variant-caps: all-small-caps
프티 캡(`pcap`)	font-variant-caps: petite-caps
대문자에서 프티 캡(`c2pc`)	font-variant-caps: all-petite-caps
유니케이스(`unic`)	font-variant-caps: unicase
타이틀용(`titl`)	font-variant-caps: titling-caps
라이닝 숫자(`lnum`)	font-variant-numeric: lining-nums
올드스타일 숫자(`onum`)	font-variant-numeric: oldstyle-nums
비례 숫자(`pnum`)	font-variant-numeric: proportional-nums
표 형식 숫자(`tnum`)	font-variant-numeric: tabular-nums
분수(`frac`)	font-variant-numeric: diagonal-fractions
대체 분수(`afrc`)	font-variant-numeric: stacked-fractions
서수(`ordn`)	font-variant-numeric: ordinal
슬래시 0(`zero`)	font-variant-numeric: slashed-zero
역사적 형태(`hist`)	font-variant-alternates: historical-forms
스타일릭 대체(`salt`)	font-variant-alternates: stylistic()	어떤 대체 글리프를 사용할지 정의하려면 @font-feature-values 규칙을 정의합니다.
문자 변형 1–99(`cv01`–`cv99`)	font-variant-alternates: character-variant()	어떤 문자 변형을 사용할지 정의하려면 @font-feature-values 규칙을 정의합니다.
스워시(`swsh`) 또는 문맥 스워시(`cswh`)	font-variant-alternates: swash()	어떤 스워시를 사용할지 정의하려면 @font-feature-values 규칙을 정의합니다.
장식(`ornm`)	font-variant-alternates: ornaments()	어떤 장식을 사용할지 정의하려면 @font-feature-values 규칙을 정의합니다.
대체 주석 형태(`nalt`)	font-variant-alternates: annotation()	어떤 주석 형태를 사용할지 정의하려면 @font-feature-values 규칙을 정의합니다.
JIS78 형태(`jp78`)	font-variant-east-asian: jis78
JIS83 형태(`jp83`)	font-variant-east-asian: jis83
JIS90 형태(`jp90`)	font-variant-east-asian: jis90
JIS2004 형태(`jp04`)	font-variant-east-asian: jis04
간체 형태(`smpl`)	font-variant-east-asian: simplified
번체 형태(`trad`)	font-variant-east-asian: traditional
전각 폭(`fwid`)	font-variant-east-asian: full-width
비례 폭(`pwid`)	font-variant-east-asian: proportional-width
루비 표기 형태(`ruby`)	font-variant-east-asian: ruby

예를 들어, 과학적 아래 첨자(화학식에 사용되는 작은 숫자)를 제어하는 font-variant 값은 존재하지 않습니다. 이를 사용하면 가독성이 향상되므로, font-feature-settings를 사용해 반드시 활성화해야 합니다:

.chem {
  font-feature-settings: 'sinf'
}

화학식에서 과학적 아래 첨자 숫자 예시 — 과학적 아래 첨자는 화학식의 가독성을 향상시킨다

이 속성의 전체 값은 한 번에 설정됩니다. font-variant 속성과는 달리, 개별 기능을 추가하거나 제거해서 상속된 값을 수정하는 방법은 없습니다.

값이 normal인 경우, 이 속성으로 인해 글리프 선택이나 위치 지정에 아무런 변화도 일어나지 않음을 의미합니다.

기능 태그 값은 다음과 같은 문법을 가집니다:

<feature-tag-value> = <opentype-tag> [ <integer [0,∞]> | on | off ]?
<opentype-tag> = <string>

<opentype-tag>는 대소문자를 구분하는 OpenType 기능 태그입니다. OpenType 명세 [OPENTYPE]에 따라 기능 태그는 네 개의 ASCII 문자로 이루어져 있습니다. 네 글자보다 길거나 짧은 태그 문자열이거나, 코드 포인트 범위 U+20–7E 밖의 문자를 포함하는 경우 무효입니다. 기능 태그는 글꼴에 정의된 기능 태그와 일치하기만 하면 되므로, 명시적으로 등록된 OpenType 기능으로만 제한되지 않습니다. 사용자 정의 기능 태그를 정의하는 글꼴은 OpenType 명세 [OPENTYPE-FEATURES]에 정의된 태그 이름 규칙을 따라야 합니다.

글꼴에 존재하지 않는 기능 태그는 무시되며, 사용자 에이전트는 이러한 기능 태그를 기반으로 폴백 동작을 합성하려 해서는 안 됩니다. 한 가지 예외는, GPOS 테이블에 kern 기능 지원이 없지만 kern 테이블 형태의 커닝 데이터를 포함하는 글꼴에 대해, 사용자 에이전트가 kern 기능을 합성적으로 지원할 수 있다는 점입니다.

일반적으로 작성자는 font-kerning 속성을 사용해 커닝을 명시적으로 활성화하거나 비활성화해야 합니다. 이 속성은 두 종류의 커닝 데이터를 가진 글꼴 모두에 항상 영향을 미치기 때문입니다.

값이 존재하는 경우, 이는 글리프 선택에 사용되는 인덱스를 나타냅니다. <integer> 값은 0 이상이어야 합니다. 값이 0이면 해당 기능이 비활성화됨을 의미합니다. 불리언 기능의 경우, 값이 1이면 기능이 활성화됩니다. 불리언이 아닌 기능의 경우, 값이 1 이상이면 기능이 활성화되며 기능 선택 인덱스를 나타냅니다. on 값은 1과 동일하고, off 값은 0과 동일합니다. 값을 생략하면 1로 간주합니다.

font-feature-settings의 계산값은 맵(map)이므로, 지정된 값에 있는 중복 항목은 보존되어서는 안 됩니다. 동일한 기능 태그가 둘 이상 나타나면, 마지막에 나타난 값이 해당 축(axis)에 대한 이전 값을 모두 대체합니다.

계산값에는 중복이 제거된 기능 태그들이 포함되며, code unit 기준으로 오름차순 정렬됩니다.

font-feature-settings: "sinf" 1;       /* sinf=1 Scientific Inferiors 활성화 */
font-feature-settings: "sinf" on;      /* sinf=1 Scientific Inferiors 활성화 */
font-feature-settings: 'sinf';         /* sinf=1 Scientific Inferiors 활성화 */
font-feature-settings: "sinf" off;     /* sinf=0 Scientific Inferiors 비활성화 */
font-feature-settings: "sinf", 'twid'; /* sinf=1, twid=1 Scientific Inferiors와 Third Widths 활성화 */
font-feature-settings: "sinf" "twid";  /* 잘못된 문법, 쉼표로 구분된 목록 필요 */
font-feature-settings: "silly" off;    /* 잘못된 문법, 태그가 너무 김 */
font-feature-settings: "PKRN";         /* PKRN=1 사용자 정의 기능 활성화 */
font-feature-settings: sinf;           /* 잘못된 문법, 태그는 문자열이어야 함 */

글꼴이 지원하는 범위를 초과하는 값을 지정하는 경우, 그 동작은 명시적으로 정의되지 않습니다. 불리언 기능의 경우, 일반적으로 이러한 값은 기능을 활성화합니다. 불리언이 아닌 기능의 경우, 범위를 벗어난 값은 일반적으로 0 값과 동일하게 취급됩니다. 그러나 두 경우 모두 정확한 동작은 글꼴이 설계된 방식, 특히 해당 기능을 정의하는 데 사용된 룩업 유형에 따라 달라집니다.

구현에서는 OpenType 명세에서 항상 필요(required)하다고 명시한 기능(예: 필수 합자 "rlig")을 끄려는 시도를 무시하도록 선택할 수 있습니다.

Tests

font-variant-ligatures-11.optional.html (live test) (source)

비록 OpenType 기능 태그에 대해서만 구체적으로 정의되어 있지만, 폰트 기능을 지원하는 다른 현대 폰트 형식에 대한 기능 태그가 미래에 추가될 수 있습니다. 가능한 경우, 다른 폰트 형식에 대해 정의된 기능들은 등록된 OpenType 태그의 패턴을 따르도록 해야 합니다.

아래의 일본어 텍스트는 반각 가나 문자로 렌더링됩니다:

body { font-feature-settings: "hwid"; /* 반각 OpenType 기능 */ }

<p>毎日カレー食べてるのに、飽きない</p>

6.13. 폰트 언어 오버라이드: font-language-override 속성

이름:	font-language-override
값:	normal \| <string>
초기값:	normal
적용 대상:	모든 요소 및 텍스트
상속 여부:	yes
백분율:	N/A
계산값:	지정된 문자열 또는 키워드 none
정규 순서:	문법에 따름
애니메이션 유형:	불연속(discrete)

Tests

일반적으로, 작성자는 요소의 콘텐츠 언어를 설정해 위에서 설명한 것처럼 언어별 글리프 치환과 위치 지정을 제어할 수 있습니다:

<!-- S’gaw Karen 전용 기능을 사용해 텍스트를 표시 -->

<p lang="ksw">...</p>

일부 경우, 작성자는 콘텐츠 언어와는 다른 언어 시스템을 지정해야 할 수 있습니다. 예를 들어, 다른 언어의 전통적인 타이포그래피를 흉내 낼 필요가 있을 수 있습니다. font-language-override 속성은 작성자가 폰트의 언어 시스템을 명시적으로 지정해, 콘텐츠 언어에서 유추된 언어 시스템을 덮어쓸 수 있게 해 줍니다.

값은 다음과 같은 의미를 가집니다:

normal: OpenType 폰트로 렌더링할 때, 요소의 콘텐츠 언어를 사용해 OpenType 언어 시스템을 유추함을 지정합니다.
<string>: 대소문자를 구분하는 단일 4글자 OpenType 언어 시스템 태그로, 요소의 언어에서 유추된 언어 시스템 대신 사용할 OpenType 언어 시스템을 지정합니다. 문자열이 네 글자보다 짧으면, 길이가 4가 되도록 끝에 공백(U+0020) 문자로 채운 다음 매칭에 사용합니다.

알 수 없는 OpenType 언어 시스템 태그는 조용히 무시되며, 글리프 선택과 배치에 아무런 영향을 주지 않습니다.

세계 인권 선언은 매우 다양한 언어로 번역되어 있습니다. 터키어에서는, 이 문서의 9조가 아래와 같이 마크업될 수 있습니다:

<body lang="tr">
    <h4>Madde 9</h4>
    <p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.</p>

여기서 사용자 에이전트는 텍스트를 렌더링할 때 lang 속성의 값을 사용해 'fi' 합자 없이 올바르게 표시합니다. font-language-override 속성을 사용할 필요는 없습니다.

그러나 특정 폰트가 특정 언어를 지원하지 않을 수도 있습니다. 이 경우 작성자는 해당 폰트가 지원하는 가까운 관련 언어의 타이포그래피 관례를 사용해야 할 수 있습니다:

<body lang="mk">     <!-- Macedonian lang code -->
    body { font-language-override: "SRB"; /* Serbian OpenType language tag */ }

    <h4>Члeн 9</h4>
    <p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.</p>

콘텐츠 작성자는 지정한 폰트가 세르비아어를 지원한다는 것을 알고 있으므로, 여기의 마케도니아어 텍스트는 세르비아어 타이포그래피 관례를 사용해 렌더링됩니다.

7. 폰트 기능 및 변형 해석

앞 절에서 설명한 것처럼, 폰트 기능과 가변 폰트 축은 여러 가지 방식으로 활성화할 수 있습니다. 스타일 규칙에서 font-variant, font-feature-settings, font-variation-settings를 사용하거나 @font-face 규칙 안에서 사용할 수 있습니다. 이러한 설정들의 합집합에 대한 해석(결정) 순서는 아래에서 정의합니다. CSS 속성을 통해 정의된 기능들은 레이아웃 엔진의 기본 기능 위에 덮어써서 적용됩니다.

7.1. 기본 기능

OpenType 폰트의 경우, 사용자 에이전트는 주어진 스크립트와 쓰기 모드에 대해 OpenType 문서에 정의된 기본 기능을 반드시 활성화해야 합니다. 필수 합자, 공통 합자, 문맥적 형태는 기본적으로 활성화되어야 하며 (OpenType 기능: rlig, liga, clig, calt), 지역화된 형태 (OpenType 기능: locl) 및 합성 문자와 결합 기호를 올바르게 표시하는 데 필요한 기능들 (OpenType 기능: ccmp, mark, mkmk) 역시 기본적으로 활성화되어야 합니다. 이러한 기능들은 font-variant 및 font-feature-settings 속성의 값이 normal인 경우에도 항상 활성화된 상태여야 합니다. 개별 기능은 작성자가 명시적으로 재정의한 경우에만 비활성화되며, 예를 들어 font-variant-ligatures를 'font-variant-ligatures/no-common-ligatures'로 설정한 경우가 이에 해당합니다.

Tests

아랍어, 몽골어, 데바나가리처럼 복잡한 스크립트를 처리하려면 추가적인 기능들이 필요합니다. 세로 줄 안의 직립(upright) 텍스트에 대해서는, 세로 대체(OpenType 기능: vert)가 반드시 활성화되어야 합니다.

7.2. 기능 및 변형 우선순위

앞 절에서 설명한 것처럼, 일반적인 폰트 기능 설정과 글꼴별(font specific) 폰트 기능 속성 설정은 아래와 같은 우선순위 상승(낮은 → 높은) 순서로 해석됩니다. 이 순서를 사용해, 특정 텍스트 런에 영향을 주는 폰트 기능들의 결합 목록을 구성합니다.

기본적으로 활성화되는 폰트 기능이 적용되며, 여기에는 주어진 스크립트에 필수적인 기능들이 포함됩니다. 이에 대한 설명은 § 7.1 Default features를 참조하십시오.
font-weight, font-width, font-style 속성으로 활성화된 폰트 변형(variation)이 적용됩니다.

font-style로 활성화되는 값의 적용은 폰트 선택에 의해 영향을 받습니다. 이 속성이 이탤릭 또는 오블리크 폰트를 선택할 수 있기 때문입니다. 적용되는 값은 폰트 매칭 알고리즘에 의해 결정된, 가장 잘 맞는 값입니다. 사용자 에이전트는 font-style 속성으로 인해 최대 한 개의 값만 적용해야 하며, "ital"과 "slnt" 값을 동시에 설정해서는 안 됩니다.

선택된 폰트가 @font-face 규칙에서 정의된 경우, 이 단계에서 적용되는 값은 해당 @font-face 규칙의 font-weight, font-width, font-style 디스크립터 값 범위로 클램프(제한)되어야 합니다.

그 다음, 이 단계에서 적용된 값은 (필요하다면 다시 한 번) 실제 폰트가 지원하는 값 범위로 클램프되어야 합니다.
상속된 lang/xml:lang 값으로 지정된 언어가 적용됩니다.
폰트가 @font-face 규칙으로 정의된 경우, 해당 @font-face 규칙의 font-language-override 디스크립터로부터 암시되는 폰트 언어 오버라이드가 적용됩니다.
폰트가 @font-face 규칙으로 정의되어 있고, 그 @font-face 규칙에 'font-named-instance/none'이 아닌 값을 가진 하나 이상의 유효한 font-named-instance 디스크립터가 포함되어 있으며, 로드된 폰트 리소스가 § 5.1 Localized name matching 규칙에 따라 그 이름을 가진 named instance를 포함하는 경우, 해당 named instance가 나타내는 모든 변형 값이 적용됩니다. 이 값들은 폰트가 지원하는 값 범위로 클램프됩니다.
폰트가 @font-face 규칙으로 정의된 경우, 해당 @font-face 규칙의 font-variation-settings 디스크립터로부터 암시되는 폰트 변형 값이 적용됩니다.
폰트가 @font-face 규칙으로 정의된 경우, 해당 @font-face 규칙의 font-feature-settings 디스크립터로부터 암시되는 폰트 기능들이 적용됩니다.
font-language-override 속성 값으로부터 암시되는 폰트 언어 오버라이드가 적용됩니다.
font-optical-sizing 속성 값으로부터 암시되는 폰트 변형이 적용됩니다.
font-variant 속성 값과 관련 font-variant 하위 속성들, 그리고 OpenType 기능을 사용하는 다른 CSS 속성들(예: font-kerning 속성)에 의해 암시되는 폰트 기능들이 적용됩니다.
font-variant나 font-feature-settings 이외의 속성들에 의해 결정되는 기능 설정들이 적용됩니다. 예를 들어, letter-spacing 속성에 기본값이 아닌 값을 설정하면 선택적 합자가 비활성화됩니다.
font-variation-settings 속성 값으로부터 암시되는 폰트 변형이 적용됩니다. 이 값들은 폰트가 지원하는 값 범위로 클램프되어야 합니다.
font-feature-settings 속성 값으로부터 암시되는 폰트 기능들이 적용됩니다.

Tests

이러한 순서는 작성자가 @font-face 규칙 안에서 폰트들에 대한 일반적인 기본값 집합을 설정한 뒤, 특정 요소에 대한 속성 설정으로 이를 재정의할 수 있게 해 줍니다. 일반적인 속성 설정은 @font-face 규칙 안의 설정을 덮어쓰며, 저수준 폰트 기능 설정은 font-variant 속성 설정을 덮어씁니다.

결합된 폰트 기능 설정 목록에 동일한 기능에 대한 값이 둘 이상 포함된 경우, 마지막 값이 사용됩니다. 폰트가 특정 기본 폰트 기능을 지원하지 않는 경우, 텍스트는 단순히 그 기능이 활성화되지 않은 것처럼 렌더링되며, 폰트 폴백은 발생하지 않고 명시적으로 특정 속성에 대해 정의된 경우를 제외하면 기능을 합성하려는 시도도 하지 않습니다.

7.3. 기능 우선순위 예시

아래 스타일에서는 숫자가 단락 내에서는 비례로, 가격표 테이블에서는 표 스타일로 렌더링됩니다:

body {
  font-variant-numeric: proportional-nums;
}

table.prices td {
  font-variant-numeric: tabular-nums;
}

@font-face 규칙은 @font-face 정의의 src 디스크립터에서 local()을 사용해 로컬 폰트의 폰트 기능에도 접근할 수 있습니다:

@font-face {
  font-family: BodyText;
  src: local("HiraMaruPro-W4");
  font-variant: proportional-width;
  font-feature-settings: "ital"; /* CJK 텍스트 내 라틴 이탤릭 기능 */
}

body { font-family: BodyText, serif; }

가능하다면, 일본어 폰트 "Hiragino Maru Gothic"이 사용됩니다. 텍스트 렌더링 시 일본어 카나는 비례폭으로, 라틴 텍스트는 이탤릭으로 표시됩니다. 폴백 serif 폰트로 렌더링된 텍스트는 기본 렌더링 속성을 사용합니다.

아래 예시에서, 임의 합자(discretionary ligatures)는 다운로드 폰트에만 활성화되고, "special" 클래스 span에서는 비활성화됩니다:

@font-face {
  font-family: main;
  src: url(fonts/ffmeta.woff) format("woff");
  font-variant: discretionary-ligatures;
}

body         { font-family: main, Helvetica; }
span.special { font-variant-ligatures: no-discretionary-ligatures; }

만약 아래처럼 임의 합자를 활성화하는 font-feature-settings 규칙을 추가한다면:

body         { font-family: main, Helvetica; }
span         { font-feature-settings: "dlig"; }
span.special { font-variant-ligatures: no-discretionary-ligatures; }

이 경우, "special" 클래스 span 내에서는 임의 합자가 표시됩니다. 이는 font-feature-settings와 font-variant-ligatures 속성이 모두 해당 span에 적용되기 때문입니다. font-variant-ligatures의 no-discretionary-ligatures 설정이 OpenType "dlig" 기능을 비활성화하지만, font-feature-settings가 그 뒤에 해석되므로, "dlig" 값이 임의 합자를 다시 활성화합니다.

8. 폰트 변형 속성

참고: 이 절에서 사용되는 기술은 "폰트 변형(font variations)"이라 불립니다. 이러한 폰트의 인스턴스를 "가변 폰트(variable font)"라고 합니다.

8.1. 광학 크기 제어: font-optical-sizing 속성

이름:	font-optical-sizing
값:	auto \| none
초기값:	auto
적용 대상:	모든 요소 및 텍스트
상속됨:	yes
백분율:	해당 없음
계산값:	지정된 키워드
정규 순서:	문법별
애니메이션 타입:	불연속

테스트

타이포그래피적으로, 텍스트가 서로 다른 크기로 렌더링될 때 약간씩 다른 시각적 표현이 더 효과적일 때가 많습니다. 예를 들어, 작은 텍스트 크기에서는 읽기 편하도록 획이 더 두껍고 세리프가 더 크게 디자인됩니다. 큰 텍스트에서는 굵기 대비가 더 뚜렷하고 전체적으로 더 섬세한 형태를 갖습니다.

auto: 사용자 에이전트는 font-size와 화면의 픽셀 밀도를 기준으로 글리프 형태를 수정할 수 있습니다. OpenType 및 TrueType 폰트에서 폰트 변형을 사용할 때, 이는 종종 "opsz" 폰트 변형을 통해 이루어집니다.
none: 사용자 에이전트는 광학 크기 조절을 위해 글리프 형태를 수정해서는 안 됩니다.

서로 다른 광학 크기의 텍스트, 실제 크기를 맞춰서 비교 — Century Expanded의 각 크기를 금속 활자 시절 그대로. 다른 광학 크기들은 여기서 같은 물리적 크기로 정규화되어 있지만, 스타일을 유지하고 가독성을 높이기 위한 디자인 변화를 담고 있습니다.

font-size는 "opsz" 축의 변형 값을 선택할 때 반드시 고려되어야 하며, 다른 신호 역시 고려될 수 있습니다.

참고: 사용자 에이전트는 "opsz" 축에 대해 font-size의 사용 값과 가까운 값을 제공해야 합니다. 그러나 사용자 에이전트는 화면의 픽셀 밀도, 또는 텍스트가 시야에 차지하는 실각(solid angle) 등 다른 요소도 고려할 수 있습니다. 실험 결과에 따르면 이런 부수적 요소를 무시하고 font-size만 사용하는 것이 사용자 에이전트가 이 값을 선택하는 데 가장 좋은 방법일 수 있습니다.

픽셀 밀도와 텍스트의 시각적 크기 모두 font-optical-sizing의 변형 값에 영향을 줄 수 있습니다. 픽셀 밀도나 텍스트의 시각적 크기가 사용자 조작이나 스타일 변경으로 인해 변할 때, 사용자 에이전트는 레이아웃이 변경되지 않는 한 새로운 변형 값을 선택해서는 안 됩니다. 어떤 변경이 레이아웃을 야기하는지 여부는 사용자 에이전트의 자유입니다.

참고: 예를 들어, 핀치-줌 같은 사용자 조작은 텍스트 재흐름이 없다면 레이아웃 변경이 아닌 것으로 간주할 수 있습니다. 하지만 접근성 목적으로 텍스트 크기를 키우는 등 텍스트가 재흐름될 경우엔 레이아웃 변경으로 간주할 수 있습니다. 마찬가지로 transform 속성은 일반적으로 텍스트 재흐름이 없으므로 레이아웃 변경이 아닌 것으로 간주할 수 있습니다. 각 사용자 에이전트는 각 동작이 레이아웃 변경인지 자유롭게 결정할 수 있습니다.

사용자 에이전트는 폰트가 직접 광학 크기 조절을 수행하지 않는 경우 광학 크기를 합성해서는 안 됩니다.

사용자 에이전트는 렌더링에 사용된 폰트가 지원하지 않는 "opsz" 축 값을 선택해서는 안 됩니다. 선택한 값은 폰트가 지원하는 범위로 클램프해야 합니다.

font-optical-sizing는 font-size-adjust와 상호작용합니다. 광학 크기 조절을 적용할 때, 사용자 에이전트는 조정된 폰트 크기에 맞는 광학 크기 값을 위 규정에 따라 적용해야 합니다.

8.2. 로우레벨 폰트 변형 설정 제어: font-variation-settings 속성

이름:	font-variation-settings
값:	normal \| [ <opentype-tag> <number> ]#
초기값:	normal
적용 대상:	모든 요소 및 텍스트
상속 여부:	yes
백분율:	n/a
계산값:	키워드 normal 또는 각 항목이 문자열과 숫자 쌍인 목록
정규 순서:	문법에 따름
애니메이션 유형:	본문 참조

Tests

이 속성은 OpenType 또는 TrueType 폰트 변형에 대한 저수준 제어를 제공합니다. 널리 사용되지는 않지만 특정 사용 사례에서 필요한 폰트 변형에 접근하기 위한 수단으로 의도되었습니다.

작성자는 아래 표에 있는 변형 축을 설정하기 위해 font-variation-settings를 사용해서는 안 됩니다. 대신 더 상위 수준의 대체 속성을 사용해야 하는데, 그 이유는 다음과 같습니다:

상위 수준 속성들은 각각 독립적으로 캐스케이딩됩니다. 전체 font-variation-settings 목록을 설정하지 않고도 개별 축만 설정할 수 있습니다.
일부 상위 수준 속성은 해당 폰트 변형을 지원하지 않는 글꼴에 대해서도 합성(synthesize)해서 구현될 수 있습니다.

이 변형 축을 설정하려는 경우	font-variation-settings 대신 이 속성을 사용	메모
두께(Weight) (`wght`)	font-weight	font-weight 속성은 `wght` 축이 존재할 경우 해당 축을 설정합니다.
폭(Width) (`wdth`)	font-width	font-width 속성은 `wdth` 축이 존재할 경우 해당 축을 설정합니다.
기울기(Slant) (`slnt`) 또는 이탤릭(Italic) (`ital`)	font-style	font-style 속성은 그 값에 따라 `slnt` 또는 `ital` 축을 설정합니다.
광학 크기(Optical size) (`opsz`)	font-optical-sizing	font-optical-sizing 속성은 `opsz` 축이 존재할 경우 해당 축을 설정합니다.

font-variation-settings 사용은 폴백 폰트를 사용해야 하는 상황에서의 폰트 선택에는 영향을 주지 않습니다. 같은 축에 대해 폰트 속성을 사용하는 경우에는 폰트 선택에 영향을 줄 수 있습니다.

가능한 경우, 작성자는 일반적으로 폰트 변형과 관련된 다른 속성들 (예: font-optical-sizing)을 사용해야 하며, 드물게 사용되는 특정 폰트 변형에 접근하는 유일한 방법이 되는 특수한 경우에만 이 속성을 사용해야 합니다.

예를 들어, font-weight: 700을 사용하는 것이, font-variation-settings: "wght" 700을 사용하는 것보다 바람직합니다.

normal 값은 이 속성으로 인해 글리프의 형태, 매칭, 위치에 아무런 변화도 발생하지 않음을 의미합니다.

<opentype-tag>는 대소문자를 구분하는 OpenType 또는 TrueType 변형 축 이름입니다. OpenType / TrueType 명세에 따라, 축 이름은 네 개의 ASCII 문자로 이루어져 있습니다. 네 글자보다 길거나 짧은 축 이름 문자열이거나, 코드 포인트 범위 U+20–7E 밖의 문자를 포함하는 경우 무효입니다. 축 이름은 글꼴에 정의된 축 태그와 일치하기만 하면 되므로, 명시적으로 등록된 OpenType / TrueType 변형 축으로만 제한되지 않습니다. 사용자 정의 축 이름을 정의하는 글꼴은 OpenType 명세에 정의된 이름 규칙을 따라야 합니다.

주어진 축이 글꼴에서 지원되지 않는 경우, 해당 축에 대한 값 설정은 무시되며 아무런 효과도 없습니다. 사용자 에이전트는 이러한 축 태그에 기반해 폴백 동작을 합성하려 해서는 안 됩니다. 같은 CSS font-variation-settings 선언 안의 다른 축 값들은 무시되지 않습니다.

변형 축이 글꼴에서 지원되지만 설정된 값이 폰트에 정의된 범위를 벗어나는 경우, 폰트가 지원하는 가장 가까운 값으로 클램프됩니다.

값은 소수(fractional)일 수도 있고 음수일 수도 있습니다.

Note: 기울어진 글꼴은 font-style 속성을 사용해 얻는 것이 바람직합니다. 그러나 font-variation-settings를 통해 slnt 축을 직접 사용하는 경우, 이 축은 양의 각도가 반시계 방향 기울기를 의미한다는 점을 기억해야 합니다. 이는 CSS와 반대 방향입니다.

같은 축 이름이 둘 이상 나타나는 경우, 마지막에 나타난 값이 해당 축에 대한 이전 값을 모두 대체합니다. 이 중복 제거(deduplication)는 이 속성의 계산값(computed value)에 접근함으로써 확인할 수 있습니다.

계산값에는 중복이 제거된 축 이름들이 포함되며, code unit 기준으로 오름차순 정렬됩니다.

비록 OpenType / TrueType 변형에 대해서만 구체적으로 정의되어 있지만, 폰트 변형을 지원하는 다른 현대 폰트 형식에 대한 변형 축이 미래에 추가될 수 있습니다. 가능한 경우, 다른 폰트 형식에 대해 정의된 변형들은 등록된 변형 축의 패턴을 따르도록 해야 합니다.

font-variation-settings를 애니메이션하는 것은 다음 메커니즘을 사용해 가능합니다. 두 개의 font-feature-settings 선언이 서로 “유사(like)”하다면 두 선언 사이의 애니메이션이 가능합니다. “유사한” 선언이란 동일한 속성 집합이 (순서와 상관없이) 나타나는 경우를 말합니다. 연속된 중복 속성은 이전에 중복된 속성 대신 적용되므로, 속성 개수가 서로 달라도 두 선언이 “유사한” 경우가 있을 수 있습니다. 두 선언이 “유사한” 경우, 애니메이션은 각 선언에서 대응되는 값들 사이에서 쌍(pair) 단위로 일어납니다. 그렇지 않은 경우, 애니메이션은 불가능합니다. 이 상황에서는 애니메이션 도중의 어떤 시점에 “from” 값이 “to” 값으로 전환(swap)됩니다.

9. 컬러 폰트 지원

컬러 폰트는 글리프 테두리를 정의하는 윤곽선뿐 아니라, 글리프 내부에 존재하는 색상까지 폰트 파일에서 함께 기술할 수 있게 해 줍니다.

an example multicolored font — Multicolore, Ivan Filipov 제작

이모지처럼 일부 용도에서는 색이 폰트 안에 고정되어 있는 것이 적절합니다. 다른 경우에는 스타일시트에서 사용되는 색을 제어할 필요가 있습니다.

Tests

font-colorization.html (live test) (source)

CSS는 이를 위해 두 가지 방법을 제공합니다. font-palette 속성은 폰트에 포함된 여러 팔레트 중 하나를 선택할 수 있게 해 줍니다. @font-palette-values 규칙은 팔레트 안의 하나 이상의 색을 재정의하거나, 아예 완전히 다른 팔레트를 새로 만드는 것도 가능하게 해 줍니다.

9.1. 컬러 폰트 팔레트 제어: font-palette 속성

많은 컬러 폰트 파일 형식은 글리프 내부의 색상을 매개변수화할 수 있도록 허용합니다. 이러한 폰트에서는 각 글리프의 기하(geometry)를 설명할 때 색상이 인덱스로 참조됩니다. 이 인덱스들은 폰트 내부에 존재하는 조회(lookup) 테이블을 사용해 현재 활성 팔레트 안에서 해석됩니다. 그러나 많은 폰트는 여러 개의 팔레트를 포함하며, 각 팔레트는 폰트 디자이너가 보기 좋은 시각적 결과를 내기 위해 고른 상호 보완적인 색상들의 집합을 담고 있습니다.

또한 일부 컬러 폰트 파일 형식은 컬러 버전뿐 아니라, 일반적인(무색) 글리프 윤곽선도 함께 제공합니다.

이름:	font-palette
값:	normal \| light \| dark \| <palette-identifier> \| <palette-mix()>
초기값:	normal
적용 대상:	모든 요소 및 텍스트
상속 여부:	yes
백분율:	N/a
계산값:	지정된 키워드, 식별자 또는 <palette-mix()> 함수. 결과 팔레트가 동등한 경우 <palette-mix()>는 단일 키워드 또는 식별자로 단순화되어야 합니다.
정규 순서:	문법에 따름
애니메이션 유형:	계산값에 따름

Tests

palette-mix() 함수는 다음과 같이 정의됩니다:

<palette-mix()> = palette-mix(<color-interpolation-method> , [ [normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2})

normal

color-scheme 속성이 normal'이 아닌 값으로 설정된 경우, 사용자 에이전트는 적절하게 첫 번째 light 또는 dark 팔레트를 선택해야 합니다. 그렇지 않으면 사용자 에이전트는 기본 팔레트 또는 기본 글리프 색상화로 컬러 폰트를 표시합니다.

일부 컬러 폰트 형식에서 전경색을 사용해야 하는 경우, 사용자 에이전트는 color 속성의 계산값을 고려해야 합니다.

In the COLR [OPENTYPE] table, color index 0xFFFF should be rendered according the color property.

For COLR/CPAL [OPENTYPE] fonts, font-palette: normal usually means rendering the font with the palette in the font at index 0.

light

일부 컬러 폰트 형식은 특정 팔레트가 밝은(흰색에 가까운) 배경에서 적용 가능함을 표시하는 메타데이터를 포함합니다. 이 키워드는 사용자 에이전트가 이렇게 표시된 폰트 파일 내의 첫 번째 사용 가능한 팔레트를 사용하도록 합니다. 폰트 파일 형식이 이러한 메타데이터를 고려하지 않거나, 폰트 내에서 이렇게 표시된 팔레트가 하나도 없다면, 이 값은 normal처럼 동작합니다.

dark

일부 컬러 폰트 형식은 특정 팔레트가 어두운(검은색에 가까운) 배경에서 적용 가능함을 표시하는 메타데이터를 포함합니다. 이 키워드는 사용자 에이전트가 이렇게 표시된 폰트 파일 내의 첫 번째 사용 가능한 팔레트를 사용하도록 합니다. 폰트 파일 형식이 이러한 메타데이터를 고려하지 않거나, 폰트 내에서 이렇게 표시된 팔레트가 하나도 없다면, 이 값은 normal처럼 동작합니다.

<palette-identifier>

이 값은 사용할 CSS 정의 팔레트를 식별합니다. 사용자는 @font-palette-values 규칙을 사용해 팔레트를 정의할 수 있습니다. 적용 가능한 @font-palette-values 규칙이 없다면, 이 값은 normal처럼 동작합니다.

<palette-identifier>는 <dashed-ident>로 파싱됩니다.

Note: 이러한 CSS 정의 팔레트는 폰트에 이미 존재하는 팔레트를 참조하거나, 폰트에 이미 존재하는 팔레트를 수정한 것이거나, 완전히 새로운 팔레트일 수도 있습니다.

<palette-mix()>

이 값은 두 팔레트 값 사이의 보간(interpolation)에서의 위치를 정의하며, 그 두 팔레트 값은 <palette-identifier>로, 또는 팔레트 키워드 normal, light, dark, 또는 또 다른 <palette-mix()> 값으로 식별됩니다.

폰트의 글리프는 첫 번째 및 두 번째 팔레트 인자로 지정된 팔레트의 일치하는 색상 인덱스들 사이에서, 각 팔레트 색상 인덱스마다 보간하여 생성된 팔레트로 렌더링되어야 하며, 필요하다면 <palette-mix()> 함수는 재귀적으로 해석되어야 합니다.

각 팔레트 색상에 대해, 보간은 <color-mix()> 함수의 규칙을 따릅니다.

퍼센트 값은 CSS Color 5 § 3.2 Percentage Normalization에 따라 정규화됩니다.

Tests

palette-mix-computed.html (live test) (source)

Note: 'font-palette/light' 및 'font-palette/dark'라는 이름은 컬러 팔레트 자체의 색을 설명하는 것이 아니라, 해당 컬러 팔레트를 사용할 수 있는 배경을 설명합니다.

다크 모드가 적용 중일 때 다크 모드 팔레트 사용

@media (prefers-color-scheme: dark) {
        .banner {font-palette: dark;
      }
    }

팔레트 간 애니메이션.

@font-palette-values --pink {
  font-family: Nabla;
  base-palette: 1;
}

@font-palette-values --yellow {
  font-family: Nabla;
  base-palette: 7;
}

@keyframes animate-palette {
  from {
    font-palette: --yellow;
  }
  to {
    font-palette: --pink;
  }
}

p {
  font-family: Nabla;
  animation: animate-palette 1.4s infinite alternate linear;
}

The word Animate animated between a pink and a yellow palette. — Nabla Color by typearture.com - 폰트의 1번과 7번 팔레트 사이를 애니메이션.

Tests

예시와 그림을 더 추가하세요.

9.2. 사용자 정의 폰트 컬러 팔레트: @font-palette-values 규칙

@font-palette-values 규칙은 하나의 색상 팔레트를 정의하고 그 팔레트를 특정 폰트와 연결합니다. 이를 통해 웹 작성자는 폰트 파일 안에 미리 존재하는 팔레트로만 제한되지 않고, 컬러 폰트 내부에서 사용할 임의의 <color>들을 선택할 수 있습니다.

Note: OpenType의 CPAL 테이블은 sRGB 색상으로만 제한됩니다. <color>는 @font-palette-values 안에서 어떤 CSS 색상이든 허용됩니다. 일부 구현은 현재 sRGB로 제한된 API를 사용하고 있으며, 따라서 지정된 색상을 sRGB로 매핑할 수도 있습니다. 이는 일시적인 제약으로 예상됩니다. 작성자는 이 sRGB 매핑에 의존해서는 안 됩니다.

추가로, 이 규칙이 특정 폰트와 결합된다는 점 덕분에 하나의 팔레트 이름이 폰트마다 다르게 적용될 수 있으며, 하나의 요소 안에서 여러 폰트를 사용할 때 (즉, 폰트 폴백 상황에서) 여러 폰트에 걸쳐 비슷한 색들이 사용되도록 할 수 있습니다.

Note: 웹 작성자는 하나의 폰트에 대해 여러 개의 팔레트를 만들어 웹 콘텐츠에 여러 개의 테마를 제공하고자 할 수 있습니다. 또한 여러 폰트에 대해 서로 잘 맞는 팔레트들을 만들어, 다양한 폰트에 걸쳐 일관된 디자인을 얻고자 할 수도 있습니다.

@font-palette-values 규칙은 폰트에서 사용되는 색상 팔레트를 나타냅니다. 팔레트는 순서 있는 색상 모음으로 이루어집니다. @font-palette-values를 사용하면 웹 작성자는 폰트 안에 존재하는 팔레트를 참조할 수도 있고, 작성자가 정의한 색들로 채워진 팔레트를 새로 만들 수도 있습니다. 또한 폰트 안의 팔레트에서 일부 색만 웹 작성자가 기술한 색으로 덮어쓸 수도 있습니다.

팔레트는 항상 완전한(complete) 상태이며, 색이 빠진 팔레트를 기술하는 것은 불가능합니다. 색이 빠지게 되는 경우, 그 색은 base-palette 디스크립터로 지정된 폰트 내부 팔레트에서 가져옵니다.

수학 함수들, 예를 들어 calc(), 그리고 var(), env() 역시 @font-palette-values 규칙 안의 디스크립터 값으로 유효합니다. 이들은 루트 요소의 컨텍스트 안에서 평가됩니다. 상대 단위 역시 루트 요소의 컨텍스트 안에서 평가됩니다.

@font-palette-values 규칙은 @font-palette-values at-키워드와 그 뒤에 오는 디스크립터 선언 블록으로 구성됩니다. 문법은 다음과 같습니다:

@font-palette-values <dashed-ident> {
  <declaration-list>
}

Tests

@font-palette-values 규칙은 이 명세에서 정의된 디스크립터들을 허용합니다.

동일한 이름을 가진 @font-palette-values 규칙이 여러 개 정의된 경우, 문서 순서상 마지막 규칙이 우선하며, 그 앞에 온 것들은 모두 무시됩니다.

Bixa Color의 색상 팔레트를 수정합니다.

@font-palette-values --Cooler {
  font-family: Bixa;
  base-palette: 1;
  override-colors:
    1 #7EB7E4;
}

overriding a color — Bixa Color by Novo Typo. 위쪽은 폰트 안 색을 그대로 사용, 아래쪽은 주황색을 파란색으로 변경.

Handover Sans의 색상 팔레트를 수정합니다.

@font-palette-values --Augusta {
  font-family: Handover Sans;
  base-palette: 3;
  override-colors:
    1 rgb(43, 12, 9),
    3 var(--highlight);
}

이 디스크립터들은 자신이 정의된 @font-palette-values 규칙의 컨텍스트 안에서만 적용되며, 문서 언어 요소들에는 적용되지 않습니다. 특정 @font-palette-values 규칙 안에서 같은 디스크립터가 여러 번 나타나는 경우, 마지막 디스크립터 선언만 사용되고 그 이전의 선언들은 모두 무시됩니다.

이러한 각 팔레트는 이름을 공유하는 각 @font-face에 적용됩니다.

두 개의 컬러 폰트를 약간 초록빛 팔레트로 사용하고 싶습니다. 첫 번째 폰트 Bixxxa에는 이미 사용할 수 있는 팔레트가 있지만, Bungeehee는 그린 팔레트를 얻기 위해 한 가지 색을 덮어써야 합니다.

@font-face {
  font-family: Bixxxa;
  src: url('./bixxxa.woff') format('woff');
}

@font-face {
  font-family: Bungeehee;
  src: url('./bungeehee.woff') format('woff');
}

@font-palette-values --ToxicGreen {
  font-family: Bixxxa;
  base-palette: 3; /* 이것은 Bixxxa의 그린 팔레트입니다 */
}


@font-palette-values --ToxicGreen {
  font-family: Bungeehee;
  base-palette: 7; /* 이것은 Bungeehee의 그린 팔레트... */
  override-colors: 2 lime; /* ...하지만 이것은 분홍색이므로 lime으로 덮어씁니다 */
}

h1 {
  font-family: Bixxxa;
  font-palette: --ToxicGreen;
}

h2 {
  font-family: Bungeehee;
  font-palette: --ToxicGreen;
}

예시: Roel Nieskens

Note: 하나의 패밀리 이름이 여러 개의 실제(physical) 폰트 사이에서 공유되는 경우 (예: unicode-range를 사용해 합성 폰트를 만든 경우), 그리고 그 폰트들이 서로 다른 팔레트를 가지고 있다면, @font-palette-values를 사용해 부분적인 팔레트를 지정했을 때의 결과는 작성자가 의도한 것과 다를 가능성이 큽니다. 이런 경우에는 완전한 팔레트 정의를 제공하는 편이 낫습니다.

위 예시에서, 두 개의 서로 다른 폰트 패밀리가 호환되는 이름의 팔레트를 갖도록 설정되어 있으므로, 다음과 같이 작성할 수도 있습니다.

h3 {
  font-family: Bixxxa, Bungeehee;
  font-palette: --ToxicGreen;
}

이렇게 하면 팔레트 번호는 서로 다르더라도 각 폰트에 원하는 팔레트가 올바르게 적용됩니다.

주어진 @font-palette-values 규칙 집합은 이 규칙들을 포함하는 문서 안에서 사용할 수 있는 작성자 정의 팔레트가 무엇인지 정의합니다.

작성자 정의 폰트 색상 팔레트는 반드시 그것을 참조하는 문서들에서만 사용할 수 있어야 합니다. 작성자 정의 색상 팔레트를 그것을 참조하지 않는 문서에서 사용하는 것은 보안 누출을 야기할 수 있습니다. 한 페이지의 내용이 다른 페이지에 영향을 줄 수 있게 되어, 공격자가 공격 벡터로 악용할 수 있기 때문입니다.

이 at-rule은 CSS의 전방 호환 파싱 규칙을 따릅니다. 선언 블록 안의 속성들처럼, 사용자 에이전트가 지원하지 않는 디스크립터 선언들은 모두 무시해야 합니다. @font-palette-values 규칙에는 font-family 디스크립터가 필요합니다. 이것이 없으면 @font-palette-values 규칙은 잘못된 것이며, 전체를 무시해야 합니다.

플랫폼 자원이 제한되어 있거나, 컬러 폰트 지원을 구현하지 않았거나, 컬러 폰트를 비활성화할 수 있도록 구현한 사용자 에이전트의 경우, @font-palette-values 규칙은 단순히 무시되어야 하며, 이 명세에서 정의된 개별 디스크립터들의 동작은 변경되어서는 안 됩니다.

9.2.1. 폰트 패밀리: font-family 디스크립터

이름:	font-family
대상:	@font-palette-values
값:	<font-family-name>#
초깃값:	N/A

이 디스크립터는 이 팔레트가 적용될 폰트 패밀리를 정의하며, § 5 Font Matching Algorithm과 동일한 폰트 패밀리 목록을 사용합니다. 이 팔레트는 이러한 패밀리 이름을 가진 폰트에만 적용됩니다. 이 디스크립터 값은 이름이 있는 폰트 패밀리만 허용된다는 뜻이며, 폰트 패밀리 목록에 제네릭 폰트를 포함하는 규칙은 문법 오류가 됩니다. 폰트 패밀리 목록 안에서 문법 오류가 발생하는 경우, 해당 디스크립터는 무시되어야 하며 (CSS OM 안에는 남지만, 어떤 폰트 패밀리와도 매칭되지 않습니다).

9.2.2. 기본 팔레트 지정: base-palette 디스크립터

이름:	base-palette
대상:	@font-palette-values
값:	light \| dark \| <integer [0,∞]>
초기값:	N/A

light: 일부 컬러 폰트 형식은 특정 팔레트가 밝은(흰색에 가까운) 배경에서 적용 가능함을 표시하는 메타데이터를 포함합니다. 이 키워드는 폰트 파일에서 이렇게 표시된 첫 번째 사용 가능한 팔레트를 식별합니다. 폰트 파일 형식이 이러한 메타데이터를 지원하지 않거나, 폰트 안에 이렇게 표시된 팔레트가 하나도 없다면, 이 값은 0처럼 동작합니다.
dark: 일부 컬러 폰트 형식은 특정 팔레트가 어두운(검은색에 가까운) 배경에서 적용 가능함을 표시하는 메타데이터를 포함합니다. 이 키워드는 폰트 파일에서 이렇게 표시된 첫 번째 사용 가능한 팔레트를 식별합니다. 폰트 파일 형식이 이러한 메타데이터를 지원하지 않거나, 폰트 안에 이렇게 표시된 팔레트가 하나도 없다면, 이 값은 0처럼 동작합니다.
<integer [0,∞]>: 폰트 안의 (0을 기준으로 하는) 숫자 팔레트 인덱스를 식별합니다.

Banner Flag의 색상 팔레트를 수정합니다

@font-palette-values --Festival {
  font-family: Banner Flag;
  base-palette: 1;
  override-colors:
    0 rgb(123, 64, 27),
    1 darkblue,
    2 var(--highlight);
}

이 디스크립터는 포함하고 있는 @font-palette-values 규칙이 초기값으로 사용할 폰트 안의 팔레트를 지정합니다. @font-palette-values 규칙 안에 override-colors 키가 없다면, 해당 @font-palette-values 규칙은 이 디스크립터 값과 같은 인덱스를 가진 폰트 내 팔레트를 그대로 나타냅니다. override-colors 키가 @font-palette-values 규칙 안에 존재하는 경우, 해당 디스크립터 값의 각 항목은 이 @font-palette-values 블록이 나타내는 색상 팔레트 내부의 하나의 색을 덮어씁니다.

Handover Sans의 세 번째 색상 팔레트에 이름을 붙입니다

@font-palette-values --Augusta {
  font-family: Handover Sans;
  base-palette: 3;
}

이 디스크립터가 @font-palette-values 안에 존재하지 않거나, 폰트가 base-palette 값의 인덱스에 해당하는 팔레트를 포함하지 않는 경우, 이는 0이 지정된 것처럼 동작합니다. 폰트가 어떤 색상 팔레트도 포함하지 않는 경우, 이 @font-palette-values 규칙이 나타내는 초기 색상 팔레트에는 어떤 색도 포함되지 않습니다. 팔레트 안의 색은 @font-palette-values 규칙 안에서 override-colors 디스크립터를 사용해 덮어쓸 수 있습니다.

9.2.3. 팔레트의 색상 오버라이드: override-colors 디스크립터

이름:	override-colors
대상:	@font-palette-values
값:	[ <integer [0,∞]> <color> ]#
초기값:	N/A

이 디스크립터는 이 @font-palette-values 규칙이 나타내는 초기 색상 팔레트에 색들을 덮어씁니다.

override-colors 디스크립터는 팔레트 인덱스 항목과 색으로 이루어진 쉼표로 구분된 목록을 받습니다. 쉼표로 구분된 목록의 각 항목은 팔레트 항목 하나와 그 항목을 대체할 색으로 이루어진 튜플을 나타냅니다.

지정되는 각 <color>는 반드시 절대 색(absolute color)이어야 하며, 그렇지 않으면 디스크립터는 무효가 됩니다.

이 디스크립터 값 안의 각 키/값 쌍에 대해, 초기 팔레트(즉, base-palette 디스크립터를 사용해 지정된 팔레트)에서 그 키를 가진 색은 이 디스크립터 값에 지정된 색으로 덮어써집니다. 초기 팔레트의 인덱스 범위를 벗어나는 키는 무시되지만, 그렇다고 해서 디스크립터 전체가 무효가 되지는 않습니다.

override-colors 디스크립터 안의 팔레트 인덱스 항목은 (0을 기준으로 하는) 팔레트 인덱스 항목입니다.

정수 값은 0부터 시작하는 인덱스입니다.

여러 개의 서로 다른 키/값 쌍이 동일한 색 인덱스(이름이든 정수든)를 가리키는 경우, 렌더링 시에는 마지막 키가 사용됩니다. 그러나 직렬화 측면에서는 두 키/값 쌍이 모두 그대로 남아 있습니다.

Note: 이는 두 개의 서로 다른 요소에 동일한 값의 font-palette를 사용하더라도, 그 두 요소의 컨텍스트에서 @font-palette-values 규칙 안 변수 값이 다르게 적용될 수 있으므로, 실제 사용되는 팔레트가 서로 달라질 수 있음을 의미합니다.

CSS에서 제공되는 색 (덮어쓰기이든, 새 항목이든)은 지원되는 어떤 색 공간도 사용할 수 있습니다.

Blaka Ink의 색상 팔레트를 수정합니다

@font-palette-values --Festival {
  font-family: Blaka Ink;
  base-palette: 0;
  override-colors:
    0 oklch(0.63 0.12 105.7),
    1 color(display-p3 0.23 0.22 0.04),
    2 color(prophoto-rgb 0.37 0.27 0.09);
}

Note: CPAL 테이블 버전 0과 1에서 지정된 색들은 sRGB입니다.

9.3. 텍스트 표현 스타일 선택: font-variant-emoji 속성

이름:	font-variant-emoji
값:	normal \| text \| emoji \| unicode
초기값:	normal
적용 대상:	모든 요소 및 텍스트
상속 여부:	yes
백분율:	N/a
계산값:	지정된 키워드
정규 순서:	문법에 따름
애니메이션 유형:	불연속(discrete)

Tests

이 속성은 웹 작성자가 특정 이모지 코드 포인트에 대해 이모지 표현(emoji presentation)과 텍스트 표현(text presentation) 가운데 어느 쪽을 사용할지 선택할 수 있게 합니다. 전통적으로는 이러한 표현 스타일을 선택하기 위해 특정 코드 포인트 뒤에 Variation Selector 15(U+FE0E)나 Variation Selector 16(U+FE0F)를 덧붙였습니다. 그러나 font-variant-emoji를 사용하면 변형 선택자를 대신할 수 있는 기본 표현 스타일을 웹 작성자가 설정할 수 있습니다.

이 속성의 영향을 받는 것은 유니코드에서 유니코드 이모지 표현 시퀀스에 기여한다고 열거한 코드 포인트들뿐입니다. 이 CSS 명세에서는 이러한 문자를 Emoji Presentation Participating Code Points 라고 부릅니다. 이 속성은 그 밖의 어떤 문자에도 영향을 주지 않습니다.

이 속성은 폰트 폴백에도 영향을 줄 것으로 예상되지만, 폰트 폴백과 font-variant-emoji의 상호 작용 방식은 의도적으로 구체적으로 정의하지 않았습니다. 다만, 위의 cluster matching 절에서 정의한 대로, 변형 선택자는 이전 클러스터 안에 반드시 포함되어야 합니다. 이 동작의 자연스러운 결과는 변형 선택자가 이전 문자와 다른 폰트로 렌더링되어서는 안 된다는 것입니다. 따라서 폰트 폴백은 (값 설명에서와 같이) 해당 변형 선택자가 의도된 것처럼 동작해야 하며, 그 다음 클러스터 폴백 규칙을 포함한 폰트 폴백이 수행되는데, 이때 이러한 “덧붙여진” 변형 선택자의 표현 선호도 역시 고려해야 합니다.

font-variant-emoji를 사용하더라도 요소 내용 안에 Variation Selector 15(U+FE0E)나 Variation Selector 16(U+FE0F)가 있으면 해당 요소에서의 렌더링은 font-variant-emoji가 지정한 것보다 이 변형 선택자들에 의해 우선적으로 결정됩니다. 따라서 font-variant-emoji는 렌더링되는 텍스트가 이를 벗어날(opt out) 수 있는 기본 표현을 설정하는 역할을 합니다.

Note: 서로 다른 플랫폼은, 이모지 표현 시퀀스를 어떻게 처리할지에 대해 서로 다른 관례를 가지고 있습니다. 크로스 플랫폼 UA는 각 플랫폼의 관례를 따르길 원할 수도 있고, 모든 플랫폼에서 동일한 접근을 사용하길 원할 수도 있습니다. 이모지 스타일 렌더링이 요청된 경우, 어떤 UA는 컬러 테이블이 없는 폰트는 무시하고자 할 수 있습니다. 다른 UA는 임의의 클러스터에 대해 사용하는 것과 같은 기계적인 클러스터 폴백 알고리즘을 그대로 사용하고자 할 수도 있습니다.

FE0E VARIATION SELECTOR-15 및 U+FE0F VARIATION SELECTOR-16 이외의 변형 선택자들은 폰트 선택에 아무런 영향을 주어서는 안 됩니다. 이러한 변형 선택자가 존재하지만, 이전에 선택된 폰트가 이를 지원하지 않는 경우, 그 변형 선택자는 무시됩니다.

BCP47의 -u- 확장 태그는 lang 또는 xml:lang 속성에 의해 허용되는 언어 태그에 붙을 수 있지만, 특정 문자에 대해 이모지 표현을 사용할지 텍스트 표현을 사용할지 사용자 에이전트가 결정하는 데 있어서는 고려 대상이 되어서는 안 됩니다.

normal: 사용자 에이전트는 Emoji Presentation Participating Code Point를 이모지 스타일 또는 텍스트 스타일 가운데 아무 쪽으로나 그릴 수 있습니다. 보통 사용자 에이전트는 이 결정을 내릴 때 플랫폼 관례를 따릅니다.
text: 코드 포인트들은 모든 Emoji Presentation Participating Code Point 뒤에 U+FE0E VARIATION SELECTOR-15가 덧붙여진 것처럼 렌더링됩니다.
emoji: 코드 포인트들은 모든 Emoji Presentation Participating Code Point 뒤에 U+FE0F VARIATION SELECTOR-16이 덧붙여진 것처럼 렌더링됩니다.
unicode: 코드 포인트들은 각 Emoji Presentation Participating Code Point에 대한 Emoji 및 Emoji_Presentation 속성 값에 따라, [UTS51]에 정의된 대로 이모지 기본(emoji-default), 텍스트 기본(text-default), 또는 텍스트 전용(text-only)으로 렌더링됩니다. FE0E VARIATION SELECTOR-15 및 U+FE0F VARIATION SELECTOR-16이 존재하는 경우, 이는 개별 Emoji Presentation Participating Code Points의 기본 표현을 덮어씁니다.

U+1F6CB COUCH AND LAMP의 이모지 형태를 표시하려면, CustomEmoji.ttf가 이 문자에 대한 이모지 형태를 지원한다는 사용자 에이전트의 인식에 따르도록 하고, 다음과 같이 사용합니다:

@font-face {
  font-family: "Custom Emoji";
  src: url("CustomEmoji.ttf") format("truetype");
}
...
<div style="font-family: 'Custom Emoji'; font-variant-emoji: emoji;">&#x1F6CB;</div>

10. 폰트 분류

하나의 폰트는 다음 범주 중 하나 또는 여러 개에 속할 수 있습니다:

10.1. 설치된 폰트

폰트는 기기에 전역적으로 설치될 수 있습니다. 이런 폰트는 일반적으로 모든 애플리케이션에서 접근 가능하며, CSS 개념이 없는 애플리케이션에서도 사용됩니다. 폰트 객체를 뒷받침하는 파일들은 사용자의 기기에 존재하며, 원격 리소스가 아닙니다.

설치된 폰트는 웹 폰트가 되어서는 안 되며, 웹 폰트도 설치된 폰트가 되어서는 안 됩니다.

10.2. 웹 폰트

폰트는 원격 리소스를 통해 제공될 수 있으며, 반드시 사용자 에이전트의 리소스 페칭 인프라를 사용해 요청해야 합니다. 웹 폰트는 두 가지 메커니즘으로 표현됩니다:

@font-face 규칙
문서의 FontFaceSet에 속한 FontFace 멤버

웹 폰트는 해당 @font-face 규칙과 연결되었거나 FontFaceSet을 소유한 문서에서만 접근 가능해야 합니다. 기기의 다른 애플리케이션에서는 웹 폰트에 접근할 수 없어야 합니다.

설치된 폰트는 웹 폰트가 되어서는 안 되며, 웹 폰트도 설치된 폰트가 되어서는 안 됩니다.

웹 폰트는 설치된 폰트를 가립니다. 즉, 설치된 폰트와 웹 폰트가 같은 패밀리명을 가지고 있다면, 설치된 폰트는 접근할 수 없습니다.

10.3. 사전 설치 폰트와 사용자 설치 폰트

사용자는 기기에 폰트를 직접 설치할 수 있습니다. 사용자 설치 폰트는 "설치" 버튼 클릭, 또는 특정 디렉토리에 파일을 복사하는 등 사용자가 직접 실행하는 작업을 통해 설치됩니다. 이런 폰트는 사용자 설치 폰트이자 설치된 폰트입니다. 웹 콘텐츠 저자는 사용자 설치 폰트의 존재를 당연하게 생각해서는 안 됩니다. 왜냐하면 어떤 사용자가 특정 폰트를 설치했을지 확신할 수 없기 때문입니다.

사용자 설치 폰트가 폰트 매칭 알고리즘과 어떻게 상호작용하는지에 대해서는 폰트 매칭 알고리즘 설명을 참고하세요.

사용자 설치 폰트가 아닌 모든 설치된 폰트는 사전 설치 폰트입니다. 특정 운영체제의 특정 버전을 사용하는 모든 사용자가 동일한 사전 설치 폰트 집합을 가지고 있을 가능성이 높습니다. 따라서, 웹 콘텐츠 저자는 해당 OS를 대상으로 할 때 이들 폰트의 패밀리명을 font-family 속성에 사용할 수 있습니다.

10.4. 시스템 폰트

시스템 폰트는 system-ui 일반 글꼴 패밀리 이름에서 사용하는 폰트입니다. 이는 사전 설치된 폰트(Preinstalled Font)의 예입니다.

추가적인 글꼴 스타일은 ui-sans-serif, ui-serif, ui-monospace, 및 ui-rounded로 제공될 수 있으며, 시스템이 이를 제공하는 경우 이들 또한 사전 설치된 폰트(Preinstalled Font)입니다.

테스트

11. 폰트 기술 및 포맷

11.1. 폰트 기술

이 features-opentype, features-aat 및 features-graphite 기술은 글꼴 기능 지원을 가리킵니다, 일반적으로 [OPENTYPE]에서 GSUB 및 GPOS 테이블로, 뿐만 아니라 [AAT-FEATURES]에서는 morx 및 kerx 테이블 및 [GRAPHITE] 와 함께 Silf, Glat , Gloc , Feat 및 Sill 테이블 문서화된 Graphite Table Format에. § 6 Font Feature Properties에 대한 절은 이러한 기능들과 상호작용하는 속성을 설명합니다.

이 variations 기술은 글꼴 변형 지원을 가리키며, 일반적으로 [OPENTYPE]에서 avar, cvar, fvar, gvar, HVAR, MVAR, STAT, 및 VVAR 테이블로, 뿐만 아니라 [AAT-FEATURES]에서는 avar, cvar, fvar, gvar 테이블. § 2 Basic Font Properties 절과 § 8 글꼴 변형 속성 은 이러한 기능들과 상호작용하는 속성을 설명합니다.

이 color-colrv0, color-colrv1, color-svg, color-sbix 및 color-cbdt 기술은 다양한 종류의 컬러 글꼴 파일 기술을 가리킵니다. 각각은 테이블 (COLR, SVG, sbix 또는 CBDT) [OPENTYPE] 또는 [AAT-FEATURES] 글꼴에서 사용되며, 이 요구사항을 충족하려면 지원되어야 합니다.

이 palettes 기술은 폰트 팔레트 지원을 가리키며, 일반적으로 [OPENTYPE] 및 [AAT-FEATURES] 와 함께 CPAL 테이블. § 9 컬러 폰트 지원절은 이러한 기능들과 상호작용하는 속성을 설명합니다.

이 incremental 기술 은 클라이언트의 점진적 글꼴 전송 지원을 가리킵니다 [IFT].

이에 대한 배경은 [PFE-report]를 참조하세요.

웹 저자는 tech() 함수를 @font-face의 src 기술자 안에 글꼴을 올바르게 렌더링하려면 지원이 필요함을 나타내기 위해. 이 메커니즘은 우아하게 폴백하기 위해 보조 글꼴로 요청된 지원이 없을 때 사용될 수 있습니다.

이 @font-face 블록은 컬러 폰트 지원이 사용자 에이전트에 있는 경우 컬러 폰트를 사용하는 방법을 보여주고, 지원이 없을 경우 비컬러 폰트로 대체(fallback)합니다.

@font-face {
  font-family: "Trickster";
  src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1),
  url("trickster-outline.otf") format(opentype);
}

11.2. 폰트 포맷

이 명세에서 정의된 포맷 문자열은 아래와 같습니다. <font-format> 값은 아래 포맷의 동의어입니다.

문자열	글꼴 형식	일반 확장자	일반 미디어 타입
"collection"	OpenType Collection	.otc,.ttc	font/collection
"embedded-opentype"	Embedded OpenType	.eot	application/vnd.ms-fontobject
"opentype"	OpenType	.ttf, .otf	font/otf, font/ttf
"svg"	SVG 글꼴 (더 이상 권장되지 않음)	.svg, .svgz	image/svg+xml
"truetype"	TrueType	.ttf	font/ttf
"woff"	WOFF 1.0 (웹 오픈 폰트 형식)	.woff	font/woff
"woff2"	WOFF 2.0 (웹 오픈 폰트 형식)	.woff2	font/woff2

테스트

format-specifiers-variations.html (실시간 테스트) (소스)

TrueType과 OpenType이 일반적으로 혼용되는 사용 관행이 겹치는 점을 고려할 때, 포맷 힌트 "truetype"과 "opentype"은 동의어로 간주되어야 합니다; "opentype" 포맷 힌트가 해당 글꼴이 PostScript CFF 스타일 글리프 데이터를 포함하거나 OpenType 레이아웃 정보를 포함함을 의미하지는 않습니다 (자세한 배경은 부록 A를 참조하십시오).

12. 오브젝트 모델

다음의 @font-face 및 @font-feature-values 규칙 다음의 CSS Object Model 확장을 통해 접근할 수 있습니다.

테스트

idlharness.html (실시간 테스트) (소스)

12.1. `CSSFontFaceRule` 인터페이스

이 CSSFontFaceRule 인터페이스는 <@font-face> 규칙을 나타냅니다.

[Exposed=Window]
interface CSSFontFaceDescriptors : CSSStyleDeclaration {
  attribute [LegacyNullToEmptyString] CSSOMString src;
  attribute [LegacyNullToEmptyString] CSSOMString fontFamily;
  attribute [LegacyNullToEmptyString] CSSOMString font-family;
  attribute [LegacyNullToEmptyString] CSSOMString fontStyle;
  attribute [LegacyNullToEmptyString] CSSOMString font-style;
  attribute [LegacyNullToEmptyString] CSSOMString fontWeight;
  attribute [LegacyNullToEmptyString] CSSOMString font-weight;
  attribute [LegacyNullToEmptyString] CSSOMString fontStretch;
  attribute [LegacyNullToEmptyString] CSSOMString font-stretch;
  attribute [LegacyNullToEmptyString] CSSOMString fontWidth;
  attribute [LegacyNullToEmptyString] CSSOMString font-width;
  attribute [LegacyNullToEmptyString] CSSOMString unicodeRange;
  attribute [LegacyNullToEmptyString] CSSOMString unicode-range;
  attribute [LegacyNullToEmptyString] CSSOMString fontFeatureSettings;
  attribute [LegacyNullToEmptyString] CSSOMString font-feature-settings;
  attribute [LegacyNullToEmptyString] CSSOMString fontVariationSettings;
  attribute [LegacyNullToEmptyString] CSSOMString font-variation-settings;
  attribute [LegacyNullToEmptyString] CSSOMString fontNamedInstance;
  attribute [LegacyNullToEmptyString] CSSOMString font-named-instance;
  attribute [LegacyNullToEmptyString] CSSOMString fontDisplay;
  attribute [LegacyNullToEmptyString] CSSOMString font-display;
  attribute [LegacyNullToEmptyString] CSSOMString fontLanguageOverride;
  attribute [LegacyNullToEmptyString] CSSOMString font-language-override;
  attribute [LegacyNullToEmptyString] CSSOMString ascentOverride;
  attribute [LegacyNullToEmptyString] CSSOMString ascent-override;
  attribute [LegacyNullToEmptyString] CSSOMString descentOverride;
  attribute [LegacyNullToEmptyString] CSSOMString descent-override;
  attribute [LegacyNullToEmptyString] CSSOMString lineGapOverride;
  attribute [LegacyNullToEmptyString] CSSOMString line-gap-override;
};

[Exposed=Window]
interface CSSFontFaceRule : CSSRule {
  [SameObject, PutForwards=cssText] readonly attribute CSSFontFaceDescriptors style;
};

12.2. `CSSFontFeatureValuesRule` 인터페이스

다음과 같이 CSSRule 인터페이스가 확장됩니다:

partial interface CSSRule {
    const unsigned short FONT_FEATURE_VALUES_RULE = 14;
  };

이 CSSFontFeatureValuesRule 인터페이스는 @font-feature-values 규칙을 나타냅니다.

[Exposed=Window]
interface CSSFontFeatureValuesRule : CSSRule {
  attribute CSSOMString fontFamily;
  readonly attribute CSSFontFeatureValuesMap annotation;
  readonly attribute CSSFontFeatureValuesMap ornaments;
  readonly attribute CSSFontFeatureValuesMap stylistic;
  readonly attribute CSSFontFeatureValuesMap swash;
  readonly attribute CSSFontFeatureValuesMap characterVariant;
  readonly attribute CSSFontFeatureValuesMap styleset;
  readonly attribute CSSFontFeatureValuesMap historicalForms;
};

[Exposed=Window]
interface CSSFontFeatureValuesMap {
  maplike<CSSOMString, sequence<unsigned long>>;
  undefined set(CSSOMString featureValueName,
    (unsigned long or sequence<unsigned long>) values);
};

fontFamily 형식의 CSSOMString: 주어진 기능 값 집합이 정의된 하나 이상의 글꼴 패밀리 목록입니다.
CSSFontFeatureValuesMap 형식의 값 맵, 읽기 전용: 지정된 font-variant-alternates 값 유형에 대해 기능 값 이름과 연관된 기능 값의 맵

각 CSSFontFeatureValuesRule의 값 맵 속성은 해당하는 feature value block을 통해 정의된 값을 반영합니다. 따라서 annotation 속성은 @annotation feature value block 안에 포함된 값을 포함하고, ornaments 속성은 @ornaments feature value block 안에 포함된 값을 포함하는 식입니다.

이 CSSFontFeatureValuesMap 인터페이스는 기본 map 클래스 메서드를 사용하지만 set 메서드는 동작이 다릅니다. 이 메서드는 부호 없는 정수의 시퀀스를 받아 주어진 featureValueName과 연결합니다. 이 메서드는 단일 부호 없는 long 값이 단일 값의 시퀀스로 처리된다는 점을 제외하면 기본 map 클래스 메서드와 동일하게 동작합니다. 잘못된 개수의 값이 전달되면 이 메서드는 예외를 던집니다. 연관된 feature value block이 허용하는 값의 수가 제한된 경우, 입력 시퀀스가 허용된 수보다 많을 때 set 메서드는 InvalidAccessError 예외를 던집니다. 특정 유형의 feature value block에 대해 허용되는 최대 값 수에 대한 자세한 내용은 multi-valued feature value definitions 설명을 참조하십시오. get 메서드는 시퀀스에 단일 값만 포함되어 있더라도 항상 값의 시퀀스를 반환합니다.

12.3. `CSSFontPaletteValuesRule` 인터페이스

[Exposed=Window]
  interface CSSFontPaletteValuesRule : CSSRule {
    readonly attribute CSSOMString name;
    readonly attribute CSSOMString fontFamily;
    readonly attribute CSSOMString basePalette;
    readonly attribute CSSOMString overrideColors;
  };

fontFamily 및 basePalette 인터페이스는 해당 CSS 속성 문법에 따라 파싱됩니다.

13. 직렬화

13.1. 폰트 관련 속성 직렬화

개별 속성에 대해 특별히 명시된 경우를 제외하고, 이 모듈에서 정의된 속성들은 CSSOM § 6.7.2 CSS 값 직렬화의 원칙을 따릅니다.

테스트

font-variant-serialization.html (실시간 테스트) (소스)

13.2. 폰트 관련 at-rule 직렬화

개별 디스크립터에 대해 특별히 명시된 경우를 제외하고, 이 모듈에서 정의된 at-rule용 디스크립터들은 CSSOM § 6.7.2 CSS 값 직렬화의 원칙을 따릅니다.

특히, 더 짧은 표현 원칙에 따라: 값 범위를 허용하는 디스크립터의 경우, 시작 값과 끝 값이 같으면(범위가 0이면) 디스크립터는 범위 대신 단일 값으로 직렬화됩니다.

테스트

at-font-face-descriptors.html (실시간 테스트) (소스)

예를 들어, 다음 규칙은

@font-face {
  font-family: "foo";
  font-weight: 200 200;
}

다음과 같이 직렬화됩니다

@font-face {
  font-family: "foo";
  font-weight: 200;
}

또한, 마지막에 정의된 값만 유지하는 원칙과 더 짧은 표현 원칙을 따라, 여러 번 지정된 튜플과 여러 블록은 마지막에 지정된 값만 포함하는 단일 블록으로 직렬화됩니다.

예를 들어 다음 선언:

/* 선언 이름 반복, 동일 타입 블록 여러 개 */
@font-feature-values foo {
  @swash { pretty: 0; cool: 2; }
  @swash { pretty: 1; }
}

다음과 같이 직렬화됩니다:

/* 정규 직렬화 */
@font-feature-values foo {
    @swash { cool: 2; pretty: 1; }
}

테스트

font_feature_values_map_iteration.html (실시간 테스트) (소스)

부록 A: 플랫폼 폰트 속성과 CSS 속성 매핑

이 부록은 다른 섹션에서 설명된 일부 문제 및 상황에 대한 배경으로 포함됩니다. 정보 제공 목적일 뿐입니다.

CSS의 글꼴 속성은 사용된 기본 글꼴 형식과 독립적으로 설계되었습니다; 비트맵 글꼴, Type1 글꼴, SVG 글꼴을 지정하는 데 사용할 수 있으며 일반적인 TrueType 및 OpenType 글꼴에 추가로 적용될 수 있습니다. 그러나 TrueType 및 OpenType 형식의 일부 측면은 저자들에게 혼란을 자주 일으키고 서로 다른 플랫폼에서 구현자에게 과제를 제시합니다.

원래 Apple에서 개발된, TrueType [TRUETYPE]은 화면과 인쇄용 아웃라인 글꼴 형식으로 설계되었습니다. Microsoft는 TrueType 형식을 개발하는 데 Apple에 합류했으며 그 이후로 양 플랫폼은 TrueType 글꼴을 지원해왔습니다. TrueType 형식의 글꼴 데이터는 공통의 네 글자 태그 이름으로 구별되는 일련의 테이블로 구성되며, 각 테이블은 특정 유형의 데이터를 포함합니다. 예를 들어, 저작권 및 라이선스 정보를 포함한 명명 정보는 name 테이블에 저장됩니다. character map (cmap) 테이블은 문자 인코딩과 글리프 간의 매핑을 포함합니다. 이후 Apple은 향상된 타이포그래피 기능을 지원하기 위해 추가 테이블을 도입했으며; 이러한 글꼴은 현재 Apple Advanced Typography, 즉 AAT 글꼴이라고 불립니다. Microsoft와 Adobe는 고급 타이포그래피를 위한 별도의 테이블 집합을 개발하고 그들의 형식을 OpenType [OPENTYPE]이라고 불렀습니다. OpenType 사양은 ISO에서 Open Font Format [OPEN-FONT-FORMAT]으로 표준화되어 있습니다.

많은 경우에 Microsoft Windows 또는 Linux에서 사용되는 글꼴 데이터는 TrueType 형식이 플랫폼 간의 명시적 변형을 허용했기 때문에 Apple의 Mac OS X에서 사용되는 데이터와 약간 다릅니다. 여기에는 글꼴 메트릭, 이름 및 character map 데이터가 포함됩니다.

구체적으로, 글꼴 패밀리 이름 데이터는 플랫폼마다 다르게 처리됩니다. TrueType 및 OpenType 글꼴의 경우 이러한 이름들은 name 테이블의 name ID 1인 name 레코드에 포함됩니다. 여러 로케일에 대해 여러 이름을 저장할 수 있지만, Microsoft는 글꼴이 항상 최소한 미국 영어 버전을 포함할 것을 권장합니다. Windows에서는 하위 호환성을 위해 이 패밀리 이름을 최대 4개의 페이스로 제한하도록 결정했습니다; 더 큰 그룹화를 위해서는 "preferred family" (name ID 16) 또는 "WWS family" (name ID 21)를 사용할 수 있습니다. OSX와 같은 다른 플랫폼은 이러한 제한이 없으므로, 패밀리 이름은 가능한 모든 그룹화를 정의하는 데 사용됩니다.

다른 name 테이블 데이터는 패밀리 내의 특정 페이스를 고유하게 식별하는 데 사용되는 이름을 제공합니다. 전체 글꼴 이름(full font name, name ID 4)과 Postscript 이름(name ID 6)은 단일 페이스를 고유하게 설명합니다. 예를 들어, Gill Sans 패밀리의 볼드 페이스는 전체 이름이 "Gill Sans Bold"이고 Postscript 이름은 "GillSans-Bold"입니다. 주어진 페이스에 대해 여러 지역화된 버전의 전체 이름이 있을 수 있지만, Postscript 이름은 항상 제한된 ASCII 문자 집합으로 만든 고유한 이름입니다.

다양한 플랫폼에서는 글꼴을 검색할 때 서로 다른 이름이 사용됩니다. 예를 들어, Windows의 GDI CreateIndirectFont API에서는 패밀리 이름이나 전체 이름 중 어느 쪽이든 페이스를 조회하는 데 사용할 수 있는 반면, Mac OS X에서는 CTFontCreateWithName API 호출이 전체 이름과 Postscript 이름을 사용하여 주어진 페이스를 조회하는 데 사용됩니다. Linux에서는 fontconfig API가 이러한 이름들 중 어느 것으로든 글꼴을 검색할 수 있게 합니다. 플랫폼 API가 자동으로 다른 글꼴을 대체하는 상황에서는, 반환된 글꼴이 주어진 이름과 일치하는지 확인해야 할 수 있습니다.

주어진 페이스의 굵기(weight)는 OS/2 테이블의 usWeightClass 필드를 통해 결정할 수 있거나 스타일 이름(name ID 2)으로부터 추론할 수 있습니다. 마찬가지로, 폭(width)은 OS/2 테이블의 usWidthClass를 통해 결정하거나 스타일 이름으로부터 추론할 수 있습니다. Windows GDI API에서 가중치 200 이하에서의 합성 볼드 생성과 관련된 역사적 이유로, 글꼴 디자이너들은 때때로 이러한 가중치를 피하기 위해 OS/2 테이블의 값을 왜곡시키기도 했습니다.

태국어, 아랍어 및 데바나가리어처럼 문맥형 셰이핑(contextual shaping)을 사용하는 복잡한 스크립트를 렌더링하려면 OpenType 또는 AAT 글꼴에만 존재하는 기능이 필요합니다. 현재 복잡한 스크립트 렌더링은 Windows와 Linux에서는 OpenType 글꼴 기능을 사용하여 지원되며 Mac OS X에서는 OpenType 및 AAT 글꼴 기능이 모두 사용됩니다.

14. 보안 고려 사항

아래의 셀프 리뷰 설문지에서 9, 16, 17 항목을 참고하세요.

15. 개인정보 보호 고려 사항

보안 및 개인정보 셀프 리뷰 설문지와 § 10 폰트 분류를 기반으로:

15.1. 이 기능이 웹사이트나 다른 당사자에 노출할 수 있는 정보는 무엇이며, 그 노출이 필요한 목적은 무엇인가요?

이 명세는 웹 폰트 사용을 허용하며, 웹 폰트는 필요할 때 요청되지만 설치되지는 않습니다. 문서나 스타일시트가 웹 폰트와 다른 오리진인 경우, 네트워크 요청에서 Referer 헤더가 노출되어 폰트 제공자가 수집할 수 있습니다.

웹 폰트 외에도, 이 명세는 CSS1에서 도입된 대로 설치된 폰트(사전 설치 폰트와 사용자 설치 폰트 모두)의 사용도 계속 허용합니다.

웹 폰트는 플랫폼 간 일관성이라는 장점이 있지만, 설치된 폰트는 다운로드 시간이 없다는 장점이 있습니다.

특히 지원이 부족한 언어나 소수 언어의 경우, 설치된 폰트가 없으면 표시할 수 없는 정보를 보여줄 수 있습니다. 무료로 사용 가능한 웹 폰트가 없거나, 대기 시간 또는 다운로드 시간이 너무 길어 웹 폰트 사용이 어려운 경우(특히 글자 수가 많은 언어, 느린 네트워크 등) 그렇습니다.

참고: 설치된 폰트의 집합은 폰트 매칭 알고리즘에서 명시적으로 정의되어 있지 않습니다. 사용 가능한 폰트 집합은 트래커들이 사용자 지문(핑거프린팅)에 사용하여 개인정보를 침해합니다. 그러나 일부 설치된 폰트, 심지어 일부 사용자 설치 폰트도 언어 가독성을 위해 필요합니다. 사용자 에이전트는 언어 지원 및 디자인 일관성을 위해 모든 설치된 폰트를 제공할 수도, 개인정보 보호를 위해 일부 폰트를 제공하지 않을 수도 있습니다. 추가로, 사용자 에이전트는 사용자가 요청된 폰트를 명시적으로 허용/차단하도록 선택할 수 있는 인터페이스(사이트별 등)를 제공할 수도 있습니다. 동일한 운영체제에서도 사용자 에이전트마다 이 균형점이 다를 수 있습니다.

로컬 리소스를 렌더링하는 사용자 에이전트의 경우 (예: HTML/CSS를 PDF로 렌더링하거나 웹 기반 워드프로세서 등) 모든 설치된 폰트(사전 설치 및 사용자 설치 폰트 모두)에 접근해야 예상 기능을 제공할 수 있습니다.

공격자는 설치된 폰트를 조회하여 지문 정보를 얻을 수 있습니다. 과거 기술(특히 Adobe Flash는 설치된 폰트 전체 목록을 제공하고 HTTP 헤더로 전송)과 달리, 이런 탐색은 폰트마다 하나씩 해야 하며, 폰트 패밀리 이름을 제공하고 (스크립트로 혹은 unicode-range를 이용해 웹 폰트를 조건부 다운로드하면서) 특정 이름의 폰트가 특정 글자를 지원하는지 확인합니다. 이 과정은 시간이 걸리며, 수백 개 이상의 폰트를 확인하면 페이지 렌더링에 눈에 띄는 지연이 생깁니다.

특히 개인정보 보호가 중요한 환경에서는 웹 폰트를 아예 다운로드하지 않거나(몇몇 글자가 잘못 렌더링되거나 아예 보이지 않을 수 있음), 필요 여부와 상관없이 모든 웹 폰트를 항상 다운로드(매번 많은 불필요한 폰트 다운로드)하는 방법도 있습니다.

15.2. 이 명세는 기능 제공에 필요한 최소한의 정보만 노출하고 있나요?

최근 합의에 따르면 사용자 에이전트는 올바른 기능을 위해 사전 설치 폰트를 노출해야 하지만, 사용자 설치 폰트 노출에 대한 합의는 없습니다. 이 명세는 사용자 에이전트가 폰트 매칭 알고리즘에서 사용자 설치 폰트를 무시할 수 있도록 허용합니다. 이미 여러 사용자 에이전트가 이렇게 동작합니다.

최소 정보량은 사용자 유형에 따라 다르며 현재 논의 중입니다. 사용자 설치 폰트 사용자 분류도 약간 확장되었습니다.

허용적인 정보 노출은 지문 정보도 더 많이 노출될 수 있습니다. 제한적인 정보 노출은 지문 정보는 줄이지만 기능도 줄이고, 소수 언어 등에서는 웹 사용 자체가 불가능해질 수도 있습니다.

일부 또는 전체 사용자 설치 폰트 노출을 사용자별 또는 오리진별로 선택적으로 허용하는 기능에 대한 논의가 있습니다.

프라이버시 예산이라는 개념도 논의되었습니다. 악의적인 웹페이지가 많은 폰트를 테스트하면 페널티 또는 비활성화되지만, 소수만 테스트하는 경우 정상 동작하도록 하는 방식입니다.

일부 사용자 에이전트는 프라이빗 브라우징, 시크릿 모드, '지문 방지' 모드에서는 일반 모드보다 더 제한된 사전 설치 폰트 집합을 노출합니다.

15.3. 이 명세는 개인정보 또는 개인 식별 정보 혹은 그로부터 파생된 정보를 어떻게 처리합니까?

이 명세는 개인정보를 노출하지 않습니다.

일부 경우에는 개인 식별 정보가 노출될 수 있습니다. 예를 들어, 일본에서 조건부로 활성화된 일본어 폰트가 나열 가능해도 보통 큰 지문 위험이 아닙니다. 반면, 유럽에서 텍스트 입력 메뉴에 일본어 IME가 있으면 지문 위험이 됩니다.

15.4. 이 명세는 민감한 정보를 어떻게 처리합니까?

설치된 폰트에 대한 지문 추출은 일부 경우 민감한 정보를 노출할 수 있습니다. 예를 들어, 박해받는 소수민족은 해당 언어용 폰트를 사용함으로써 민감 정보를 노출할 위험이 있습니다. 제3자 서비스에서 웹 폰트를 요청하거나, 해당 언어와 관련된 사전 설치/사용자 설치 폰트를 노출함으로써 그렇습니다.

15.5. 이 명세는 브라우징 세션 간 오리진에 대한 새로운 상태를 도입합니까?

아닙니다.

특히, 웹 폰트는 해당 @font-face 규칙과 연결된 문서 또는 FontFaceSet을 소유한 문서 외에는 접근할 수 없어야 하며, 기기 내 다른 애플리케이션은 웹 폰트에 접근할 수 없어야 합니다. 이렇게 하면 오리진 간 정보 누출을 막을 수 있습니다.

마찬가지로, 폰트 팔레트 값은 참조한 문서에서만 사용할 수 있어야 합니다. 저자 정의 컬러 팔레트를 참조 문서 외에서 사용하면 한 페이지의 내용이 다른 페이지에 영향을 줄 수 있어 보안 누출이 되며, 공격자가 이를 공격 벡터로 쓸 수 있습니다.

15.6. 이 명세는 플랫폼의 어떤 정보(예: 설정 데이터)를 오리진에 노출합니까?

system-ui 키워드는 운영체제의 기본 시스템 UI 폰트를 지문 추출 메커니즘에 노출시킵니다.

15.7. 이 명세는 오리진이 사용자의 기기 센서에 접근할 수 있게 합니까?

아닙니다.

15.8. 이 명세는 오리진에 어떤 데이터를 노출합니까? 또한 동일/다른 맥락에서 다른 기능이 노출하는 데이터와 동일한 데이터도 문서화해주세요.

스타일시트를 통해 로드된 제3자 웹 폰트의 경우, 스타일시트 오리진이 Referer 헤더로 제3자에게 노출될 수 있습니다. 또한 unicode-range와 서로 다른 src url을 조합하면 제3자가 페이지에서 어떤 글자가 사용되는지 알 수 있어 CJK 등 글자 수가 많은 스크립트에서는 개인정보 위험이 됩니다.

HTML에서 미리 로드된 제3자 웹 폰트의 경우, 문서 오리진도 유사하게 노출될 수 있습니다.

15.9. 이 명세는 새로운 스크립트 실행/로드 메커니즘을 허용합니까?

아닙니다.

특히, SVG-in-OpenType 컬러 폰트의 경우, 글리프 정의에 사용된 SVG에 스크립트 요소가 있으면 실행되지 않아야 하며, 실제로 실행되지 않습니다.

15.10. 이 명세는 오리진이 다른 기기에 접근할 수 있게 합니까?

아닙니다.

15.11. 이 명세는 오리진이 사용자 에이전트의 네이티브 UI를 어느 정도 제어할 수 있게 합니까?

공격자가 운영체제를 판별해 해당 OS에 맞는 네이티브 스타일 폰트를 사용함으로써 네이티브 UI 기능을 위조(spoofing)할 위험이 있습니다.

15.12. 이 명세는 웹에 임시 식별자를 만들거나 노출합니까?

없습니다.

15.13. 이 명세는 1st-party와 3rd-party 맥락에서 어떻게 동작을 구분합니까?

폰트 로드의 경우, 사용자 에이전트는 [HTML] 명세에서 정의한 CORS를 지원하는 fetch 메서드를 사용해야 합니다. 폰트 페칭 시, 사용자 에이전트는 "익명(Anonymous)" 모드를 사용하고, referrer 소스를 스타일시트 URL로, 오리진을 문서 URL로 설정해야 합니다.

따라서, 저자가 교차 오리진 로드를 직접 허용하지 않으면 폰트는 일반적으로 교차 오리진으로 로드되지 않습니다.

15.14. 이 명세는 사용자 에이전트의 프라이빗 브라우징 또는 '시크릿' 모드에서 어떻게 동작합니까?

이 명세는 구분하지 않습니다.

일부 사용자 에이전트는 이들 모드에서 더 제한적인 설치된 폰트 집합을 노출할 수 있습니다.

15.15. 이 명세는 "보안 고려 사항"과 "개인정보 보호 고려 사항" 섹션을 포함합니까?

네.

15.16. 이 명세는 기본 보안 특성을 다운그레이드할 수 있게 합니까?

아닙니다.

15.17. 이 설문지는 무엇을 추가로 물었어야 하나요?

악의적인 페이로드가 애플리케이션을 크래시시키거나, 심지어 전체 운영체제 크래시, 원격 코드 실행도 야기할 수 있는지 물었어야 합니다.

실제로, 일부 플랫폼에서는 설치 및 렌더링된 폰트가 적절히 제작되면 이런 위험이 존재하며, 실전에서 악용된 사례도 있습니다.

실제 운용에서는, 해당 취약점이 있는 OS에서 실행되는 사용자 에이전트는 손상되거나 악의적으로 제작된 폰트를 감지해 사용하지 못하도록 폰트 소독(font sanitizer)을 사용합니다.

텍스트의 시각적 렌더링을 위해 폰트를 사용하는 것은 일반적으로 접근성에 영향을 주지 않아야 합니다. 예를 들어, 텍스트를 음성으로 변환하는 스크린 리더를 사용하는 사람은 폰트를 다운로드하지 않으며, 폰트에 어떤 내용이 들어있든 상관없습니다.

다만, 폰트 글리프가 전달하는 의미와 문자가 전달하는 의미가 같다는 전제입니다.

역사적으로 항상 그런 것은 아니었습니다. 예를 들어 웹 초기에는 폰트(SYMBOL 등)를 사용해 라틴 문자를 그리스 글리프로 바꾸는 일이 흔했습니다. 이런 방식은 시각적으로는 동작했지만, 스크린 리더에는 동작하지 않았고 텍스트 검색이나 색인도 어려웠습니다. 왜냐하면 매핑이 폰트에 따라 다르기 때문입니다. 유니코드의 등장 이후에는 그리스 텍스트에 그리스 문자를 사용하고, 폰트의 그리스 글리프도 그리스 문자에 매핑하는 것이 표준 관행이 되었습니다.

불행하게도, 하지만 피할 수 있게, 이런 관행은 잘못 설계된 아이콘 폰트에서 계속되고 있습니다. 예를 들어, 라틴 문자 "P"에 프린터 아이콘을 배치하는 폰트가 있을 수 있습니다. 이런 방식은 텍스트에 의미 없는 문자를 흩뿌려 텍스트 검색/색인에 악영향을 주고, 아이콘 폰트가 로드되지 않으면 이해하기 어려운 렌더링이 나오며, 스크린 리더도 방해합니다. 잘 설계된 폰트는 이런 아이콘을 의미 있는 문자에 할당해야 합니다. 예를 들어, 프린터 아이콘을 "printer" 문자열이나 유니코드 🖨 U+1F5A8 (PRINTER)에 할당해야 합니다.

17. 감사의 글

CSS 워킹 그룹은 다음 분들께 감사드립니다:

Peter Constable - 다양한 언어 오류 수정.

Nick Sherman - 광학 크기 이미지 준비.

Richard Ishida - 우르두 샘플 준비.

Munira Tursunova와 Dominik Röttsches - font-palette 애니메이션 기능 개발.

John Hudson - OpenType 언어 태그의 미묘함을 설명해 주셨고, 비잔틴 인장에 텍스트를 표시할 때 문자 변형 예시를 제공해 주셨습니다.

Elika Etemad - '@font-feature-values' 규칙의 초기 디자인 아이디어 제공.

Tab Atkins Jr. 특별 감사 - 폰트 렌더링 제어 섹션과 font-display 디스크립터 섹션의 텍스트 제공. Ilya Grigorik, David Kuettel에게도 이 섹션 개발 지원에 특별 감사.

18. 변경 사항

18.1. 다음은 2024년 2월 1일 작업 초안에서의 변경 사항

<font-feature-value-type>에서 디스크립터 값의 범위 제약 명확화 (이슈 13324)
생산자 이름의 혼동 방지를 위해 font- 접두사 추가 (이슈 13263, PR 13272)
<absolute-size> 및 <relative-size>에 대한 적절한 타입을 생성함 (이슈 1794)
여러 @font-palette-values 규칙이 있는 경우 마지막 규칙이 적용되도록 정의함 (이슈 12981)
변수 범위로의 클램핑이 암시된 변형 축에도 영향을 준다는 점을 명확히 함 (이슈 7999)
다른 ui-* 일반 글꼴 패밀리에 대한 추가 설명을 추가함 (이슈 3658)
system-ui 일반 글꼴 패밀리에 대한 메모를 추가함 (PR 12831), (이슈 3658)
글꼴 리소스 가져오기를 정리함 (이슈 12261)
override-colors에서 비절대 색상이 전체 데스크립터를 무효화하며, 개별 색상만이 아니다 (이슈 9555)
font-style 기술자에 left와 right를 추가함 (이슈 9392)
font-style 속성에 left와 right를 추가함 (이슈 9392)
font-synthesis-style의 값으로 oblique-only를 추가함 (이슈 9390)
reset-only 하위 속성은 독립적으로 정의하기보다 Cascade 5를 참조하도록 수정함, (이슈 11904)
절대 색상이 지정되지 않으면 override-colors가 무효임을 명확히 함 (이슈 9555)
Font Feature and Variation Resolution의 오타를 수정함
Khmer 예제에 더 좋은 글꼴을 사용함
generic(khmer-mul)을 추가함
urange 대신 unicode-range-token을 사용함
사용자가 글꼴을 추가/제거하는 요구사항을 명확히 함
CSSFontFaceRule.style을 다른 CSS*Rule.style과 일관되게 만듦
font 구문을 수정하고, font-variant-css2 및 font-width-css3 구문을 단순화함 syntaxes
monospace를 일반 글꼴 패밀리로 복원함 (실수로 삭제되었던 것 복원)
generic-family 구문을 수정함
글꼴 컬렉션의 조각 식별자(fragment identifier)로서의 PostScript 이름 표현을 개선함
누락된 @font-face 기술자를 추가함
서로 다른 집합의 기술자나 속성을 노출하는 선언 블록에 대해 다른 인터페이스를 사용함
증분적 글꼴 예제를 최신 IFT 사양으로 업데이트함
CSSFontFeatureValuesRule.historicalForms를 정의함

18.2. 2021년 12월 21일 작업 초안에서 변경된 사항 21 December 2021 Working Draft

깨진 링크 수정
폰트 매칭 알고리즘에서 varfont slnt 축과 합성 오블리크 구분
폰트 변형이 폰트 합성으로 간주되지 않음을 명확히 함
@font-face의 auto 값 효과가 적절한 "normal" 값 선택임을 명확하게 함
variation selector와 함께 font-variant-emoji에서 폰트 폴백 개선
오블리크 각도는 요청된 부호와 같아야 함을 명확화
세로 텍스트에서 합성 오블리크 정의
override-colors에 CSS Color 5 절대 색상 정의 사용
font-stretch를 font-width의 레거시 이름 별칭으로 처리
palette-mix() 문법이 color-interpolation-method를 요구하므로 누락된 정의 삭제
fang song과 kai 용 더 많은 generic 샘플 추가
우르두 샘플에 사용된 폰트 목록 추가
사용자가 웹페이지 렌더링에 사용할 수 있는 설치된 폰트 집합을 수정할 수 있어야 함
nastaliq 및 폴백 naskh 폰트로 우르두 텍스트 예시 추가
local() 내부 키워드가 오류임을 명확화
system-ui 일반 폰트 패밀리가 복합적일 수 있고, 유니코드 커버리지 및 콘텐츠 언어에 영향을 받는다는 점 명확화
특정 타이포그래피 스타일이 보편적으로 격식, 장난기 등 개념을 전달한다는 문화적 주장 삭제
우르두, 페르시아 등 언어용 새 generic(nastaliq) 패밀리 추가
간체·번체 중국어용 새 generic(kai) 패밀리 추가
cursive와 kaiti 의미가 동일하다는 주장 삭제
serif, sans-serif generic 폰트 패밀리의 역사적 이유에 대한 노트 추가
emoji generic 폰트 패밀리 삭제, font-variant-emoji 속성이 기능을 더 잘 제공
폰트 포맷 표에 인터넷 미디어 타입 추가
Taxonomy에서 설치 폰트 관련 내용을 Font Matching Algorithm으로 이동
font-family 및 src 디스크립터가 더이상 유효성에 필수 아님, 스크립트로 나중에 추가 가능함을 명확화
generic(fangsong)을 일관되게 사용, 스크립트별임을 명시
제3유형의 폰트 패밀리 이름 <system-family-name> 정의, 명시적 제약 포함
@font-feature-values 생성식에 누락된 at-keword 추가
@font-feature-values 문법 리팩터링
CSS Fonts 3에서 누락된 감사 문구 복구
src 속성 문법을 <font-src-list> 생성식으로 재정의, "see prose" 제거
존재하지 않는 정보 참고 링크 삭제
generic 폰트 패밀리 세 가지 유형 기술, 스크립트 특이성 및 반드시 로컬 폰트와 매칭해야 하는지 여부 포함
새 함수 표기 generic() 도입, 새로운 generic 폰트 패밀리용
플랫폼 API 제한으로 컬러 폰트 렌더링이 sRGB에 제한될 수 있음에 대한 설명 추가
더이상 "강제로 컬러 글리프 사용 안함" 언급 없음
font-palette 계산값 개선
애니메이션 팔레트 Nabla 폰트 예시 추가
font-palette 문법 및 보간, 백분율 정규화 규칙 설명 추가, CSS Color 명세 참조
사용된 color-scheme이 font-palette: normal에 영향 줌을 명확화
기울기 각도 및 font-feature-settings 정수에 누락된 숫자 범위 주석 추가
<family-name> 생성식 정의
로컬 설치된 폰트는 local(<family-name>) 사용
모호한 디스크립터 자동 링크 수정
<family-name> 생성식 마크업 수정
기능/변형 이름을 문자열 대신 <opentype-tag>로 정의
@font-palette-values 디스크립터에 일반 수학 함수 사용 허용, calc()만 아님
font-synthesis-position 속성 추가
override-colors 예시에 비-sRGB 색상 추가
생성식에 rule-list 사용, stylesheet 대신
crossorigin, referrerpolicy, integrity에 대한 URL 요청 수정자 추가
Incremental Font Transfer 명세에 맞게 incremental 기술 키워드 정렬
font-feature-values에 마지막 정의 값 사용
font-feature-values와 font-feature-settings 중복 제거 및 정렬
사용자 에이전트가 일부 사용자 설치 폰트 사용 가능 여부를 프롬프트로 요청하도록 제안
개인정보 보호 고려 사항 개선, 사용자 설치 폰트의 개인정보-가독성 균형점 설명
font 단축 속성 명확화, 명시적 설정, 암시적 리셋, 암시적 캐스케이드 용어 사용
0 범위 디스크립터의 짧은 직렬화 명확화
첫 번째 사용 가능한 폰트 정의 강화
unicode-range에 emoji 키워드 추가
OpenType 명세에서 항상 필요하다고 하는 폰트 기능을 끌 수 있는 요청은 구현에서 무시 가능
font-feature-settings와 font-variation-settings에 대한 저자 조언 명확화
font-variant 하위 속성 문법 가독성 개선
예시 일부가 명세와 일치하지 않았던 점 수정
유효하지 않은 font-family 디스크립터 무시 의미 명확화
@font-palette-values의 font-family 디스크립터가 리스트를 허용하도록 변경
Web Platform Tests 커버리지 추가
font-palette와 '@font-palette-values' 더이상 위험 상태 아님
웹 호환성을 위해 제한된 문자열 포맷 지정자 허용
일관성을 위해 feature-* 및 features-* 사용
font-variant-emoji의 초기값을 auto에서 normal로 변경, 다른 font-variant-* 속성과 일치
font-variant-emoji 값들을 font-variant 단축 속성에 추가
font-variant 단축 속성에 영향을 받는 font-variant-* 속성의 정규 리스트 추가
"system font fallback"을 "installed font fallback"으로 이름 변경, system font 오해 방지
속성 및 디스크립터 값을 범위 표기로 업데이트
명세와 일치하지 않는 예시 수정
컬러 폰트가 기본값으로 활성화되지 않음을 명확화
font-palette:light|dark에 부가 설명 추가
override-colors에서 마지막 선언된 key/palette 인덱스 사용
override-colors 예시에서 currentColor 제거
범위 밖의 palette 인덱스는 무시됨을 명확화
오타 및 마크업 수정

18.3. 2021년 7월 29일 작업 초안에서 변경된 사항 29 July 2021 Working Draft

팔레트에 있는 함수와 상대 길이가 루트 요소의 문맥에서 해석됨을 명확히 함
새 섹션 신설, CSS Fonts 3 이후 전체 변화 항목 추가
font-palette-values 예제를 더 많이 추가함
technology를 tech로 이름 변경
math 값이 font-size에 새로 추가됨
보안·프라이버시(Privacy) 섹션을 분리
OpenType, TrueType, Graphite 테이블 정의에 링크 추가
"supports"를 사용했던 예제 갱신
src 디스크립터의 format에서 예전 "supports"를 제거하고 새 기술(technology) production으로 대체
font-technology와 font-format을 새 섹션으로 이동
글꼴 패치(fetching) 및 리소스 타이밍 보고 공식화, 글꼴 가져오기에 적용
override-color와 base-palette에서 <string> 값을 제거
override-colors가 충돌(conflict)될 때의 올바른 처리 정의
완전한 팔레트(complete palettes) 개념 도입
override-colors에 대해 더 명확한 설명 제공
FONT_PALETTE_VALUES_RULE과 VIEWPORT_RULE 간 충돌 해소
override-color 색상 해석 문맥 정의, 더이상 per-element가 아님
base-palette가 다크/라이트 팔레트 참조 허용
CSSFontPaletteValuesRule의 속성을 읽기 전용(read-only)으로 변경
팔레트 식별자(palette-identifier)를 custom-ident가 아니라 dashed-ident로 해석하도록 변경(확장성 목적)
override-color 디스크립터를 override-colors로 이름 변경(여러 색을 수용하므로)
base-palette 및 override-color가 0 이상의 정수만 허용됨을 명확히 함
font 속성 단축(property) 문법 수정
CSSFontPaletteValuesRule의 IDL에 몇 가지 정정 사항 반영
font-palette에서 "none" 값 삭제
증분(incremental) 요구사항 명확화
예제 몇 개 추가
증분 글꼴 기술을 supports에 추가
WG(워킹그룹) 해상에 따라 오블리크 글꼴 매칭 임계각을 20도에서 11도로 감소
@font-feature-values에서 font-display 허용(텍스트는 허용했지만 문법에 없었음)

18.4. 2020년 11월 17일 작업 초안에서 변경된 사항 17 November 2020 Working Draft

Graphite 참고 추가
폰트 기능 기술 키워드 opentype, aat, graphite 추가
가변 폰트가 새롭고 실험적이라는 경고 문구 제거
도입부의 CSS Fonts 3 언급은 정보 제공용임을 명시
COLRv1과 COLRv0 구분
잘 설계된 vs 잘못 설계된 아이콘 폰트, 유니코드 코드포인트 기준으로 설명
접근성 고려 사항 섹션 추가
font-optical-sizing이 font-size-adjust와 상호작용함을 명확화
"user agent" 일관된 대소문자 사용
font-stretch 직렬화는 키워드가 아니라 숫자/백분율이어야 함을 명확화
optional 폰트 로딩 휴리스틱 제안
문법에서 반복 항목 처리 명확화
Fetch 참조로 "potentially CORS-enabled fetch" 구문 교체
font-synthesis에 누락된 small-caps 값 추가
어떤 속성이 텍스트에 적용되는지 명확화
링크 업데이트
오타, 문법 오류 수정

18.5. 2019년 11월 13일 작업 초안에서 변경된 사항 13 November 2019 Working Draft

JS 없이 폰트의 유니코드 지원 탐색이 가능함을 명확화
OpenType 기능 태그는 4글자, 끝에 공백 패딩함을 명확화
폰트 메트릭 오버라이드 디스크립터 추가
기본 활성화 폰트 기능 링크 추가
ebIDL 명세에 맞게(undefined, void 아님) 정렬
교차 오리진 예시에 http 사용, https 아님
OpenType 기준 font-range는 1~999임을 명확화
(개인정보) unicode-range 개인정보 침해 언급 추가
kern과 vkrn 사용 설명 명확화
폰트 컬렉션 포맷, Font Collection 예시 추가
CBDT 컬러 폰트 추가
보안 & 개인정보 부록 추가
팔레트 예시 추가, 다크 모드 포함
폰트 팔레트 항목의 색공간 명확화
교차 사이트 폰트 누출 방지 RFC-2119 MUST로 명확화
컬러 폰트의 단색 폴백 명확화
min-font-size, max-font-size 관련 남은 언급 제거
컬러 이름은 ASCII 대소문자 구분 없음 명확화
font-palette에 none 값 추가
font-palette와 @font-palette-values 위험 상태로 표시
값 정의 참조를 명세 전체에 맞게 정렬
optional 동작 추가 명확화
모든 generic 폰트 패밀리가 반드시 폰트에 매핑될 필요 없음 명확화
generic 폰트 패밀리 소개 재정리
generic 폰트 패밀리 동기 추가
generic emoji 패밀리와 문자 지원 노트 추가
italic이 oblique의 폴백이 아님 명확화
x-height가 너무 큰 경우 경고 추가
font-size-adjust 더 좋은 예시 추가
ui-sans-serif 예시 추가
기타 편집 개선, 오타 수정, 깨진 링크 및 마크업 개선

18.6. 2018년 9월 20일 작업 초안에서 변경된 사항 20 September 2018 Working Draft

UA가 표준 폰트 패밀리의 플랫폼 특유 이름도 구현하도록 권장하는 노트 추가
ui-serif, ui-sans-serif, ui-monospace, ui-rounded generic 폰트 패밀리 추가
WG 결의에 따라 font-variant @font-face 디스크립터 삭제
WG 결의에 따라 font-min-size, font-max-size 삭제
font-style normal이 oblique 0deg로 애니메이션됨을 명확화
복합 폰트에 불완전한 컬러 팔레트 지정이 나쁜 이유 명확화
인터페이스에 명시적으로 [Exposed=Window] 추가
Unicode emoji 표현 시퀀스와 Emoji Presentation Participating Code Points 용어 정확히 사용
font-variation-settings의 각 문자열이 단일 숫자와 쌍을 이루는 점 명확화
font-variant-numeric 속성 정의에서 titling-caps 누락 제거
컬러 폰트 소개 개선
기본 다색 예시 추가
폰트 변형 설정이 폴백 폰트 선택에 영향 주지 않음을 명확화
기울기 각도와 slnt 축 방향 관련 명확화
emoji 및 math generic 폰트 패밀리 정의 개선
font-size: xxx-large 추가
CSS Values의 ex 단위 정의 링크
font-feature-settings 과학적 아래첨자 예시 추가
letter-spacing이 선택적 합자를 비활성화함을 명확화
font-feature-settings 속성 CSS Fonts 3에서 이식
font-variant 단축 속성 CSS Fonts 3에서 이식
font-variant-east-asian 속성 CSS Fonts 3에서 이식
font-variant-numeric 속성 CSS Fonts 3에서 이식
font-variant-caps 속성 CSS Fonts 3에서 이식
font-variant-position 속성 CSS Fonts 3에서 이식
font-variant-ligatures 속성 CSS Fonts 3에서 이식
font-kerning 속성 CSS Fonts 3에서 이식
The CSSFontPaletteValuesRule 인터페이스 IDL 업데이트
font 속성 디스크립터의 초기값을 normal에서 auto로 변경
font 매칭 섹션에서 font-stretch 문법 업데이트
폰트 스타일 매칭 예시 업데이트
폰트 팔레트 설명 개선
ch가 첫 사용 가능한 폰트 사용 주장 중단
서식 및 마크업 수정, 링크 수정, 인라인 닫힌 이슈 제거
최신 버전의 규범적 참고 링크 연결

18.7. 2018년 4월 10일 작업 초안에서 변경된 사항 10 April 2018 Working Draft

font-variant-emoji에 unicode 값 추가
property 설명에서 미디어 항목 제거
font-synthesis를 longhands로 분리, 향후 확장성 고려
컬러 팔레트용 override-color 디스크립터 추가
font-variant-alternates에 feature-value-name 정의
@font-face src 파싱 규칙 명확화
가변 폰트의 named instance 사용 허용
부록 A: 플랫폼 폰트 속성과 CSS 속성 매핑 CSS Fonts 3에서 이식
문자 처리 이슈 CSS Fonts 3에서 이식
클러스터 매칭 CSS Fonts 3에서 이식
font-weight, font-style, font-stretch 디스크립터에 새 auto 값 추가
font-display 디스크립터 값 이름 명확화
named palette 엔트리 지원
Fang Song generic 패밀리 상세 설명 추가
오블리크 폰트 기본 각도 14deg로 변경
font-feature-values CSS Fonts 3에서 이식
알 수 없거나 지원되지 않는 fragment identifier 처리 명확화
폰트 팔레트의 color record는 0부터 인덱스됨을 명확화
새 generic 폰트 패밀리 일관적으로 사용
편집 정리, 예시 명확화, 마크업 개선, 링크 수정, 최신 참고 자료로 업데이트 등

18.8. 2018년 9월 20일 CSS Fonts 3 권고안에서 변경된 사항

이 부분은 CSS Fonts 4가 CSS Fonts 3과 비교해 변경된 내용을 요약합니다.

@font-face용 font-display 디스크립터 추가
@font-feature-values 규칙 추가
font-optical-sizing, font-variation-settings 등 폰트 변형 속성 추가
컬러 폰트 지원 추가
font-variant-alternates에 feature-value-name 정의
font-weight, font-style, font-stretch 디스크립터에 새 auto 값 추가
ui-serif, ui-sans-serif, ui-monospace, ui-rounded generic 폰트 패밀리 추가
font-size: xxx-large 추가
폰트 메트릭 오버라이드 디스크립터 추가
generic 폰트 패밀리 동기 추가
폰트 기능 기술 키워드 opentype, aat, graphite 추가
font-size에 math 값 추가

적합성(Conformance)

문서 규약(Document conventions)

적합성 요구사항은 설명적 주장과 RFC 2119 용어의 조합으로 표현됩니다. "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", "OPTIONAL"과 같은 핵심 용어는 규범적인 부분에서 RFC 2119에 따라 해석되어야 합니다. 단, 가독성을 위해 이 명세에서는 모든 단어를 대문자로 표기하지 않습니다.

이 명세의 모든 텍스트는 명시적으로 비규범(non-normative)으로 표시된 섹션, 예제, 노트를 제외하면 모두 규범적입니다. [RFC2119]

이 명세서의 예제들은 “예를 들어(for example)”라는 말로 시작하거나, class="example"와 같이 규범 텍스트와 구분되어 표시됩니다. 예시:

정보성 노트는 “Note”로 시작하며 class="note"로 규범 텍스트와 구분되어 표시됩니다. 예시:

권고(advisement)는 특별한 주의를 유도하기 위해 스타일링된 규범 섹션이며, <strong class="advisement">로 구분됩니다. 예시: UA는 반드시 접근 가능한 대안을 제공해야 합니다.

적합성 클래스(Conformance classes)

이 명세에 대한 적합성은 세 가지 적합성 클래스로 정의됩니다:

스타일 시트가 이 명세에 대해 적합성을 갖기 위해서는 이 모듈에서 정의된 문법을 사용하는 모든 선언문이, CSS 일반 문법과 이 모듈에서 정의된 각 기능의 개별 문법에 따라 유효해야 합니다.

렌더러가 이 명세에 대해 적합성을 갖기 위해서는 스타일 시트를 적합한 명세대로 해석할 뿐 아니라, 이 명세에서 정의된 모든 기능을 올바르게 파싱하고 문서를 그에 따라 렌더링해야 합니다. 단, UA가 장치의 한계로 인해 문서를 올바르게 렌더링하지 못하는 경우(예: 단색 모니터에서 색상 렌더링 불가), UA가 비적합하다고 할 수 없습니다.

저작 도구가 이 명세에 대해 적합성을 갖기 위해서는 스타일 시트를 CSS 일반 문법 및 이 모듈의 각 기능별 문법에 따라 문법적으로 올바르게 작성하고, 이 모듈에서 설명한 스타일 시트의 모든 다른 적합성 요구사항도 충족해야 합니다.

부분 구현(Partial implementations)

저자가 호환성 있는 파싱 규칙을 활용하여 폴백 값을 지정할 수 있도록, CSS 렌더러는 반드시 지원하지 않는 모든 at-rule, 속성, 속성값, 키워드, 기타 구문 구조를 무효로 처리(그리고 적절히 무시)해야 합니다. 특히, 사용자 에이전트는 선택적으로 지원하지 않는 구성 값만 무시하고 지원하는 값만 인정해서는 안 됩니다. 하나의 다중 값 속성 선언에서 어떤 값이라도 무효(즉, 지원하지 않는 값)로 간주되면, CSS는 전체 선언을 무시하도록 요구합니다.

불안정 및 독점 기능의 구현(Implementations of Unstable and Proprietary Features)

실험적이 아닌 구현(Non-experimental implementations)

명세가 Candidate Recommendation 단계에 도달하면, 실험적이 아닌 구현이 가능해지며, 구현자는 명세에 따라 올바르게 구현된 CR 수준의 기능을 접두어 없이 공개해야 합니다.

CSS의 상호운용성을 확립 및 유지하기 위해, CSS 워킹 그룹은 실험적이 아닌 CSS 렌더러가 어떤 CSS 기능에 대해 접두어 없는 구현을 공개하기 전에 W3C에 구현 보고서(필요시 구현 보고서에 사용된 테스트케이스 포함)를 제출할 것을 요청합니다. W3C에 제출된 테스트케이스는 CSS 워킹 그룹의 검토와 수정 대상이 됩니다.

테스트케이스 및 구현 보고서 제출에 대한 추가 정보는 CSS 워킹 그룹 웹사이트 https://www.w3.org/Style/CSS/Test/에서 확인할 수 있습니다. 문의는 public-css-testsuite@w3.org 메일링 리스트로 보내면 됩니다.

이름	값	초기값	적용 대상	상속	% 지원	애니메이션 유형	정식 순서	계산값	미디어
font	[ [ <'font-style'> \|\| <font-variant-css2> \|\| <'font-weight'> \|\| <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] \| <system-font-family-name>	각 속성별 참조	모든 요소 및 텍스트	예	각 속성별 참조	각 속성별 참조	문법 순서대로	각 속성별 참조
font-family	[ <font-family-name> \| <generic-font-family> ]#	사용자 에이전트에 따라 다름	모든 요소 및 텍스트	예	해당 없음	분리형(discrete)	문법 순서대로	list, 각 항목은 문자열 및/또는 <generic-font-family> 키워드
font-feature-settings	normal \| <feature-tag-value>#	normal	모든 요소 및 텍스트	예	해당 없음	분리형(discrete)	문법 순서대로	지정값 그대로
font-kerning	auto \| normal \| none	auto	모든 요소 및 텍스트	예	해당 없음	분리형(discrete)	문법 순서대로	지정값 그대로
font-language-override	normal \| <string>	normal	모든 요소 및 텍스트	예	N/A	분리형(discrete)	문법 순서대로	지정한 문자열 혹은 키워드 none
font-optical-sizing	auto \| none	auto	모든 요소 및 텍스트	예	해당 없음	분리형(discrete)	문법 순서대로	지정된 키워드
font-palette	normal \| light \| dark \| <palette-identifier> \| <palette-mix()>	normal	모든 요소 및 텍스트	예	N/A	계산값 기준	문법 순서대로	지정 키워드, 식별자 또는 <palette-mix()> 함수. <palette-mix()>는 결과 팔레트가 동일하면 키워드 또는 식별자로 단순화해야 함.
font-size	<absolute-size> \| <relative-size> \| <length-percentage [0,∞]> \| math	medium	모든 요소 및 텍스트	예	상위 요소의 폰트 크기 기준	계산값 타입 기준	문법 순서대로	절대 길이
font-size-adjust	none \| <number [0,∞]>	none	모든 요소 및 텍스트	예	N/A	계산값 타입 기준	문법 순서대로	숫자 또는 키워드 none
font-style	normal \| italic \| left \| right \| oblique <angle [-90deg,90deg]>?	normal	모든 요소 및 텍스트	예	해당 없음	계산값 타입 기준; normal은 oblique 0deg로 애니메이션 됨	문법 순서대로	지정 키워드 및(있다면) 각도(degree)
font-synthesis	none \| [ weight \|\| style \|\| small-caps \|\| position]	weight style small-caps position	모든 요소 및 텍스트	예	N/A	분리형(discrete)	문법 순서대로	지정 키워드(들)
font-synthesis-position	auto \| none	auto	모든 요소 및 텍스트	예	N/A	분리형(discrete)	문법 순서대로	지정 키워드
font-synthesis-small-caps	auto \| none	auto	모든 요소 및 텍스트	예	N/A	분리형(discrete)	문법 순서대로	지정 키워드
font-synthesis-style	auto \| none \| oblique-only	auto	모든 요소 및 텍스트	예	N/A	분리형(discrete)	문법 순서대로	지정 키워드	visual
font-synthesis-weight	auto \| none	auto	모든 요소 및 텍스트	예	N/A	분리형(discrete)	문법 순서대로	지정 키워드	visual
font-variant	normal \| none \| [ [ <common-lig-values> \|\| <discretionary-lig-values> \|\| <historical-lig-values> \|\| <contextual-alt-values> ] \|\| [ small-caps \| all-small-caps \| petite-caps \| all-petite-caps \| unicase \| titling-caps ] \|\| [ stylistic(<font-feature-value-name>) \|\| historical-forms \|\| styleset(<font-feature-value-name>#) \|\| character-variant(<font-feature-value-name>#) \|\| swash(<font-feature-value-name>) \|\| ornaments(<font-feature-value-name>) \|\| annotation(<font-feature-value-name>) ] \|\| [ <numeric-figure-values> \|\| <numeric-spacing-values> \|\| <numeric-fraction-values> \|\| ordinal \|\| slashed-zero ] \|\| [ <east-asian-variant-values> \|\| <east-asian-width-values> \|\| ruby ] \|\| [ sub \| super ] \|\| [ text \| emoji \| unicode ] ]	normal	모든 요소 및 텍스트	예	해당 없음	분리형(discrete)	문법 순서대로	지정값 그대로
font-variant-alternates	normal \| [ stylistic(<font-feature-value-name>) \|\| historical-forms \|\| styleset(<font-feature-value-name>#) \|\| character-variant(<font-feature-value-name>#) \|\| swash(<font-feature-value-name>) \|\| ornaments(<font-feature-value-name>) \|\| annotation(<font-feature-value-name>) ]	normal	모든 요소 및 텍스트	예	해당 없음	분리형(discrete)	문법 순서대로	지정값 그대로
font-variant-caps	normal \| small-caps \| all-small-caps \| petite-caps \| all-petite-caps \| unicase \| titling-caps	normal	모든 요소 및 텍스트	예	해당 없음	분리형(discrete)	문법 순서대로	지정값 그대로
font-variant-east-asian	normal \| [ <east-asian-variant-values> \|\| <east-asian-width-values> \|\| ruby ]	normal	모든 요소 및 텍스트	예	해당 없음	분리형(discrete)	문법 순서대로	지정값 그대로
font-variant-emoji	normal \| text \| emoji \| unicode	normal	모든 요소 및 텍스트	예	N/A	분리형(discrete)	문법 순서대로	지정 키워드
font-variant-ligatures	normal \| none \| [ <common-lig-values> \|\| <discretionary-lig-values> \|\| <historical-lig-values> \|\| <contextual-alt-values> ]	normal	모든 요소 및 텍스트	예	해당 없음	분리형(discrete)	문법 순서대로	지정값 그대로
font-variant-numeric	normal \| [ <numeric-figure-values> \|\| <numeric-spacing-values> \|\| <numeric-fraction-values> \|\| ordinal \|\| slashed-zero ]	normal	모든 요소 및 텍스트	예	해당 없음	분리형(discrete)	문법 순서대로	지정값 그대로
font-variant-position	normal \| sub \| super	normal	모든 요소 및 텍스트	예	해당 없음	분리형(discrete)	문법 순서대로	지정값 그대로
font-variation-settings	normal \| [ <opentype-tag> <number> ]#	normal	모든 요소 및 텍스트	예	해당 없음	본문 참조	문법 순서대로	키워드 normal 또는 리스트, 각 항목은 문자열과 숫자의 쌍
font-weight	<font-weight-absolute> \| bolder \| lighter	normal	모든 요소 및 텍스트	예	해당 없음	계산값 타입 기준	문법 순서대로	숫자, 아래 참조
font-width	normal \| <percentage [0,∞]> \| ultra-condensed \| extra-condensed \| condensed \| semi-condensed \| semi-expanded \| expanded \| extra-expanded \| ultra-expanded	normal	모든 요소 및 텍스트	예	해석X	계산값 타입 기준	문법 순서대로	퍼센트, 아래 참조

CSS 폰트 모듈 레벨 4

요약

이 문서의 상태

1. 소개

1.1. 값 정의

2. 기본 폰트 속성

2.1. 폰트 패밀리: font-family 속성

2.1.1. <font-family-name> 구문

2.1.2. <generic-font-family> 구문

2.1.3. <system-font-family-name> 구문

2.1.4. 페이스와 패밀리의 관계

2.1.5. 일반 폰트 패밀리

2.2. 폰트 두께: font-weight 속성

2.2.1. 상대적인 두께

2.2.2. 없는 두께

2.3. 글꼴 너비: font-width 속성

2.3.1. 글꼴 너비: font-stretch 레거시 이름 별칭

2.4. 글꼴 스타일: font-style 속성

2.5. 글꼴 크기: font-size 속성

2.5.1. 절대 크기 키워드 매핑 테이블

2.6. 상대적 크기 조정: font-size-adjust 속성

2.7. 글꼴 단축 속성: font 속성

2.8. 합성 폰트 페이스 제어

2.8.1. 합성 볼드 제어: font-synthesis-weight 속성

2.8.2. 합성 오블리크 제어: font-synthesis-style 속성

2.8.3. 합성 스몰캡스 제어: font-synthesis-small-caps 속성

2.8.4. 합성 위첨자/아래첨자 제어: font-synthesis-position 속성

2.8.5. 합성 페이스 제어: font-synthesis 단축 속성

3. 글꼴 렌더링 제어

3.1. 글꼴 렌더링 제어 소개

3.2. 글꼴 표시 타임라인

4. 폰트 리소스

4.1. @font-face 규칙

4.2. 폰트 패밀리: font-family 디스크립터

4.3. 폰트 참조: src 디스크립터

4.3.1. src 디스크립터 파싱

4.3.2. 개별 src 디스크립터 항목 로딩

4.3.3. src 항목 선택

4.3.3.1. 로컬 폰트 폴백

4.4. 폰트 속성 기술자: font-style, font-weight, font-width 기술자

4.4.1. 폰트 폭: font-stretch 레거시 명칭 별칭

4.5. 문자 범위: unicode-range 기술자

4.5.1. 문자 범위를 활용한 복합 폰트 정의

4.6. 폰트 기능 및 변형: font-feature-settings 및 font-variation-settings 기술자

4.7. 가변 폰트의 명명된 인스턴스 사용: font-named-instance 기술자

4.8. 폰트 요청 가이드라인

4.8.1. 폰트 로딩 가이드라인

4.8.2. 폰트 가져오기 요구 사항(Font fetching requirements)

4.9. 폰트 페이스별 표시 제어: font-display 서술자

4.9.1. @font-feature-values를 통한 폰트 패밀리별 폰트 표시 제어

4.10. 기본 폰트 언어 재정의: font-language-override 서술자

4.11. 기본 폰트 메트릭 재정의: ascent-override, descent-override, line-gap-override 서술자

5. 폰트 매칭 알고리즘

5.1. 로컬라이즈된 이름 매칭

5.2. 폰트 스타일 매칭

5.3. 클러스터 매칭

5.4. 문자 처리 이슈

6. 폰트 기능 속성

6.1. 글리프 선택 및 배치

6.2. 언어별 표시

6.3. 커닝: font-kerning 속성

6.4. 합자: font-variant-ligatures 속성

6.5. 첨자 및 윗첨자 형태: font-variant-position 속성

6.6. 대문자 변형: font-variant-caps 속성

6.7. 숫자 포맷팅: font-variant-numeric 속성

6.8. 대체 글리프 및 스와시: font-variant-alternates 속성

6.9. 폰트별 대체 글리프 정의: @font-feature-values 규칙

6.9.1. 기본 문법

6.9.2. 다중 값 기능 값 정의

6.10. 동아시아 텍스트 렌더링: font-variant-east-asian 속성

6.11. 폰트 렌더링 전체 약어: font-variant 속성

6.12. 로우레벨 폰트 기능 설정 제어: font-feature-settings 속성

6.13. 폰트 언어 오버라이드: font-language-override 속성

7. 폰트 기능 및 변형 해석

7.1. 기본 기능

7.2. 기능 및 변형 우선순위

7.3. 기능 우선순위 예시

8. 폰트 변형 속성

8.1. 광학 크기 제어: font-optical-sizing 속성

8.2. 로우레벨 폰트 변형 설정 제어: font-variation-settings 속성

12.1. `CSSFontFaceRule` 인터페이스

12.2. `CSSFontFeatureValuesRule` 인터페이스

12.3. `CSSFontPaletteValuesRule` 인터페이스