Yüklenirken bir web yazı tipinin davranışına karar vermek önemli bir performans ayarlama tekniği olabilir. @font-face için yeni font-display tanımlayıcısı, geliştiricilerin web yazı tiplerinin nasıl oluşturulacağına (veya yedek yazı tipine geçileceğine) yükleme sürelerine göre karar vermesine olanak tanır.
Günümüzde yazı tipi oluşturmadaki farklılıklar
Web yazı tipleri, geliştiricilere projelerinde zengin yazı tipleri kullanma olanağı sunar. Bunun karşılığında, kullanıcının yazı tipi yoksa tarayıcının yazı tipini indirmek için biraz zaman harcaması gerekir. Ağlar kararsız olabileceğinden bu indirme süresi, kullanıcı deneyimini olumsuz yönde etkileyebilir. Sonuçta, metninizin görüntülenmesi çok uzun sürerse kimse metninizin ne kadar güzel olduğuna dikkat etmez.
Yavaş yazı tipi indirme riskinin bir kısmını azaltmak için çoğu tarayıcı, zaman aşımı uygular ve bu zaman aşımından sonra yedek yazı tipi kullanılır. Bu yararlı bir tekniktir ancak maalesef tarayıcılarda gerçek uygulama farklıdır.
| Tarayıcı | Zaman aşımı | Yedek | Değiştir |
|---|---|---|---|
| Chrome 35 ve sonraki sürümler | 3 saniye | Evet | Evet |
| Opera | 3 saniye | Evet | Evet |
| Firefox | 3 saniye | Evet | Evet |
| Internet Explorer | 0 saniye | Evet | Evet |
| Safari | Zaman aşımı yok | Yok | Yok |
- Chrome ve Firefox'ta üç saniyelik bir zaman aşımı vardır. Bu sürenin sonunda metin, yedek yazı tipiyle gösterilir. Yazı tipi indirilebilirse sonunda bir değişim gerçekleşir ve metin istenen yazı tipiyle yeniden oluşturulur.
- Internet Explorer'da, metnin hemen oluşturulmasına neden olan sıfır saniyelik bir zaman aşımı vardır. İstenen yazı tipi henüz kullanılamıyorsa yedek bir yazı tipi kullanılır ve istenen yazı tipi kullanıma sunulduğunda metin daha sonra yeniden oluşturulur.
- Safari'de zaman aşımı davranışı yoktur (veya en azından temel ağ zaman aşımı dışında bir şey yoktur).
Daha da kötüsü, geliştiricilerin bu kuralların uygulamalarını nasıl etkileyeceğine karar verme konusunda sınırlı kontrolleri vardır. Performans odaklı bir geliştirici, yedek yazı tipi kullanan daha hızlı bir ilk deneyim sunmayı tercih edebilir ve daha güzel web yazı tipini yalnızca indirme şansı bulduktan sonraki ziyaretlerde kullanabilir. Font Loading API gibi araçlar kullanılarak varsayılan tarayıcı davranışlarının bazılarını geçersiz kılabilir ve performans kazanabilirsiniz. Ancak bunun için önemli miktarda JavaScript yazmanız gerekir. Bu JavaScript daha sonra sayfaya yerleştirilmeli veya harici bir dosyadan istenmelidir. Bu da ek HTTP gecikmesine neden olur.
Bu durumu düzeltmek için CSS Çalışma Grubu, indirilebilir bir yazı tipinin tamamen yüklenmeden önce nasıl oluşturulacağını kontrol etmek üzere yeni bir @font-face tanımlayıcısı (font-display) ve ilgili bir özellik önerdi.
Yazı tipi indirme zaman çizelgeleri
font-display, bazı tarayıcıların günümüzde uyguladığı mevcut yazı tipi zaman aşımı davranışlarına benzer şekilde, bir yazı tipi indirme işleminin kullanım süresini üç ana döneme ayırır.
- İlk dönem yazı bloğu dönemidir. Bu süre zarfında yazı tipi yüklenmezse onu kullanmaya çalışan tüm öğeler bunun yerine görünmez yedek yazı tipiyle oluşturulmalıdır. Yazı tipi, engelleme süresi boyunca başarıyla yüklenirse normal şekilde kullanılır.
- Yazı tipi değiştirme dönemi, yazı tipi engelleme döneminden hemen sonra gerçekleşir. Bu süre zarfında yazı tipi yüklenmezse onu kullanmaya çalışan tüm öğeler, yedek yazı tipi ile oluşturulmalıdır. Yazı tipi, takas süresi boyunca başarıyla yüklenirse normal şekilde kullanılır.
- Yazı tipi hatası dönemi, yazı tipi değiştirme döneminden hemen sonra gerçekleşir. Bu süre başladığında yazı tipi henüz yüklenmemişse yükleme başarısız olarak işaretlenir ve normal yazı tipi yedeği kullanılır. Aksi takdirde yazı tipi normal şekilde kullanılır.
Bu dönemleri anlamak, indirilip indirilmediğine veya ne zaman indirildiğine bağlı olarak yazı tipinizin nasıl oluşturulacağına karar vermek için font-display kullanabileceğiniz anlamına gelir.
Sizin için hangi font-display uygun?
font-display tanımlayıcısıyla çalışmak için @font-face at-kurallarınıza ekleyin:
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
font-display şu anda aşağıdaki değer aralığını auto | block | swap | fallback | optional desteklemektedir.
otomatik
auto, kullanıcı aracısının kullandığı yazı tipi görüntüleme stratejisini kullanır. Çoğu tarayıcıda şu anda engelle'ye benzer bir varsayılan strateji vardır.
engelle
block, yazı tipine kısa bir engelleme süresi (çoğu durumda 3 saniye önerilir) ve sonsuz bir takas süresi verir. Diğer bir deyişle, yazı tipi yüklenmemişse tarayıcı ilk başta "görünmez" metin çizer ancak yazı tipi yüklendikten hemen sonra yazı tipi yüzünü değiştirir. Tarayıcı bunu yapmak için, seçilen yazı tipine benzer metriklere sahip ancak tüm karakterleri "mürekkep" içermeyen anonim bir yazı tipi yüzü oluşturur. Bu değer yalnızca sayfanın kullanılabilir olması için metnin belirli bir yazı tipinde oluşturulması gerekiyorsa kullanılmalıdır.
takas
swap, yazı tipine sıfır saniyelik bir engelleme süresi ve sonsuz bir takas süresi verir. Bu, yazı tipi yüklenmemişse tarayıcının metni hemen yedek bir yazı tipiyle çizdiği ancak yüklendikten sonra yazı tipini değiştirdiği anlamına gelir. Engelle'ye benzer şekilde, bu değer yalnızca metnin belirli bir yazı tipinde oluşturulmasının sayfa için önemli olduğu durumlarda kullanılmalıdır. Ancak metin herhangi bir yazı tipinde oluşturulsa bile doğru mesaj iletilir. Logo metni, değişim için iyi bir adaydır. Şirketin adını makul bir yedek kullanarak görüntülemek mesajı iletir ancak sonunda resmi yazı tipini kullanırsınız.
fallback
yedek, yazı tipine son derece küçük bir engelleme süresi (çoğu durumda 100 ms veya daha az önerilir) ve kısa bir takas süresi (çoğu durumda üç saniye önerilir) verir. Diğer bir deyişle, yazı tipi yüklenmemişse önce yedek yazı tipi ile oluşturulur ancak yüklendikten sonra yazı tipi değiştirilir. Ancak çok fazla zaman geçerse yedek, sayfanın kullanım süresinin geri kalanında kullanılır. Yedek, kullanıcının en kısa sürede okumaya başlamasını istediğiniz ve yeni bir yazı tipi yüklenirken metni değiştirerek deneyimini bölmek istemediğiniz gövde metni gibi öğeler için iyi bir seçenektir.
isteğe bağlı
isteğe bağlı, yazı tipine son derece küçük bir blok dönemi (çoğu durumda 100 ms veya daha az önerilir) ve sıfır saniyelik bir takas dönemi verir. Yedek'e benzer şekilde, indirilen yazı tipi "kullanılması iyi bir şey" olsa da deneyim için kritik değilse bu seçenek iyi bir seçimdir. İsteğe bağlı değer, yazı tipi indirme işlemini başlatıp başlatmama kararını tarayıcıya bırakır. Tarayıcı, kullanıcı için en iyisinin ne olduğuna bağlı olarak bu işlemi başlatmayı seçebilir veya düşük öncelikli olarak yapabilir. Bu, kullanıcının zayıf bir bağlantı kullandığı ve bir yazı tipini indirmenin kaynakları en iyi şekilde kullanmayabileceği durumlarda yararlı olabilir.
Tarayıcı desteği
font-display şu anda masaüstü Chrome 49'daki Deneysel Web Platformu Özellikleri işaretinin arkasındadır ve Opera ile Android için Opera'da kullanıma sunulmuştur.
Demo
font-display'yi denemek için örneğe göz atın. Performans odaklı geliştiriciler için araç çantanızdaki yararlı araçlardan biri olabilir.