CSS 글꼴 모듈 레벨 5

1. 소개

CSS Fonts Level 4 명세 ([CSS-FONTS-4])는 문서 내에서 글꼴을 선택하고 사용하는 데 CSS가 제공하는 제어를 설명하며, 가변 폰트 및 컬러 폰트에 대한 지원을 포함합니다. 이 문서의 아이디어는 CSS Fonts Level 4에서 정의된 속성과 규칙에 대한 추가 또는 수정입니다.

이 명세는 현재 CSS Fonts Level 4 명세에 대한 델타입니다. 여기 없는 항목이 삭제되었다고 가정하지 마세요.

1.1. 값 정의

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

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

2. Text-Scale `meta` 요소

사용자 에이전트는 medium의 계산된 값을 16px에 text scale factor를 곱해서 계산해야 합니다. 사용자 에이전트는 또한 다른 <absolute-size> 키워드의 계산된 크기를 결정할 때 이 인자를 적용해야 합니다. 그러나 사용자 에이전트는 가독성을 보존하기 위해 이러한 다른 키워드들을 비선형적으로 스케일해야 합니다.

Note: 모든 키워드에 선형 스케일을 적용하면 큰 글꼴이 지나치게 크게 렌더링됩니다. 최소 및 최대 중요 글꼴 크기에 대한 WCAG 논의를 보세요.

다음과 같은 meta 태그를 가진 문서는, name 속성 값이 ASCII 대소문자 구분 없이 일치하는 경우 "text-scale" 텍스트 스케일 인자를 제어하는 것으로 인식됩니다.

content 속성의 값은 인식된 키워드 중 하나와 ASCII 대소문자 구분 없이 일치해야 합니다. 그렇지 않으면 해당 태그는 무시됩니다.

이 meta 태그가 없는 문서는 기본값으로 legacy를 가정합니다.

<meta name="text-scale" content="scale" />

문서당 meta 요소가 name 속성 값으로 ASCII 대소문자 구분 없이 text-scale와 일치하도록 설정되어서는 안 됩니다.

2.1. 키워드

text-scale meta 요소에서 인식되는 키워드는 다음과 같습니다:

legacy: preferred-text-scale 환경 변수는 모바일 장치에서 사용자의 운영체제 수준 글꼴 계수를 반환하지만, 데스크탑 장치에서는 1을 반환합니다. text scale factor는 UA 수준의 글꼴 환경설정을 포함하지만 운영체제 수준의 글꼴 설정은 무시합니다.
Note: text-scale meta 태그를 생략하거나 인식되지 않는 content 속성 키워드를 포함하는 것과 동일합니다.
scale: preferred-text-scale 환경 변수는 사용자의 운영체제 수준 글꼴 환경설정을 반환합니다. text scale factor는 UA 수준 및 운영체제 수준의 글꼴 환경설정을 모두 포함합니다.

2.2. The legacy 키워드

text-scale content 속성의 값이 legacy일 때, text scale factor는 사용자 에이전트가 제공하는 설정에서 사용자가 선택한 글꼴 스케일 계수(오직 사용자 에이전트 수준에서만)를 사용합니다. preferred-text-scale 환경 변수 값은 데스크탑 플랫폼에서 1이어야 합니다.

모바일 플랫폼에서는:

운영체제가 텍스트 스케일 설정을 제공하고 AND UA가 이미 해당 계수를 medium 글꼴 크기에 적용하지 않았다면, preferred-text-scale 환경 변수는 운영체제의 텍스트 스케일 설정에서 사용자가 선택한 곱셈 계수를 반환합니다.
Note: 발행 시점에서 Android, iOS, Firefox, Safari, Chrome의 모든 조합이 이 첫 조건을 만족합니다.
그렇지 않으면 preferred-text-scale 환경 변수는 1을 반환합니다.

2.3. The scale 키워드

text-scale content 속성의 값이 scale일 때, text scale factor는 사용자의 선호 문단 텍스트 크기(운영체제 및 UA 환경설정의 조합으로 결정됨)를 16px로 나눈 값과 일치합니다.

preferred-text-scale 환경 변수는 text scale factor를 반환해야 합니다.

