Yazı tipi ekranı ile Yazı Tipi Performansını Denetleme

Bir web yazı tipinin yüklenirken nasıl davranacağına karar vermek önemli bir performans ayarlama tekniği olabilir. @font-face için yeni yazı tipi görüntüleme tanımlayıcısı, geliştiricilerin yüklenme sürelerine bağlı olarak web yazı tiplerinin nasıl oluşturulacağına (veya yedekleneceğine) karar vermesine olanak tanır.

Yazı tipi oluşturmada bugünkü farklılıklar

Web Fonts, geliştiricilere projelerine zengin yazı tipi kullanma olanağı verir. Bununla birlikte, kullanıcının bir yazı tipine sahip olmaması durumunda tarayıcının bu yazıyı indirmeye biraz zaman ayırması gerekir. Ağlar kesintili olabileceğinden bu indirme süresi kullanıcı deneyimini olumsuz etkileyebilir. Sonuçta, görüntülenmesi çok uzun sürerse kimse metninizin ne kadar güzel olacağını umursamaz.

Çoğu tarayıcı, yazı tipinin yavaş indirilmesi riskini azaltmak için bir zaman aşımı uygular. Bu sürenin sonunda yedek yazı tipi kullanılır. Bu yararlı bir tekniktir, ancak maalesef tarayıcılar gerçek uygulama açısından farklılık göstermektedir.

Tarayıcı Engelleme Fallback Değiştir
Chrome 35 veya üst sürümleri 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ı olur, bu süre dolduktan sonra metin yedek yazı tipiyle gösterilir. Yazı tipi indirilebiliyorsa sonunda bir değişiklik gerçekleşir ve metin, istenen yazı tipiyle yeniden oluşturulur.
  • Internet Explorer'ın sıfır saniye zaman aşımı vardır ve bu süre içinde metin hemen oluşturulur. İstenen yazı tipi henüz mevcut değilse bir yedek kullanılır ve istenen yazı tipi kullanılabilir olduğunda metin daha sonra yeniden oluşturulur.
  • Safari'de zaman aşımı davranışı (veya en azından temel ağ zaman aşımı süresi dışında hiçbir şey) yoktur.

Daha da kötüsü, geliştiriciler bu kuralların uygulamalarını nasıl etkileyeceğine karar verme konusunda sınırlı kontrole sahiptir. Performans odaklı geliştiriciler, yedek yazı tipi kullanan daha hızlı bir ilk deneyime sahip olmayı tercih edebilir ve sadece indirme fırsatı elde ettikten sonraki ziyaretlerinde daha güzel web yazı tipinden yararlanabilirler. Font Upload API gibi araçları kullanarak, varsayılan tarayıcı davranışlarından bazılarını geçersiz kılabilir ve performans artışları elde edebilirsiniz. Ancak bunun maliyeti, küçük olmayan miktarlarda JavaScript kodu yazma zorunluluğunu da beraberinde getirir. Bu kodların, sayfaya satır içine alınması veya harici bir dosyadan istenmesi gerekir ve ek HTTP gecikmesi olur.

CSS Çalışma Grubu, bu durumun düzeltilmesine yardımcı olmak için yeni bir @font-face tanımlayıcısı (font-display) ve indirilebilir bir yazı tipinin tamamen yüklenmeden önce nasıl görüneceğini denetlemek için buna karşılık gelen bir özellik önerdi.

Yazı tipi indirme zaman çizelgeleri

Bazı tarayıcıların günümüzde uyguladığı mevcut yazı tipi zaman aşımı davranışlarına benzer şekilde, font-display bir yazı tipi indirmesinin ömrünü üç temel döneme ayırır.

  1. İlk dönem, yazı tipi engelleme dönemidir. Bu süre zarfında yazı tipi yüzü yüklenmezse bunu kullanmaya çalışan tüm öğeler görünmez bir yedek yazı tipi yüzüyle oluşturulmalıdır. Yazı tipi yüzü, engelleme süresi boyunca başarıyla yüklenirse yazı tipi yüzü normal şekilde kullanılır.
  2. 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üzü yüklenmezse bunu kullanmaya çalışan tüm öğeler yedek yazı tipi yüzüyle oluşturulmalıdır. Yazı tipi yüzü, değiştirme süresinde başarıyla yüklenirse yazı tipi yüzü normal şekilde kullanılır.
  3. Yazı tipi hata dönemi, yazı tipi değiştirme döneminden hemen sonra gerçekleşir. Bu süre başladığında yazı tipi kadranı henüz yüklenmediyse başarısız yükleme olarak işaretlenir ve normal yazı tipi yedeğine neden olur. Aksi halde, yazı tipi normal olarak kullanılır.

