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 전역 키워드(CSS-wide keywords) 역시 속성 값으로 허용합니다. 가독성을 위해 별도로 반복하지 않았습니다.

2. 기본 폰트 속성

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

2.1.1. 일반 글꼴 패밀리

CSS Fonts Level 4의 CSS Fonts 4 § 2.1.3 일반 글꼴 패밀리 외에도, 아래와 같은 새로운 일반 글꼴 패밀리도 정의됩니다.

xxx

xxx 일반 글꼴 패밀리에 대한 플레이스홀더 텍스트입니다.

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

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

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

동일한 폰트 크기에서도 텍스트의 실제 크기와 가독성은 폰트의 디자인에 따라 달라집니다. 예를 들어, 대소문자를 구분하는 라틴어나 키릴 문자와 같은 이중문자계 스크립트의 경우, 소문자의 크기가 대문자에 비해 상대적으로 얼마나 높은가가 가독성에 중요한 영향을 미칩니다. 폰트 폴백이 발생하는 상황에서는, 폴백 폰트가 원하는 글꼴 패밀리와 주요 타이포그래피 메트릭의 비율이 다를 수 있으므로, 결과적으로 크기가 달라 보이거나 가독성이 떨어질 수 있습니다.

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

폰트의 수평 협폭(pitch)을 정규화하며, “0” (ZERO, U+0030)의 advance width를 폰트 크기로 나눈 값을 사용합니다.

ic-width

폰트의 수평 광폭(pitch)을 정규화하며, “水” (CJK 물 수자, U+6C34)의 advance width를 폰트 크기로 나눈 값을 사용합니다.

ic-height

폰트의 수직 광폭(pitch)을 정규화하며, “水” (CJK 물 수자, 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  =  계산된 'font-size!!property' 값
m  =  'font-size-adjust' 속성에 지정된 메트릭
m′ =  실제 폰트에서의 메트릭
u  =  사용될 조정된 폰트 크기

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

from-font

지정된 메트릭에 해당하는 <number> 값을 첫 번째 사용 가능한 폰트에서 계산합니다.

w3c/csswg-drafts/6384[css-fonts-5] font-size-adjust와 메트릭 누락

아래 스타일은 원하는 폰트 패밀리로 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보다 읽기 어렵습니다.

참고: 발음 구별 부호(다이아크리틱)를 사용하는 텍스트의 경우, x-height가 너무 크면 오히려 가독성이 떨어질 수 있습니다. 왜냐하면 다이아크리틱이 좁게 배치되기 때문입니다.

아래는 각 폰트로 렌더링된 텍스트의 비교입니다. 각 열은 Verdana, Futura, Times로 렌더링된 텍스트를 보여줍니다. 각 행 내에서는 동일한 font-size 값이 사용되고, 빨간 선으로 x-height 차이를 보여줍니다. 상단은 각 행이 동일한 font-size 값으로 렌더링된 경우이고, 하단은 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 값에도 영향을 주지 않습니다.

참고: font-size-adjust는 line-height에 포함되지 않으므로, 줄 높이를 너무 타이트하게 지정하면 텍스트 줄이 겹칠 수 있습니다. 예를 들어, aspect value가 낮은 폴백 폰트를 aspect value가 높은 폰트와 맞추도록 정규화하면, 그 폰트의 어센더와 디센더가 line-height: 1일 때 줄 박스 밖으로 나올 수 있습니다.

font-size-adjust 조정은 선택된 모든 폰트에 적용되지만, 일반적으로는 font-family 리스트의 첫 번째(가장 선호하는) 폰트의 해당 메트릭 값을 기반으로 사용합니다. 이를 정확히 지정하면, 조정 공식의 (m/m′) 항이 첫 번째 폰트에서는 1이 되어 조정이 없고, 나머지 폰트는 이에 맞춰지게 됩니다. 값을 부정확하게 지정하면, font-size-adjust를 지원하지 않는 구버전 사용자 에이전트에서 첫 번째 폰트로 렌더링될 때 다르게 보일 수 있습니다.

작성자는 aspect value를 동일한 내용이지만 font-size-adjust 속성이 다른 span을 비교하여 계산할 수 있습니다. 같은 font-size를 사용하면, 해당 폰트에 맞는 font-size-adjust 값을 지정할 때 두 span의 박스가 일치합니다.

테두리가 있는 두 span을 사용하여 폰트의 aspect value를 측정합니다. 두 span 모두 font-size는 같고, 오른쪽 span만 font-size-adjust가 지정되어 있습니다. 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보다 작습니다. 값을 조정해 두 박스가 맞춰질 때까지 시도해보세요.

참고: 지정된 메트릭이 @font-face에서 예를 들어 size-adjust로 오버라이드된 경우, 오버라이드된 메트릭이 font-size-adjust 계산에 사용됩니다. 따라서 font-size-adjust와 size-adjust를 함께 적용하면 size-adjust가 별도의 효과가 없는 것처럼 보일 수 있습니다.

3. 폰트 리소스

3.1. @font-face 규칙

참고: 디스크립터는 요소별이 아니라 폰트별로 적용됩니다. 하나의 요소 안에서도 여러 폰트가 사용될 수 있습니다. 예를 들어 첫 번째 사용 가능한 폰트가 지원하지 않는 문자가 있을 때 적용됩니다.

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

3.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-patch | incremental-range | incremental-auto ]