또한, text-scale content 속성의 값이 scale일 경우, 사용자 에이전트는 사용자의 선호를 자동으로 존중하려는 시도로 수행하는 모든 글꼴 크기 조정 개입을 건너뛰어야 합니다. 예: 모바일의 텍스트 자동 크기 조정(참조 CSS Size Adjustment 1 § 1 Introduction) 및 전체 적용 확대(예: Windows에서 인기 브라우저가 수행함).

Note: 저자들은 스타일시트에서 <meta name="text-scale" content="scale">를 사용하여 medium 글꼴 크기가 운영체제 수준이든 UA 수준이든 사용자의 글꼴 환경설정의 조합을 반영하도록 하는 것이 기대됩니다. 그런 다음 저자는 페이지 전반에 걸쳐 rem을 사용하여 사용자의 글꼴 환경설정을 존중할 수 있습니다.

저자가 :root 글꼴 크기를 변경하지 않으면, rem 단위로 크기 지정된 콘텐츠는 선호 텍스트 스케일에 상대적입니다.

<!DOCTYPE html>
<html> <!-- leave this element’s font-size as the default -->
  <head>
    <meta name="text-scale" content="scale" />
  </head>
  <body>
    <div style="font-size: 1rem;">
      This font size obeys the user’s font preferences, **whether
      those preferences are specified at the operating system level
      or the user agent level**
    </div>
    <div style="font-size: 20px;">
      This font size does NOT respect the user’s font preferences.
      <div style="font-size: 1rem;">
        But this font size does!
      </div>
    </div>
  </body>
</html>

3. 기본 글꼴 속성

w3c/csswg-drafts/126 [css-fonts] 대체 글꼴을 위한 매개변수 변경 지정

3.1. 글꼴 패밀리: font-family 속성

3.1.1. 일반 글꼴 패밀리

CSS Fonts Level 4의 CSS Fonts 4 § 2.1.5 Generic font families에 더해, 다음의 새로운 일반 글꼴 패밀리들이 추가로 정의됩니다.

w3c/csswg-drafts/4910 [meta] [css-fonts] 일반 글꼴 패밀리 기준

xxx: xxx 일반 글꼴 패밀리를 위한 자리표시자 텍스트입니다.

w3c/csswg-drafts/4566 [css-fonts] 추가 일반 글꼴을 위한 레지스트리 시작 여부

3.2. 글꼴 두께: font-weight 속성

w3c/csswg-drafts/2690 [css-fonts-4] 상대 가중치를 위한 font-weight의 백분율

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

w3c/csswg-drafts/4044 [css-fonts] 세로 텍스트가 font-style 및 font-stretch와 잘 맞지 않음

3.4. 상대 크기: font-size-adjust 속성

Name:	font-size-adjust
Value:	none \| [ ex-height \| cap-height \| ch-width \| ic-width \| ic-height ]? [ from-font \| <number [0,∞]> ]
Initial:	none
Applies to:	모든 요소 및 텍스트
Inherited:	yes
Percentages:	N/A
Computed value:	키워드 none 또는 메트릭 키워드와 <number>의 쌍
Canonical order:	문법에 따름
Animation type:	키워드가 다르면 불연속, 그렇지 않으면 계산된 값 유형에 따름

주어진 글꼴 크기에 대해, 글꼴 디자인에 따라 문자 크기와 가독성은 글꼴마다 달라집니다. 예를 들어, 대소문자를 구분하는 라틴 또는 키릴 문자와 같은 양문자 체계의 경우, 소문자의 상대적 높이는 가독성의 결정 요소입니다. 글꼴 대체가 발생하는 상황에서는, 대체 글꼴이 원하는 글꼴 패밀리와 동일한 비율을 공유하지 않을 수 있으며, 따라서 다른 크기로 보이거나 가독성이 떨어질 수 있습니다.

Tests

font-size-adjust-ic-height.html (live test) (source)

w3c/csswg-drafts/8792 [css-fonts-5] font-size-adjust: ic-height

font-size-adjust 속성은 글꼴 대체가 발생할 때 텍스트의 가독성과 외관상 크기를 보존하는 방법을 제공합니다. 이는 사용되는 글꼴 크기를 조정하여 지정된 메트릭이 사용되는 글꼴과 관계없이 동일하도록 합니다.

값의 의미는 다음과 같습니다:

none