Bu dönemleri anlamak, yazı tipinizin indirilip indirilmediğine veya ne zaman indirildiğine bağlı olarak nasıl oluşturulması gerektiğine karar vermek için font-display özelliğini kullanabileceğiniz anlamına gelir.

Sizin için en uygun yazı tipi ekranı hangisi?

font-display açıklayıcıyla çalışmak için @font-face kuyrukları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 auto | block | swap | fallback | optional değer aralığını desteklemektedir.

otomatik

auto seçeneği, kullanıcı aracısının kullandığı yazı tipi görüntüleme stratejisini kullanır. Çoğu tarayıcının şu anda engelleme benzeri bir varsayılan strateji vardır.

müdahale

block, yazı tipi yüzüne kısa bir blok süresi (çoğu durumda 3 sn. önerilir) ve sonsuz bir değiştirme süresi verir. Diğer bir deyişle, yazı tipi yüklü değilse tarayıcı ilk başta "görünmez" metin çizer, ancak yüklenir yüklenmez yazı tipi yüzünü değiştirir. Bunu yapmak için tarayıcı, seçilen yazı tipine benzer metriklere sahip, ancak tüm gliflerde "mürekkep" içermeyen anonim bir yazı tipi kadranı 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.

değiştir

değiştir, yazı tipi yüzüne sıfır saniyelik bir blok dönemi ve sonsuz bir değiştirme süresi verir. Bu, yazı tipi yüzü yüklü değilse tarayıcının metni bir yedek aracılığıyla hemen tasarladığı, ancak yüklenir yüklenmez yazı tipini değiştirdiği anlamına gelir. Engelleme değerine benzer şekilde, bu değer de yalnızca belirli bir yazı tipindeki metin, sayfa için önemli olduğunda kullanılmalıdır. Ancak herhangi bir yazı tipinde oluşturma işlemi yine de doğru mesajı alır. Bir şirketin adını makul bir yedek kullanarak göstermek mesajın iletilmesini sağladığından, logo metni değiştirme için iyi bir adaydır. Ancak en sonunda resmi yazı tipini kullanmanız gerekir.

fallback

fallback, yazı tipi yüzünün son derece kısa bir blok süresi (çoğu durumda 100 ms veya daha kısa olması önerilir) ve kısa bir değiştirme süresi (çoğu durumda üç saniye önerilir) verir. Başka bir deyişle, yazı tipi yüklenmezse ilk başta bir yedek ile oluşturulur, ancak yazı tipi yüklenir yüklenmez değiştirilir. Bununla birlikte, çok fazla zaman geçerse yedek, sayfanın kullanım süresinin geri kalanında kullanılır. Yedek, kullanıcının bir an önce okumaya başlamasını istediğiniz ve yeni bir yazı tipi yüklenirken metni kaydırarak kullanıcı deneyimini rahatsız etmek istemediğiniz gövde metni gibi öğeler için iyi bir adaydır.

isteğe bağlı

isteğe bağlı, yazı tipi yüzünün son derece kısa bir blok süresi (çoğu durumda 100 ms veya daha kısa olması önerilir) ve sıfır saniye değiştirme süresi verir. Yedek'e benzer şekilde, indirilen yazı tipi daha "faydalı" ise ancak deneyim için kritik önem taşımadığında bu iyi bir seçimdir. optional değer, yazı tipi indirme işleminin başlatılıp başlatılmayacağına karar vermekle ilgili seçimi tarayıcıya bırakır. Kullanıcı için en uygun olduğuna inandığı değere bağlı olarak, yazı tipi indirme işlemini başlatmamayı veya düşük öncelikli olarak yapabilir. Bu, kullanıcının bağlantının zayıf olduğu ve bir yazı tipini aşağı çekmenin kaynakları en iyi şekilde kullanmadığı durumlarda faydalı olabilir.

Tarayıcı desteği

font-display şu anda masaüstü Chrome 49 sürümünde Deneysel Web Platformu Özellikleri bayrağının arkasındadır ve Android için Opera ve Opera'da kullanıma sunulacaktır.

Demo

font-display için bir deneme yapmak için örneği inceleyin. Performans odaklı geliştiriciler için bu araç, araç kemerinizde daha da kullanışlı bir araç olabilir.