<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 디스크립터 값은 파싱 오류가 됩니다.

이러한 파싱 규칙은 특정 폰트 기술이나 포맷을 지원하지 않는 사용자 에이전트에서도 폰트의 점진적 폴백이 가능하게 합니다.

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

3.3. 폰트 속성 디스크립터: font-size

auto

폰트가 모든 폰트 크기에 매칭됩니다.

<number>

<number> 하나만 주어지면 폰트는 해당 크기에만 매칭됩니다. <number> 두 개가 주어지면, 해당 범위의 폰트 크기에 매칭됩니다.

3.4. 글리프 크기 배수: size-adjust 디스크립터

size-adjust 디스크립터는 해당 폰트의 글리프 윤곽선 및 메트릭에 곱해지는 배수를 정의하여, 작성자가 동일한 font-size로 렌더링할 때 폰트 디자인이 조화롭게 보이도록 할 수 있습니다.

이 폰트에 연결된 모든 메트릭(글리프 advance, 기준선 테이블, @font-face 디스크립터로 제공된 오버라이드 등)은 주어진 백분율만큼 스케일되며, 렌더링된 글리프 이미지도 마찬가지입니다. 따라서, 해당 폰트에서 파생된 값들(예: ex, ch 단위 또는 from-font 값의 text-decoration-thickness 등)도 영향을 받습니다. 단, 계산된 font-size(및 그로부터 파생되는 em 단위, text-underline-offset 등의 백분율 등)는 영향을 받지 않습니다.

참고: size-adjust 디스크립터는 font-size-adjust 속성과 유사하게 동작합니다. 이는 본질적으로 ex-height를 맞추어 폰트마다 조정을 계산하지만, 마찬가지로 계산된 font-size에는 영향을 주지 않습니다.

3.5. 줄 높이 폰트 메트릭 오버라이드: ascent-override, descent-override, line-gap-override 디스크립터

ascent-override, descent-override, line-gap-override 디스크립터는 각각 폰트의 ascent 메트릭, descent 메트릭, line gap 메트릭을 지정합니다. 첫 번째 값은 x축, 두 번째 값은 y축 값(생략 시 기본값은 normal)을 의미합니다.

normal

해당 메트릭 값은 폰트에서 통상적으로 얻어지며, 이 디스크립터가 @font-face 블록에 없다고 가정한 것과 같습니다.

참고: 일부 폰트 포맷에는 이러한 메트릭의 여러 소스가 있을 수 있으므로, UA/플랫폼에 따라 텍스트 레이아웃이 달라질 수 있습니다.