특별한 font-size 조정이 적용되지 않습니다.

ex-height | cap-height | ch-width | ic-width | ic-height

정규화할 글꼴 메트릭을 지정하며, 기본값은 ex-height입니다:

ex-height: 글꼴의 aspect value를 정규화하며, x-height를 글꼴 크기로 나눈 값을 사용합니다.
cap-height: 글꼴의 cap-height를 정규화하며, cap-height를 글꼴 크기로 나눈 값을 사용합니다.
ch-width: 글꼴의 수평 좁은 폭을 정규화하며, “0”(ZERO, U+0030)의 advance width를 글꼴 크기로 나눈 값을 사용합니다.
ic-width: 글꼴의 수평 넓은 폭을 정규화하며, “水”(CJK water ideograph, U+6C34)의 advance width를 글꼴 크기로 나눈 값을 사용합니다.
ic-height: 글꼴의 수직 넓은 높이를 정규화하며, “水”(CJK water ideograph, U+6C34)의 advance height를 글꼴 크기로 나눈 값을 사용합니다.

w3c/csswg-drafts/6384 [css-fonts-5] 메트릭이 없는 경우의 font-size-adjust

<number [0,∞]>

각 글꼴의 used 크기를 지정된 비율로 정규화하여 선택한 글꼴 메트릭이 계산된 computed한 font-size의 비율과 일치하도록 합니다. 즉, 각 글리프에 대해 사용될 조정된 글꼴 크기 u는 다음과 같이 계산됩니다:

u  =  ( m / m′ ) s

여기서:

s  =  computed 'font-size!!property' value
m  =  'font-size-adjust' 속성에 의해 지정된 메트릭
m′ =  실제 글꼴에 지정된 메트릭
u  =  사용될 조정된 font-size

음수 값은 유효하지 않습니다.

from-font

존재한다면, <number>로 계산되며 이는 first available font의 지정된 메트릭에 해당합니다. 그렇지 않으면 none과 동일합니다.

Tests

아래에 정의된 스타일은 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보다 가독성이 떨어집니다.

Note: 발음 기호(다이아크리틱)를 사용하는 텍스트의 경우, 너무 큰 x-height는 발음 기호를 비좁게 만들어 실제로 가독성을 떨어뜨릴 수 있습니다.

각 글꼴로 렌더링된 텍스트 비교는 아래에 표시되어 있으며, 열은 Verdana, Futura, Times로 렌더링된 텍스트를 보여줍니다. 동일한 글꼴 크기 값이 각 행의 셀에 사용되며, x-height의 차이를 보여주기 위해 빨간 선이 포함되어 있습니다. 상단 절반에서는 각 행이 동일한 글꼴 크기 값으로 렌더링됩니다. 하단 절반에서도 마찬가지이지만, 이 절반에서는 font-size-adjust 속성이 0.545로 설정되어 실제 글꼴 크기가 조정되어 Verdana의 x-height가 각 행에서 보존됩니다. 하단 절반에서 텍스트가 각 행에서 상대적으로 읽기 쉬운 상태로 남아 있는 것을 보세요.

font-size-adjust의 값은 used 값인 font-size에 영향을 주지만, computed 값에는 영향을 주지 않습니다. 따라서 ex 및 ch와 같은 글꼴 메트릭에 기반한 상대 단위의 크기에 영향을 줄 수 있지만, em 단위의 크기에는 영향을 주지 않습니다. line-height의 숫자 값은 computed한 font-size를 참조하므로, font-size-adjust는 used 값인 line-height에도 영향을 주지 않습니다.

Note: font-size-adjust가 line-height에 반영되지 않으므로, 너무 좁은 줄 높이를 지정하면 텍스트 줄이 겹칠 수 있습니다. 예를 들어, 낮은 aspect value를 가진 대체 글꼴을 높은 aspect value를 가진 글꼴에 맞추면, 그 글꼴의 어센더와 디센더가 줄 상자 밖으로 확장되어 line-height: 1로는 잘리지 않을 수 있습니다.

