WOFF2

WOFF2는 Google이 개발하여 2018년 3월 W3C 권고안이 되었습니다. 기존 WOFF 개념을 발전시켜 zlib 압축을 Brotli——역시 Google이 개발한 압축 알고리즘——로 교체하여 훨씬 나은 압축률을 달성합니다.

그러나 WOFF2는 단순히 "더 나은 압축의 WOFF"가 아닙니다. 압축 전에 폰트 데이터를 재구성하여 훨씬 더 압축하기 쉽게 만드는 전처리 변환을 도입합니다. TrueType 아웃라인의 경우 글리프 좌표에 예측 코딩을 적용합니다——각 점을 절대 좌표가 아닌 예측 값으로부터의 차이로 인코딩합니다. 결과는 Brotli가 공격적으로 압축할 수 있는 훨씬 더 중복된 바이트 스트림입니다.

도메인 특화 전처리에 범용 압축을 결합하는 이 두 단계 접근법이 WOFF2가 모든 형식 중에서 일관되게 가장 작은 폰트 파일을 생성하는 이유입니다.

WOFF2는 소스 폰트 데이터에 두 단계 압축 파이프라인을 적용합니다:

• 1단계: 전처리 변환——폰트 특화 변환이 데이터를 재구성하여 압축성을 극대화합니다. TrueType 글리프 아웃라인의 경우 좌표의 예측 코딩을 사용합니다——각 점은 예측 위치로부터의 차이로 인코딩되어 훨씬 더 작은 숫자를 생성합니다. 다른 폰트 테이블에도 유사한 변환이 적용됩니다.
• 2단계: Brotli 압축——전처리된 데이터를 Brotli로 압축합니다. Brotli는 LZ77 슬라이딩 윈도우 압축, 허프만 코딩, 내장 정적 딕셔너리를 결합하여 일반적인 폰트 데이터에서 zlib보다 20~30% 나은 압축을 달성합니다.

브라우저 측에서는 역과정이 일어납니다: Brotli 압축 해제 후 역변환으로 원본 폰트 테이블을 재구성합니다. 추가 단계에도 불구하고 WOFF2 압축 해제는 실제로 WOFF1보다 더 빠릅니다——Brotli는 빠른 디코딩을 위해 설계되었고, 더 작은 파일은 네트워크에서도 더 빠르게 전송됩니다.

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2');
  font-display: swap;
}

.icon { font-family: 'MyIcons'; }
.icon-home::before { content: '\E001'; }

단일 src——WOFF2만——을 나열하고 있음에 주목하세요. 97%+ 브라우저 커버리지로 많은 모던 프로젝트는 더 이상 폴백 형식이 필요하지 않습니다. font-display: swap 지시어는 아이콘 폰트가 로드되는 동안 브라우저가 폴백 폰트로 즉시 텍스트를 표시하도록 지시하여 텍스트가 보이지 않는 현상을 방지합니다.

WOFF2는 모든 모던 브라우저에서 폭넓은 지원을 누립니다. 유일한 중요한 공백은 2022년 6월 Microsoft에 의해 종료된 Internet Explorer입니다.

글로벌 총 커버리지는 약 97%입니다. 나머지 약 3%는 거의 전적으로 레거시 IE 설치와 매우 오래된 모바일 브라우저로 구성됩니다.

WOFF2의 압축 우위를 보여주기 위해 200개 글리프를 포함하는 아이콘 폰트의 일반적인 파일 크기입니다:

절감액은 더 큰 아이콘 세트에서 복리로 증가합니다. 500개 글리프 폰트는 TTF로 200 KB, WOFF로 120 KB, WOFF2로는 약 82 KB가 될 수 있습니다. 수천 번의 페이지 로드를 거치면 이 킬로바이트들이 직접 더 빠른 페인트 시간과 낮은 대역폭 비용으로 이어집니다.

항상. WOFF2는 웹 기반 아이콘 폰트 배포의 기본 형식이어야 합니다. 가장 작은 파일, 가장 빠른 압축 해제, 거의 보편적인 브라우저 지원을 제공합니다.

WOFF2를 사용하지 않는 유일한 시나리오는 Internet Explorer를 대상으로 하는 경우입니다——그 경우 WOFF를 폴백으로 함께 사용하세요:

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2'),
       url('icons.woff') format('woff');
  font-display: swap;
}

모던 브라우저는 WOFF2 파일을 가져가고, IE 11은 WOFF로 폴백합니다. 모든 사람이 폰트를 받고, 모든 사람이 압축된 버전을 받습니다.