<percentage>

해당 메트릭이 주어진 백분율 × 사용된 폰트 크기로 대체됩니다.

font-size-adjust 속성은 size-adjust 디스크립터 적용 후 적용됩니다.

참고: font-size-adjust가 size-adjust 다음에 적용되면 size-adjust가 효과가 없는 것처럼 보일 수 있습니다.

참고: 이 디스크립터들은 font-size, line-height, 폰트 상대 길이(font-relative lengths)의 계산(computed)에는 영향을 주지 않습니다. 그러나 line-height: normal의 동작이나, 인라인 레벨(inline-level) 콘텐츠의 기준선 정렬 등에 영향을 줄 수 있습니다.

참고: 이러한 메트릭은 block 축에만 적용되므로, y축 값은 수직 활자 조판(typesetting upright)에서만 사용됩니다.

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

@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%;
  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"

3.6. 위첨자/아래첨자 메트릭 오버라이드: superscript-position-override, subscript-position-override, superscript-size-override, subscript-size-override 디스크립터

superscript-position-override, subscript-position-override, superscript-size-override, subscript-size-override 디스크립터는 각각 폰트의 위첨자 오프셋, 아래첨자 오프셋, 위첨자 크기, 아래첨자 크기 메트릭을 지정하며, font-variant-position에 의해 글리프를 합성할 때 사용됩니다. 첫 번째 값은 x축, 두 번째 값은 y축 값(생략 시 첫 번째 값을 사용)입니다.

normal

UA가 폰트 또는 휴리스틱으로부터 어떤 메트릭 값을 사용할지 결정합니다.

from-font

해당되는 폰트 데이터의 메트릭이 있으면 이를 사용합니다. (메트릭이 없으면 normal과 동일하게 처리됩니다.)

<percentage>

해당 메트릭을 주어진 백분율 × 사용된 폰트 크기로 대체합니다.

참고: 이 메트릭들은 block 축에만 적용되므로, y축 값은 수직 활자 조판(vertical typographic modes)에서만 사용됩니다.

4. 폰트 기능 속성

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

5. 폰트 기능 및 변형 해상도

6. 폰트 변형 속성

6.1. 광학 사이징 제어: font-optical-sizing 속성

7. 보안 고려사항

이 명세에 대해 새로운 보안 관련 고려사항은 보고되지 않았습니다.

8. 개인정보 고려사항

이 명세에 대해 새로운 개인정보 관련 고려사항은 보고되지 않았습니다.

9. 감사의 글

먼저, 편집자들은 이 모듈의 이전 레벨에 기여한 모든 분들께 감사드립니다.

또한, 이 Level 5의 개선에 기여해주신 PDFReactor의 DerKoun, Google의 Xiaocheng Hu, 그리고 Mozilla의 Jonathan Kew 에게도 감사를 표합니다.

10. 변경사항

10.1. 2021년 12월 21일 WD 이후 변경사항 (WD of 21 December 2021)

• font-size 디스크립터의 초기값 수정
• font-size-adjust number의 문법 범위 설정
• local()의 문법을 font-face-name 대신 family-name 사용으로 변경
• 최신 incremental font 다운로드 키워드로 업데이트
• 일관성을 위해 feature-*를 복수형으로 변경 (CSS Conditional 5, 11.1 Font tech와 일치)
• 범위 표기에서 infinity를 ∞로 통일
• tech() 함수 오타 수정

10.2. 2021년 7월 29일 WD 이후 변경사항 (WD of 2021-07-29)

• technology를 tech로 이름 변경
• Security와 Privacy를 별도 섹션으로 분리
• font-technology 문법 수정
• src 디스크립터 파싱 섹션을 CSS Fonts 4에서 복사

10.3. 2021년 6월 29일 FPWD 이후 변경사항 (FPWD of 2021-06-29)

• 경고 문구 삭제
• incremental font 기술 지원 추가