font-size-adjust 조정은 선택된 모든 글꼴에 적용되지만, 일반적인 사용에서는 font-family 목록에서 첫 번째(가장 원하는) 글꼴의 대응 메트릭 값을 기반으로 합니다. 이것이 정확히 지정되면, 조정 공식의 (m/m′) 항은 첫 글꼴에 대해 1로 해석되어 그 글꼴에는 조정이 발생하지 않으며; 나머지 글꼴들은 일치시키기 위해 조정됩니다. 값이 부정확하게 지정되면, 가족 목록의 첫 글꼴을 사용하는 텍스트는 font-size-adjust를 지원하지 않는 오래된 UA에서 다르게 표시될 수 있습니다.

저자는 주어진 글꼴의 aspect value를 동일한 내용이지만 서로 다른 font-size-adjust 속성을 가진 span들을 비교하여 계산할 수 있습니다. 동일한 font-size가 사용되면, span들은 해당 글꼴에 대해 font-size-adjust 값이 정확할 때 일치합니다.

테두리가 있는 두 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>

오른쪽 상자가 왼쪽 상자보다 약간 더 크므로, 이 글꼴의 aspect value는 0.5보다 약간 작습니다. 상자가 정렬될 때까지 값을 조정하세요.

Note: @font-face에서 @font-face로 메트릭이 재정의된 경우, 예: size-adjust에 의해, 재정의된 메트릭이 font-size-adjust 계산에 사용됩니다. 결과적으로, font-size-adjust와 size-adjust를 함께 적용하면 size-adjust가 효과가 없는 것처럼 보일 수 있습니다.

4. 글꼴 리소스

4.1. @font-face 규칙

Note: 설명자(descriptor)는 요소별이 아니라 글꼴별로 적용됩니다. 개별 요소 내에서 여러 글꼴을 사용할 수 있습니다. 예: 첫 번째 사용 가능한 글꼴에서 지원하지 않는 문자에 대해.

4.2. 글꼴 참조: src 설명자

4.2.1. src 설명자 구문 분석

src 설명자 값은 CSS Syntax 3 § 5.3.11 콤마로 구분된 구성 요소 값 목록 구문 분석에 따라 구문 분석되어야 합니다. 그런 다음 각 구성 요소 값은 다음 문법에 따라 구문 분석됩니다:

