Catalina에서는 macOS에 새로운 통합 가변 시스템 글꼴을 제공합니다.
CSS 글꼴 모듈 4단계 사양의 'system-ui' 섹션은 개발자가 사이트와 앱에서 바로 빌트인, 터보 최적화, 현지화, 초고화질, 다운로드 불필요, 기본 운영체제 글꼴을 사용할 수 있는 system-ui 글꼴 키워드를 정의합니다.
body {
font-family: system-ui;
}
이 서체 선택은 '이 사용자의 현재 언어에 맞는 기본 시스템 글꼴을 사용합니다.'와 비슷합니다.
macOS에서 system-ui 글꼴은 디자인팀에서 검토하고 테스트한 후 최근에 업그레이드한 샌프란시스코 글꼴입니다. 먼저 Catalina의 새로운 흥미로운 가변 글꼴 기능을 살펴본 다음 버그와 Chromium 엔지니어가 이를 해결한 방법을 살펴봅니다.
이 게시물에서는 개발자가 가변 글꼴에 이미 익숙하다고 가정합니다. 그렇지 않다면 웹의 가변 글꼴 소개와 아래 동영상을 확인하세요.
브라우저 호환성
이 글을 작성하는 시점에서 system-ui는 Chromium (56부터), Edge (79부터), Safari (11부터), Firefox (43부터)에서 -apple-system 키워드와 함께 지원됩니다. 업데이트는 가변 글꼴을 사용할 수 있나요?를 참고하세요.
새로운 힘
Catalina에서 시스템 글꼴에 추가한 새로운 기능을 Chromium 83부터 웹 개발자가 사용할 수 있습니다. 이제 system-ui 글꼴에 광학 크기 조정 및 두 가지 고유한 두께 조정 등 더 많은 변수 설정이 있습니다.
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 글꼴과 몇 가지 재미있는 다른 조정이 표시됩니다. 👍
놀이터
아래 Glitch에서 리믹스하여 수정하기를 클릭하여 수정 가능한 글리치 사본을 가져온 다음 새로운 font-variation-settings 옵션을 수정하여 글꼴에 미치는 영향을 확인하세요. 이 글리치는 macOS Catalina 기기를 사용하는 경우에만 작동합니다.
macOS 10.15에서는 시스템 글꼴에 새로운 기능이 추가되었으며, macOS 10.15에서는 Chromium 버그 추적기에 까다로운 system-ui 버그가 기록되었습니다. 인간 관계인지 궁금한 것 같아!?
부록: system-ui 회귀
이 스토리는 다른 버그인 #1005969로 시작합니다. system-ui 글꼴 간격이 좁고 답답해 보였기 때문에 macOS 10.15에서 이 문제가 신고되었습니다.
배경
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을 계속 지원하므로 macOS 10.11을 계속 지원해야 합니다. 10.11에서는 'San Francisco Text' 및 'San Francisco Display' 글꼴이 가변 글꼴이 아니었습니다. 오히려 각 글꼴은 사용 가능한 모든 두께에 대해 별도의 글꼴 모음입니다. 어느 시점에는 글리프 ID가 서로 동기화되지 않았습니다. 따라서 Skia가 'San Francisco Text'로 텍스트 셰이핑 (텍스트를 그릴 수 있는 글리프로 변환)을 수행한 경우 'San Francisco Display'로 그려지면 의미 없는 문자열이 되고 그 반대의 경우도 마찬가지입니다. Skia에서 다른 크기를 요청했더라도 macOS에서 다른 크기로 전환할 수 있습니다. 항상 글꼴 중 하나를 사용하고 크기를 조정할 수 있어야 합니다(더 큰 크기를 요청하는 대신 행렬을 사용하여 크기를 조정). 하지만 CoreText에는 sbix(색상 그림 이모티콘) 글꼴을 위로 조정하지 않고 아래로만 조정하는 문제가 있습니다. 그보다 조금 더 복잡합니다. CoreText가 실제로 매트릭스 적용 후 수직 범위를 제한하는 것 같습니다. 이는 이모티콘을 45도 각도로 그릴 수 없는 것과 관련이 있는 것으로 보입니다. 어떤 경우든 그림 이모티콘을 크게 표시하려면 글꼴 사본을 만들어 큰 버전을 만들어야 합니다.
따라서 동일한 기본 글꼴 데이터가 사용되도록 하면서 내부적으로 다양한 크기의 CTFont 객체 사본을 만들기 위해 Chromium은 CTFont에서 CGFont를 가져온 다음 CGFont에서 새 CTFont를 만들었습니다 (CGFont 객체는 크기에 독립적이며 매직 전환은 CoreText 수준에서 발생함). 10.154까지는 잘 작동했습니다. 10.15에서는 이 왕복 과정에서 너무 많은 정보가 손실되어 가중치 문제가 발생했습니다. Flutter에서 무게 문제를 발견했으며, 크기 조절을 위한 대체 수정사항이 적용되어 원래 CTFont에서 직접 새 CTFont를 만들고 CoreText의 오래되었지만 문서화되지 않은 속성을 사용하여 광학 크기를 직접 제어했습니다. 이렇게 하면 10.11에서 계속 작동하고 광학 크기를 기본값으로 명시적으로 설정하는 등의 다른 문제가 해결됩니다.
그러나 이렇게 하면 글꼴에서 CoreText '마법'이 더 많이 유지됩니다. 그중 하나는 여전히 trak 테이블 (Chromium이 이미 문서화되지 않은 다른 속성을 통해 억제하려고 시도한 애플리케이션) 이외의 방식으로 글리프 전진을 조정한다는 점입니다.
CGFont는 이러한 '마법'을 실행하지 않으므로 Chromium이 CTFont에서 CGFont를 가져와서 이를 사용하여 발전할 수 있을까요? 불행히도 이 방법은 작동하지 않습니다. CoreText가 다른 방식으로 글꼴을 어둡게 하는 것으로 알려져 있기 때문입니다. 예를 들어 작은 그림 이모티콘은 실제로 요청한 것보다 약간 더 크게 만듭니다 (크기를 약간 키움). CGFont는 이를 알지 못하므로 한 크기로 측정하지만 CoreText는 약간 더 크게 그리므로 sbix 기반 그림 이모티콘이 서로 너무 가까워집니다. Chromium은 CTFont의 발전을 원하지만 추적 없이, 그리고 다른 작업 없이 발전을 원합니다.
간격 문제를 해결하려면 서로 연결된 일련의 Blink 및 Skia 수정이 필요했기 때문에 Chromium 엔지니어는 문제를 해결하기 위해 '단순히 되돌릴' 수 없었습니다. Chromium 엔지니어는 Skia에서 글꼴 관련 코드 경로를 변경하기 위해 다른 빌드 플래그를 사용해 보았는데, 이로 인해 굵은 글꼴 문제가 해결되었지만 간격 문제가 다시 발생했습니다.
해결 방법
결국 Chromium은 두 가지 문제를 모두 해결하고자 했습니다. 이제 Chromium은 HarfBuzz 기본 제공 글꼴 OpenType 글꼴 측정항목 함수를 사용하여 시스템 글꼴 테이블의 바이너리 데이터에서 직접 가로 측정항목을 검색합니다. 이를 통해 Chromium은 글꼴에 trak 테이블이 있는 경우 (이모티콘 글꼴인 경우 제외) CoreText 및 Skia를 우회합니다.
그때까지는 Skia에서 이 문제를 완전히 수정하는 것을 추적하고, HarfBuzz를 거치는 현재 수정사항 대신 Skia를 사용하여 시스템 글꼴 측정항목을 가져오는 Skia 문제 #10123이 아직 있습니다.