WOFF2

WOFF2, Google tarafından geliştirildi ve Mart 2018'de W3C Tavsiyesi oldu. Orijinal WOFF kavramını temel alır, ancak zlib sıkıştırmasını Brotli ile değiştirir — yine Google tarafından geliştirilen ve önemli ölçüde daha iyi sıkıştırma oranları elde eden bir sıkıştırma algoritması.

Ancak WOFF2, yalnızca "daha iyi sıkıştırmalı WOFF" değildir. Sıkıştırmadan önce font verilerini yeniden yapılandıran ve çok daha sıkıştırılabilir hale getiren bir ön işleme dönüşümü sunar. TrueType konturları için bu, gliph koordinatlarına tahminsel kodlama uygulamak anlamına gelir — her nokta, mutlak koordinat yerine öngörülen bir değerden delta olarak kodlanır. Sonuç, Brotli'nin agresif biçimde sıkıştırabileceği çok daha fazla tekrar içeren bir bayt akışıdır.

Bu iki adımlı yaklaşım — alana özgü ön işleme ve ardından genel amaçlı sıkıştırma — WOFF2'nin tüm formatlar arasında sürekli olarak en küçük font dosyalarını üretmesinin nedenidir.

WOFF2, kaynak font verilerine iki aşamalı bir sıkıştırma hattı uygular:

• Aşama 1: Ön işleme dönüşümü — font'a özgü dönüşümler, sıkıştırılabilirliği en üst düzeye çıkarmak için veriyi yeniden yapılandırır. TrueType gliph konturları için koordinatların tahminsel kodlaması kullanılır — her nokta öngörülen konumdan fark olarak kodlanır, bu da çok daha küçük sayılar üretir. Benzer dönüşümler diğer font tablolarına da uygulanır.
• Aşama 2: Brotli sıkıştırması — ön işlenmiş veriler, LZ77 kayan pencere sıkıştırması ile Huffman kodlamasını ve yerleşik statik sözlüğü birleştiren Brotli ile sıkıştırılır. Brotli, tipik font verileri üzerinde zlib'den %20-30 daha iyi sıkıştırma sağlar.

Tarayıcı tarafında süreç tersine döner: Brotli açma işleminin ardından özgün font tablolarını yeniden oluşturmak için ters dönüşümler yapılır. Ek adıma rağmen WOFF2 açma işlemi WOFF1'den aslında daha hızlıdır — Brotli hızlı kod çözme için tasarlanmıştır ve daha küçük dosya ağ üzerinden daha hızlı aktarılır.

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

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

Yalnızca tek bir src girişi — sadece WOFF2 — listelediğimize dikkat edin. %97+ tarayıcı kapsamıyla birçok modern proje artık yedek bir format gerektirmiyor. font-display: swap yönergesi, ikon fontu yüklenirken tarayıcıya yedek fontla metni hemen göstermesini söyler ve görünmez metni önler.

WOFF2, tüm modern tarayıcılarda geniş desteğe sahiptir. Tek önemli boşluk, Microsoft tarafından Haziran 2022'de kullanımdan kaldırılan Internet Explorer'dır.

Birleşik küresel kapsam yaklaşık %97'dir. Kalan ~%3 neredeyse tamamıyla eski IE kurulumlarından ve çok eski mobil tarayıcılardan oluşur.

WOFF2'nin sıkıştırma avantajını göstermek için 200 gliph içeren bir ikon fontu için tipik dosya boyutları:

Tasarruf daha büyük ikon setlerinde katlanarak artar. 500 gliph'lik bir font TTF olarak 200 KB, WOFF olarak 120 KB ve WOFF2 olarak yalnızca 82 KB olabilir. Binlerce sayfa yüklemesinde bu kilobaytlar doğrudan daha hızlı boyama süreleri ve düşük bant genişliği maliyetlerine dönüşür.

Her zaman. WOFF2, herhangi bir web tabanlı ikon font dağıtımı için varsayılan format olmalıdır. En küçük dosyaları, en hızlı açmayı ve neredeyse evrensel tarayıcı desteğini sunar.

WOFF2 kullanmayacağınız tek senaryo, Internet Explorer'ı hedefliyorsanızdır — bu durumda yedek olarak WOFF ile eşleştirin:

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

Modern tarayıcılar WOFF2 dosyasını alır; IE 11 ise WOFF'a geçer. Herkes fontu alır, herkes sıkıştırılmış olarak alır.