<url> [ format(<font-format>)]? [ tech( <font-tech>#)]? | local(<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 ]

구성 요소 값이 올바르게 구문 분석되고 CSS Fonts 4 § 11.2 글꼴 포맷 또는 CSS Fonts 4 § 11.1 글꼴 기술에 정의된 지원되는 항목이라면, 이를 지원 소스 목록에 추가합니다. 구성 요소 값을 구문 분석하는 동안 구문 오류가 발생하거나 해당 포맷/기술이 지원되지 않으면, 지원 소스 목록에 추가하지 않습니다.

이 과정의 끝에 지원되는 항목이 하나도 없으면, src 설명자의 값은 구문 오류입니다.

이러한 구문 규칙은 특정 글꼴 기술이나 포맷을 지원하지 않는 사용자 에이전트에 대해 글꼴의 점진적 대체를 허용합니다.

예를 들어, 증분 전송(incremental transfer)이 지원되지 않을 때에는, 성능 최적화를 위해 woff2로 압축된 버전의 글꼴이 제공되고, 이후에는 incremental transfer를 위해 원시 비압축 OpenType 글꼴이 제공되며, 그 일부가 필요에 따라 로드됩니다.

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

4.3. 글꼴 속성 설명자: font-size

w3c/csswg-drafts/806 [css-fonts-5] 광학 크기용 범위를 허용하는 @font-face의 font-size 설명자 추가

w3c/csswg-drafts/731 [css-fonts] ex 단위를 위한 font-size 설명자

이름:	font-size
대상:	@font-face
값:	auto \| [<number>]{1,2}
초기값:	auto

auto: 글꼴은 모든 글꼴 크기와 일치합니다
<number>: 단일 <number>이 주어지면 글꼴은 그 특정 글꼴 크기와만 일치합니다. 두 개의 <numbers가 주어지면, 일치하는 글꼴 크기 범위를 지정합니다.

4.4. 글리프 크기 승수: size-adjust 설명자

이름:	size-adjust
대상:	@font-face
값:	<percentage [0,∞]>
초기값:	100%

size-adjust 설명자는 이 글꼴과 관련된 글리프 외곽선과 메트릭에 대한 승수를 정의하여, 작성자가 동일한 font-size에서 다양한 글꼴 디자인을 조화시킬 수 있게 합니다.

이 글꼴과 관련된 모든 메트릭—글리프 advance, baseline 테이블, 그리고 @font-face 설명자에 의해 제공되는 재정의까지—은 주어진 백분율로 스케일되며, 렌더된 글리프 이미지도 마찬가지로 스케일됩니다. 결과적으로 이 글꼴에서 유래된 값들(예: ex 및 ch 단위, 또는 text-decoration-thickness의 from-font 값 등)는 이 글꼴에서 유래할 때 영향을 받습니다. 그러나 계산된 font-size (따라서 그로부터 유도되는 모든 값들, 예: em 단위, text-underline-offset의 백분율 등)는 영향을 받지 않습니다.

Note: size-adjust 설명자는 본질적으로 글꼴별로 ex 높이를 맞추어 조정값을 계산하는 font-size-adjust 속성과 유사하게 동작하지만, 마찬가지로 계산된 font-size에는 영향을 주지 않습니다.

Tests

4.5. 줄 높이 폰트 메트릭 재정의: ascent-override, descent-override, 및 line-gap-override 설명자

이름:	ascent-override
대상:	@font-face
값:	[ normal \| <percentage [0,∞]> ]{1,2}
초기값:	normal

이름:	descent-override
대상:	@font-face
값:	[ normal \| <percentage [0,∞]> ]{1,2}
초기값:	normal

이름:	line-gap-override
대상:	@font-face
값:	[ normal \| <percentage [0,∞]> ]{1,2}
초기값:	normal

ascent-override, descent-override, 및 line-gap-override 설명자는 각각 글꼴의 ascent metric, descent metric, 및 line gap metric을 지정합니다. 첫 번째 값은 x 축에 대한 값을 제공하고, 두 번째 값은 y 축에 대한 값을 제공합니다 (생략하면 normal이 기본값입니다).

normal: 해당 메트릭 값은 평소처럼 글꼴에서 얻어지며, 마치 이 설명자가 @font-face 블록에 없는 것처럼 동작합니다.
Note: 일부 글꼴 포맷에는 이러한 메트릭의 여러 소스가 있기 때문에, 이것은 UA/플랫폼마다 다른 텍스트 레이아웃을 초래할 수 있습니다.
<percentage>: 해당 메트릭은 조정된 유효 글꼴 크기 이후에 곱해지는 주어진 백분율로 대체됩니다.

Tests

font-size-adjust 속성은 size-adjust 설명자 다음에 적용됩니다.

Note: font-size-adjust를 size-adjust 이후에 적용하면 size-adjust가 효과가 없는 것처럼 보이는 결과가 됩니다.

Note: 이러한 설명자들은 계산에 영향을 주지 않습니다. font-size, line-height, 또는 font-relative lengths의 계산에는 영향을 주지 않습니다. 그러나 이들은 line-height: normal 및 일반적으로 인라인 레벨 콘텐츠의 기준선 정렬 동작에는 영향을 줄 수 있습니다.

Note: 이러한 메트릭은 블록 축(block axis)에서만 적용되므로, y축 값은 수직 타이포그래픽 모드에서 직립 조판을 수행할 때에만 사용됩니다.

백분율은 서로 다른 요소에 대해 서로 다른 글꼴 크기에 대해 해결됩니다.

@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);
  /* Override metric values to match cool-web-font */
  ascent-override: 125%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 96%;
}

<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">

사용자 에이전트가 로드 후 웹 글꼴로 전환할 때(재정의 값이 웹 글꼴의 자연 메트릭과 유사하다고 가정하면) 이미지의 이동이 덜 발생합니다.

4.6. 위첨자/아래첨자 메트릭 재정의: superscript-position-override, subscript-position-override,superscript-size-override 및 subscript-size-override 설명자

이름:	superscript-position-override
대상:	@font-face
값:	[ normal \| from-font \| <percentage> ]{1,2}
초기값:	normal

이름:	subscript-position-override
대상:	@font-face
값:	[ normal \| from-font \| <percentage> ]{1,2}
초기값:	normal

이름:	superscript-size-override
대상:	@font-face
값:	[ normal \| from-font \| <percentage [0,∞]> ]{1,2}
초기값:	normal

