Catalina는 macOS에 새로운 통합 가변 시스템 글꼴을 제공합니다.
CSS Fonts 모듈 레벨 4 사양의 'system-ui' 섹션은 개발자가 사이트와 앱에서 터보 최적화 및 현지화된 초대형 고품질 기본 운영체제 글꼴을 바로 사용할 수 있도록 하는 system-ui 글꼴 키워드를 정의합니다.
body {
font-family: system-ui;
}
이 서체 선택은 '이 사용자의 현재 언어에 기본 시스템 글꼴을 사용'하는 것과 유사합니다.
macOS에서 system-ui 글꼴은 디자인팀이 심사 및 테스트한 후 최근에 업그레이드한 San Francisco입니다. 먼저 Ctalina의 새롭고 흥미로운 가변 글꼴 기능을 살펴본 다음 몇 가지 버그와 Chromium 엔지니어의 해결 방법을 다루겠습니다.
이 게시물은 개발자가 가변 글꼴에 이미 익숙하다고 가정합니다. 그렇지 않은 경우 웹의 가변 글꼴 소개 및 아래 동영상을 확인하세요.
브라우저 호환성
작성 시점을 기준으로 system-ui는 Chromium (56 이상), Edge (79 이후), Safari (11 이후) 및 Firefox (43 이상)에서 지원을 제공하지만 -apple-system 키워드를 사용합니다. 업데이트 사항은 가변 글꼴을 사용할 수 있나요?를 참고하세요.
새로운 힘
Catalina가 시스템 글꼴에 적용한 새로운 기능은 이제 Chromium 83부터 웹 개발자에게 제공됩니다. 이제 system-ui 글꼴에 광학 크기 조정과 2가지 고유한 두께 조정 등 더 다양한 설정이 있습니다.
h1 {
font-family: system-ui;
font-weight: 700;
font-variation-settings:
'wght' 750
;
}
h1 {
font-family: system-ui;
font-weight: 700;
font-variation-settings:
'wght' 750,
'opsz' 20,
'GRAD' 400,
'YAXS' 400
;
}
Mojave에서 system-ui는 wght 설정만 있는 가변 글꼴입니다. Catalina의 system-ui은 wght, opsz, GRAD, YAXS 설정이 포함된 가변 글꼴입니다.
디자인을 점진적으로 개선할 수 있는 것 같네요. 원한다면 시스템 글꼴의 섬세함까지도 자세히 살펴보세요.
wght
0~900의 글꼴 두께가 허용되며 모든 문자에 동일하게 적용됩니다.
/* 0-900 */
font-variation-settings: 'wght' 750;
opsz
광학 크기 조정은 커닝 또는 문자 간격과 비슷하지만, 간격은 수학이 아닌 사람의 눈으로 계산됩니다. 19 이하는 값은 텍스트 및 본문 문구 간격을 대상으로 하며 20 이상은 표시 헤더와 제목의 간격을 조절하는 데 사용됩니다.
/* 19 or 20 */
font-variation-settings: 'opsz' 20;
GRAD
가중치와 비슷하지만 가로 간격에 접촉하지 않습니다. 400에서 1000 사이의 값을 허용합니다.
/* 400-1000 */
font-variation-settings: 'GRAD' 500;
YAXS
글리프를 수직으로 늘립니다. 400에서 1000 사이의 값을 허용합니다.
/* 400-1000 */
font-variation-settings: 'YAXS' 500;
옵션 조합
몇 줄의 CSS로 글꼴 설정을 원하는 굵게 표시하거나 다른 흥미로운 조합을 시험해 볼 수 있습니다.
font-weight: 700;
font-weight: bold;
font-variation-settings: 'wght' 750, 'YAXS' 600, 'GRAD' 500, 'opsz' 20;
macOS에서 Chromium을 사용하는 사용자는 750으로 업그레이드된 맞춤형 750 무게를 재밌게 조절할 수 있습니다. 👍
놀이터
아래 Glitch에서 Remix to Edit(수정할 리믹스)를 클릭하여 Glitch의 수정 가능한 사본을 받은 후 새 font-variation-settings 옵션을 수정하여 글꼴에 미치는 영향을 확인하세요. 이 Glitch는 macOS Catalina 기기를 사용하는 경우에만 작동한다는 점을 기억하세요.
macOS 10.15에서는 시스템 글꼴에 새로운 기능이 추가되었으며, macOS 10.15에서는 까다로운 system-ui 버그가 Chromium 버그 추적기에 기록되었습니다. 관련이 있는지 궁금합니다.
부록: system-ui 회귀
이 사례는 #1005969라는 다른 버그로 시작됩니다. macOS 10.15에서는 system-ui 글꼴 간격이 좁고 꽉 차 있어 보였기 때문에 이 문제가 보고되었습니다.
배경
macOS 10.14에서 크기를 늘리거나 줄일 때 단락이나 헤더가 다른 모양의 글꼴에 '맞춰'지는 것을 눈치채신 적 있나요?
Mojave (macOS 10.14)에서는 system-ui 글꼴이 대상 글꼴 크기에 따라 두 글꼴 간에 전환되었습니다. 텍스트가 20px 아래에 있으면 macOS는 'San Francisco Text'를 사용했습니다. 텍스트가 20px 이상인 경우 macOS에서는 'San Francisco Display'를 사용했습니다. 광학 크기 조정은 두 개의 개별 글꼴로 정적으로 구축되었습니다.
Catalina (macOS 10.15)는 샌프란시스코에 사용할 새로운 통합 가변 글꼴을 출시했습니다. 더 이상 '텍스트'와 '디스플레이'를 관리할 필요가 없습니다. 또한 앞서 설명한 새로운 대안 설정 opsz이 추가되었습니다.
h1 {
font-variation-settings: 'opsz' 20;
}
안타깝게도 새로운 Catalina 글꼴의 기본 opsz 값은 20이며 Chromium 엔지니어는 시스템 글꼴에 opsz를 적용할 준비가 되어 있지 않았습니다. 이로 인해 작은 크기가 너무 좁아졌습니다.
이 문제를 해결하려면 Chromium에서 시스템 글꼴에 opsz을(를) 올바르게 적용해야 했습니다. 이 문제로 문제 #1005969가 해결되었습니다. 승리! 아니면...?
아직 완료되지 않음
그래서 좀 더 까다로워졌습니다. Chromium에서 opsz을(를) 적용했지만 뭔가 착오가 있었던 것 같네요. Mac의 시스템 글꼴에는 가로 간격을 조정하는 trak라는 글꼴 표가 추가로 있습니다. 수정 작업을 진행하는 동안 Chromium 엔지니어는 macOS에서 CTFontRef 객체에서 가로 측정항목을 검색할 때 trak 측정항목이 이미 측정항목 결과에 반영되고 있음을 발견했습니다. Chromium의 셰이핑 라이브러리 HarfBuzz에는 trak 값이 아직 반영되지 않은 측정항목이 필요합니다.
내부적으로 Skia (같은 이름의 서체가 아닌 그래픽 라이브러리)는 CoreGraphics의 CGFontRef 클래스와 CoreText의 CTFontRef 클래스를 모두 사용합니다. 이러한 객체 간에 필요한 내부 변환 (이전 버전과의 호환성을 유지하고 두 클래스에서 필요한 API에 액세스하는 데 사용됨)으로 인해 Skia는 특정 상황에서 가중치 정보를 잃고 굵은 글꼴이 작동하지 않습니다. 이 문제는 문제 #1057654에서 추적되었습니다.
Skia에서도 macOS 10.11을 지원해야 합니다. Chromium에서는 여전히 macOS 10.11을 지원합니다. 10.11에서는 'San Francisco Text'와 'San Francisco Display' 글꼴이 가변 글꼴도 아니었습니다. 오히려 각 가중치는 사용 가능한 모든 가중치를 위한 별도의 글꼴 모음이었습니다. 어떤 시점에서 글리프 ID가 서로 동기화되지 않았습니다. 따라서 Skia가 'San Francisco Text'를 사용하여 텍스트 도형을 그릴 수 있는 글리프로 변환 (텍스트를 그릴 수 있는 글리프로 변환)했다면 'San Francisco Display'로 그리면 의미가 없고 그 반대의 경우도 마찬가지입니다. 그리고 Skia가 다른 크기의 macOS를 요청하더라도 macOS는 다른 크기로 전환될 수 있습니다. 항상 글꼴 중 하나를 사용하고 확장만 할 수 있어야 하지만 (더 큰 크기를 요청하는 대신 매트릭스를 사용하여 확대) CoreText에서 Sbix (색상 그림 이모티콘) 글리프를 위로 (아래만) 확대/축소하지 않는 문제가 있습니다. 그것보다 조금 더 복잡합니다. CoreText는 실제로 매트릭스 적용 후 세로 범위를 제한하는 것으로 보입니다. 이는 45도 각도에서 그림 이모티콘을 그릴 수 없는 것과 관련이 있는 것으로 보입니다. 그림 이모티콘이 크게 표시되도록 하려면 글꼴의 사본을 만들어 큰 버전을 가져와야 합니다.
따라서 동일한 기본 글꼴 데이터를 사용하면서 내부적으로 CTFont 객체의 사본을 만들기 위해 Chromium은 CGFont를 CTFont에서 가져온 다음 CGFont에서 새 CTFont를 만들었습니다 (CGFont 객체는 크기와 무관하며 매직 전환은 CoreText 수준에서 발생함). 10.154까지는 제대로 작동했습니다. 10.15에서 이 왕복 이동에서 너무 많은 정보가 손실되어 가중치 문제가 발생했습니다. Flutter는 가중치 문제를 발견했으며, CoreText의 문서화되지 않은 오래된 속성을 사용하여 광학 크기를 직접 제어하면서 원래 CTFont에서 직접 새 CTFont를 만들도록 크기 조절을 위한 대체 수정사항이 적용되었습니다. 이렇게 하면 10.11에서 계속 작동하며 광학 크기를 명시적으로 기본값으로 설정하는 등의 다른 문제를 해결합니다.
그러나 이렇게 하면 글꼴의 CoreText '매직'이 더 많이 유지됩니다. 그중 하나는 trak 테이블 (Chromium이 이미 문서화되지 않은 또 다른 속성을 통해 억제하려고 했던 애플리케이션)이 아닌 다른 방식으로 글리프의 발전을 여전히 조정하는 것으로 보입니다.
CGFont에서는 이러한 '마법'을 전혀 수행하지 않으므로 Chromium에서 CTFont을(를) 할인하여 발전을 이루는 데 사용할 수 있을까요?CGFont 불행히도 이 방법은 작동하지 않습니다. CoreText가 다른 방식으로도 글꼴을 처리하는 것으로 알려져 있기 때문입니다. 예를 들어, 작은 그림 이모티콘이 사용자가 실제로 요청한 것보다 약간 크게 만들어지게 됩니다 (크기를 약간 확대함). CGFont에서는 이에 대해 알지 못하므로 Sbix 기반 그림 이모티콘이 서로 너무 가까이 있게 됩니다. 동일한 크기로 측정하지만 CoreText에서는 그림 이모티콘을 어느 정도 더 크게 표시할 수 있기 때문입니다. Chromium은 CTFont의 발전을 바라지만, 추적하지 않고, 그리고 되도록이면 다른 불편한 일도 일어나지 않기를 원합니다.
간격 문제를 수정하려면 일련의 상호 연결된 Blink 및 Skia 수정사항이 필요했기 때문에 Chromium 엔지니어는 문제를 해결하기 위해 '되돌려야' 할 수 없었습니다. 또한 Chromium 엔지니어들은 Skia에서 글꼴 관련 코드 경로를 변경하기 위해 다른 빌드 플래그를 사용해 보았고, 그 결과 굵은 글꼴 문제는 해결되었지만 공백 문제는 해결되었습니다.
해결 방법
결국 Chromium은 이 두 가지 문제를 모두 수정하고자 했습니다. Chromium은 이제 HarfBuzz 내장 글꼴 OpenType 글꼴 측정항목 함수를 사용하여 시스템 글꼴의 글꼴 테이블에 있는 바이너리 데이터에서 직접 가로 측정항목을 검색합니다. 이를 사용하여 글꼴에 trak 테이블이 있을 때 Chromium은 CoreText 및 Skia를 회피합니다 (그림 이모티콘 글꼴인 경우는 제외).
그때까지는 Skia 문제 #10123을 통해 Skia에서 이 문제를 완전히 해결한 후 HarfBuzz를 거치는 현재 수정사항 대신 Skia를 사용하여 시스템 글꼴 측정항목을 검색할 수 있습니다.