이름:	subscript-size-override
대상:	@font-face
값:	[ normal \| from-font \| <percentage [0,∞]> ]{1,2}
초기값:	normal

superscript-position-override, subscript-position-override, superscript-size-override, 및 subscript-size-override 설명자는 각각 위첨자 오프셋, 아래첨자 오프셋, 위첨자 크기 및 아래첨자 크기 메트릭을 지정하며, 이는 font-variant-position에 의해 글리프를 합성할 때 사용됩니다. 첫 번째 값은 x 축에 대한 값을 제공하고, 두 번째 값은 y 축에 대한 값을 제공합니다 (생략하면 첫 번째 값이 기본값입니다).

normal: UA는 글꼴에서 파생되었든 휴리스틱에서 유래되었든 어떤 메트릭 값을 사용할지 결정합니다.
from-font: 해당 글꼴 데이터의 대응 메트릭이 사용됩니다(있다면). (메트릭이 누락된 경우 normal과 동일합니다.)
<percentage>: 해당 메트릭은 사용된 글꼴 크기에 곱해지는 주어진 백분율로 대체됩니다.

Note: 이러한 메트릭은 블록 축에서만 적용되므로, y축 값은 직립 조판을 수행할 때에만 수직 타이포그래픽 모드에서 사용됩니다.

5. 글꼴 기능 속성

5.1. 글꼴 언어 오버라이드: font-language-override 속성

w3c/csswg-drafts/5484 [css-fonts-5] font-language-override 제거

6. 글꼴 기능 및 변형 해결

w3c/csswg-drafts/5635 [CSS-Fonts] 가변 글꼴 설정을 보간하는 방법 필요

7. 글꼴 변형 속성

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

w3c/csswg-drafts/5466 [css-text][css-fonts] 줄의 광학적 경계

8. 글꼴 기술 및 포맷

8.1. 글꼴 기술

이 절은 CSS Fonts 4 § 11.1 Font tech를 확장합니다.

The avar2 tech refers to support for version 2 of OpenType axis variations [avar2], for flexible variation axis remapping.

For example, a font using variation axis remapping is loaded only if supported:

@font-face {
  font-family: 'Roboto Flex';
  src: url('RobotoFlex-VF-avar2.woff2') format(woff2) tech(variations, avar2);
  src: url('RobotoFlex-VF.woff2') format(woff2) tech(variations);
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}

9. 객체 모델

이 절은 CSS Fonts 4 §  12. Object Model을 확장합니다.

The contents of @font-face and @font-feature-values rules can be accessed via the following extensions to the CSS Object Model.

테스트

idlharness.html (live test) (source)

9.1. The `CSSFontFaceRule` interface

The CSSFontFaceRule interface represents a <@font-face> rule.

[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 fontSize;
  attribute [LegacyNullToEmptyString] CSSOMString font-size;
  attribute [LegacyNullToEmptyString] CSSOMString sizeAdjust;
  attribute [LegacyNullToEmptyString] CSSOMString size-adjust;
  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;
  attribute [LegacyNullToEmptyString] CSSOMString superscriptPositionOverride;
  attribute [LegacyNullToEmptyString] CSSOMString superscript-position-override;
  attribute [LegacyNullToEmptyString] CSSOMString subscriptPositionOverride;
  attribute [LegacyNullToEmptyString] CSSOMString subscript-position-override;
  attribute [LegacyNullToEmptyString] CSSOMString superscriptSizeOverride;
  attribute [LegacyNullToEmptyString] CSSOMString superscript-size-override;
  attribute [LegacyNullToEmptyString] CSSOMString subscriptSizeOverride;
  attribute [LegacyNullToEmptyString] CSSOMString subscript-size-override;
};

[Exposed=Window]
interface CSSFontFaceRule : CSSRule {
  [SameObject, PutForwards=cssText] readonly attribute CSSFontFaceDescriptors style;
};

10. 보안 고려사항

이 명세에 대해 보고된 새로운 보안 고려사항은 없습니다.

11. 개인정보 고려사항

이 명세에 대해 보고된 새로운 개인정보 고려사항은 없습니다.

12. 감사의 글

우선, 편집자들은 이 모듈의 이전 레벨에 기여한 모든 분들께 감사드립니다. contributors to the previous level of this module.

둘째, 우리는 Level 5의 개선에 기여한 다음 분들을 인정합니다: Google의 Dave Crossland, RealObjects의 Bernhard Fey, Google의 Xiaocheng Hu, Mozilla의 Jonathan Kew, 그리고 Laurence Penney.

13. 변경 내역

13.1. 2024년 2월 6일 WD 이후 변경점: WD of 6 February 2024

text-scale meta 태그 및 preferred-text-scale 환경 변수 지원 추가, 예시 포함 (Issue 12380), (Issue 12475)
누락된 CSSOM superscript-position-override, subscript-position-override, superscript-size-override 및 subscript-size-override 설명자 추가
누락된 CSSOM size-adjust 및 font-size 설명자 추가
avar2 글꼴 기술 추가 (Issue 10599)
증분 예시를 최신 IFT 명세로 업데이트 (Issue 6063)
font-size-adjust가 글꼴 메트릭 재정의에 선행함을 명시적으로 선언 (Issue 8967)

13.2. 2021년 12월 21일 WD 이후 변경점: WD of 21 December 2021

font-size 설명자의 초기값 수정
font-size-adjust 숫자 문법에 범위 설정
local() 문법을 font-face-name 대신 family-name 사용으로 변경
증분 글꼴 다운로드 키워드를 현재 상태로 업데이트
일관성을 위해 feature-*를 복수형으로 변경 (CSS Conditional 5 및 11.1 Font tech와)
범위 표기에서 infinity를 ∞로 정규화
tech() 함수의 오타 수정

13.3. 2021-07-29 WD 이후 변경점: WD of 2021-07-29

technology를 tech로 이름 변경
보안과 개인정보 보호가 이제 별도의 섹션으로 분리됨
font-technology 문법 수정
src 설명자 구문 분석 섹션을 CSS Fonts 4에서 복사

13.4. 2021-06-29 FPWD 이후 변경점: FPWD of 2021-06-29

무서운 경고문 삭제
supports에 증분 글꼴 기술 추가

적합성

문서 관례

적합성 요구사항은 설명적 주장과 RFC 2119 용어의 조합으로 표현됩니다. 규범적 부분에서의 키워드 “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, 및 “OPTIONAL”은 RFC 2119에 기술된 대로 해석되어야 합니다. 다만 가독성을 위해 이 단어들이 이 명세 전체에서 모두 대문자로 표기되지는 않습니다.

이 명세의 모든 텍스트는 비규범으로 명시된 섹션들, 예시, 및 주석을 제외하고는 규범적입니다. [RFC2119]

이 명세의 예시는 “for example”이라는 단어로 소개되거나 규범 텍스트와 분리되어 class="example"로 표시됩니다. 다음과 같습니다:

정보성 주석은 “Note”라는 단어로 시작하며 규범 텍스트와 분리되어 class="note"로 표시됩니다. 다음과 같습니다:

권고문(advisements)은 특수한 주의를 환기시키기 위해 스타일된 규범적 섹션이며 <strong class="advisement">로 분리되어 표시됩니다. 예: UAs MUST provide an accessible alternative.

적합성 클래스

이 명세에 대한 적합성은 세 가지 적합성 클래스로 정의됩니다:

스타일 시트는 이 모듈에 정의된 문법을 사용하는 모든 명제가 일반적인 CSS 문법 및 이 모듈에 정의된 각 기능의 개별 문법에 따라 유효하면 본 명세에 적합합니다.

렌더러는 해당 표준에 정의된 대로 스타일 시트를 해석하는 것 외에도, 이 명세에서 정의한 모든 기능을 올바르게 구문 분석하고 문서를 적절히 렌더링함으로써 본 명세에 적합합니다. 다만 장치의 한계로 인해 문서를 올바르게 렌더링할 수 없는 경우에는 UA가 비적합으로 간주되지 않습니다. (예: 단색 모니터에서 색을 렌더링할 필요는 없습니다.)

작성 도구는 이 모듈의 일반 CSS 문법 및 각 기능의 개별 문법에 따라 문법적으로 올바른 스타일 시트를 작성하고, 이 모듈에 설명된 스타일 시트에 대한 모든 기타 적합성 요구사항을 충족하면 본 명세에 적합합니다.

부분 구현

작성자가 전방 호환 파싱 규칙을 이용해 대체 값을 지정할 수 있도록 하기 위해, CSS 렌더러는 사용 가능한 수준의 지원이 없는 at-rule, 속성, 속성 값, 키워드 및 기타 구문 구성은 무효로 처리하고(필요에 따라 무시)야 합니다. 특히, UA는 지원되지 않는 구성 요소 값을 선택적으로 무시하고 단일 다중값 속성 선언에서 지원되는 값을 적용해서는 안 됩니다: 어떤 값이라도 무효로 간주되면(지원되지 않는 값은 반드시 그래야 함), CSS는 전체 선언을 무시하도록 요구합니다.

불안정 및 독점 기능의 구현

미래의 안정된 CSS 기능과 충돌을 피하기 위해, CSSWG는 불안정 기능 및 CSS에 대한 독점 확장의 구현에 대해 모범 사례를 따를 것을 권장합니다.

비실험적 구현

명세가 Candidate Recommendation 단계에 도달하면, 비실험적 구현이 가능해지며, 구현자들은 자신들이 명세에 따라 올바르게 구현했음을 보여줄 수 있는 CR 수준 기능에 대해 접두사가 없는 구현을 공개해야 합니다.

CSS의 상호운용성을 확립하고 유지하기 위해, CSS 작업 그룹은 비실험적 CSS 렌더러가 구현 보고서(필요한 경우 해당 구현 보고서에 사용된 테스트 케이스 포함)를 W3C에 제출할 것을 요청합니다. W3C에 제출된 테스트케이스는 CSS 작업 그룹의 검토 및 수정 대상이 됩니다.

테스트케이스 및 구현 보고서 제출에 대한 자세한 정보는 CSS 작업 그룹 웹사이트의 https://www.w3.org/Style/CSS/Test/에서 찾을 수 있습니다. 질문은 public-css-testsuite@w3.org 메일링 리스트로 보내주시기 바랍니다.

CSS 글꼴 모듈 레벨 5

개요

이 문서의 상태

1. 소개

1.1. 값 정의

2. Text-Scale meta 요소

2.1. 키워드

2.2. The legacy 키워드

2.3. The scale 키워드

3. 기본 글꼴 속성

3.1. 글꼴 패밀리: font-family 속성

3.1.1. 일반 글꼴 패밀리

3.2. 글꼴 두께: font-weight 속성

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

3.4. 상대 크기: font-size-adjust 속성

4. 글꼴 리소스

4.1. @font-face 규칙

4.2. 글꼴 참조: src 설명자

4.2.1. src 설명자 구문 분석

4.3. 글꼴 속성 설명자: font-size

4.4. 글리프 크기 승수: size-adjust 설명자

4.5. 줄 높이 폰트 메트릭 재정의: ascent-override, descent-override, 및 line-gap-override 설명자

4.6. 위첨자/아래첨자 메트릭 재정의: superscript-position-override, subscript-position-override,superscript-size-override 및 subscript-size-override 설명자

5. 글꼴 기능 속성

5.1. 글꼴 언어 오버라이드: font-language-override 속성

6. 글꼴 기능 및 변형 해결

7. 글꼴 변형 속성

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

8. 글꼴 기술 및 포맷

8.1. 글꼴 기술

9. 객체 모델

9.1. The CSSFontFaceRule interface

10. 보안 고려사항

11. 개인정보 고려사항

12. 감사의 글

13. 변경 내역

13.1. 2024년 2월 6일 WD 이후 변경점: WD of 6 February 2024

13.2. 2021년 12월 21일 WD 이후 변경점: WD of 21 December 2021

13.3. 2021-07-29 WD 이후 변경점: WD of 2021-07-29

13.4. 2021-06-29 FPWD 이후 변경점: FPWD of 2021-06-29

적합성

문서 관례

적합성 클래스

부분 구현

불안정 및 독점 기능의 구현

비실험적 구현

색인

이 명세에서 정의한 용어

참조로 정의된 용어

참고문헌

규범적 참고문헌

설명적 참고문헌

속성 색인

@font-face 설명자

IDL 색인

이슈 색인

2. Text-Scale `meta` 요소

9.1. The `CSSFontFaceRule` interface