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

Rob Dodson

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üklenmeleri için ne kadar süre gerektiğine bağlı olarak web yazı tiplerinin nasıl oluşturulacağına (veya yedekleneceklerine) karar vermelerine olanak tanır.

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

Web Yazı Tipleri, geliştiricilerin zengin yazı tiplerini projelerine dahil etmelerine olanak tanır. Kullanıcıda yazı karakteri yoksa tarayıcının bu dosyayı indirmek için biraz zaman ayırması gerekir. Ağlar kesintili olabileceğinden bu indirme süresinin, kullanıcı deneyimini olumsuz yönde etkileme olasılığı vardır. Sonuçta, görüntülenmesi olağanüstü bir zaman alacaksa metninizin ne kadar güzel olduğunu kimse ilgilendirmez.

Yazı tipi indirme işleminin yavaş olması riskinin bir kısmını azaltmak için çoğu tarayıcı, bir zaman aşımı uygular. Bu sürenin sonunda bir yedek yazı tipi kullanılır. Bu yararlı bir tekniktir ancak gerçek uygulama ne yazık ki tarayıcılar farklılık gösterir.

• Chrome ve Firefox'ta üç saniyelik bir zaman aşımı süresi vardır. Bu süre sonunda 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'da sıfır saniye zaman aşımı olduğundan metin anında oluşturulur. İstenen yazı tipi henüz mevcut değilse bir yedek kullanılır ve metin, daha sonra istenen yazı tipi kullanılabilir olduğunda yeniden oluşturulur.
• Safari'de zaman aşımı davranışı (veya en azından temel bir ağ zaman aşımının ötesinde hiçbir şey) yok.

Daha da kötüsü, geliştiriciler bu kuralların uygulamalarını nasıl etkileyeceğine karar verirken sınırlı kontrole sahiptir. Performans odaklı bir geliştirici, yedek yazı tipi kullanan daha hızlı bir ilk deneyime sahip olmayı ve sonraki ziyaretlerinde sadece indirme fırsatı bulduktan sonra daha güzel web yazı tipinden yararlanmayı tercih edebilir. Font Upload API gibi araçları kullanarak, varsayılan tarayıcı davranışlarının bazılarını geçersiz kılmak ve performans kazanımları elde etmek mümkün olabilir. Ancak bu işlem, önemsiz miktarlarda JavaScript kodu yazma zorunluluğundan kaynaklanır. Bu JavaScript'in daha sonra sayfaya satırlandırılması veya harici bir dosyadan istenmesi gerekir ve bu da ekstra HTTP gecikmesine neden olur.

Bu durumu çözmeye yardımcı olmak amacıyla CSS Çalışma Grubu, indirilebilir bir yazı tipinin tamamen yüklenmeden önce nasıl oluşturulduğunu kontrol etmek için yeni bir @font-face tanımlayıcısı (font-display) ve buna karşılık gelen bir özellik önerdi.

Yazı tipi indirme zaman çizelgeleri

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

1. İlk nokta, yazı tipi engelleme süresidir. Bu süre zarfında, yazı tipi yüzü yüklenmezse bunu kullanmaya çalışan öğelerin görünmez bir yedek yazı tipi yüzüyle oluşturulması gerekir. 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 süresi, yazı tipi engelleme süresinden hemen sonra gerçekleşir. Bu süre zarfında, yazı tipi yüzü yüklenmezse bunu kullanmaya çalışan öğeler, bunun yerine yedek yazı tipi yüzüyle oluşturulmalıdır. Yazı tipi yüzü, değiştirme süresi boyunca başarıyla yüklenirse yazı tipi yüzü normal şekilde kullanılır.
3. Yazı tipi hata süresi, yazı tipi değiştirme süresinden hemen sonra gerçekleşir. Bu süre başladığında yazı tipi yüzü henüz yüklenmezse normal yazı tipi yedeğine neden olacak şekilde başarısız yükleme olarak işaretlenir. Aksi takdirde, yazı tipi yüzü normal şekilde kullanılır.

Bu dönemleri anlamak, indirilip indirilmeyeceğine veya ne zaman indirileceğine bağlı olarak yazı tipinizin nasıl oluşturulacağına 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 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 auto | block | swap | fallback | optional değer aralığını desteklemektedir.

otomatik

auto, kullanıcı aracısının kullandığı yazı tipi görüntüleme stratejisini kullanır. Şu anda tarayıcıların çoğu engelleme işlemine benzer bir varsayılan stratejiye sahiptir.

engelle

block, yazı tipi yüzüne kısa bir engelleme 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üklenmezse tarayıcı önce "görünmez" metni çizer, ancak yüklenir yüklenmez yazı tipini değiştirir. Tarayıcı bunu yapmak için, seçilen yazı tipine benzer metriklerle ancak tüm karakterler "mürekkep" içermeyen anonim bir yazı tipi yüzü oluşturur. Bu değer yalnızca sayfanın kullanılabilir olması için belirli bir yazı tipinde metin oluşturulması gerekiyorsa kullanılmalıdır.

değiştir

swap seçeneği, yazı tipi yüzüne sıfır saniyelik engelleme süresi ve sonsuz değiştirme süresi verir. Bu, yazı tipi yüzü yüklenmezse tarayıcının metni hemen bir yedekle çizdiği, ancak yüklenir yüklenmez yazı tipini değiştireceği anlamına gelir. block değerine benzer şekilde, bu değer yalnızca belirli bir yazı tipinde metin oluşturma, sayfa için önemli olduğunda kullanılmalıdır. Ancak herhangi bir yazı tipinde oluşturma işlemi, doğru mesajı almaya devam eder. Bir şirket adının makul bir yedek kullanarak gösterilmesi mesajın iletilmesine neden olacağından logo metni değişim için iyi bir adaydır. Ancak sonunda resmi yazı tipini kullanırsınız.

fallback

fallback, yazı tipi yüzüne çok kısa bir engelleme 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) sağlar. Başka bir deyişle, yazı tipi kadranı yüklü değilse başlangıçta bir yedekle oluşturulur, ancak yazı tipi yüklenir yüklenmez değiştirilir. Bununla birlikte, çok fazla zaman geçerse yedek, sayfanın geri kalanında kullanılır. Yedek, kullanıcının mümkün olan en kısa sürede okumaya başlamasını istediğiniz ve yeni bir yazı tipi yüklenirken metni farklı bir yere taşıyarak 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ı tipine çok kısa bir engelleme süresi (çoğu durumda 100 ms veya daha kısa olması önerilir) ve sıfır saniyelik değiştirme süresi verir. Yedek çalışmaya benzer şekilde, indirilen yazı tipinin daha "olmazsa iyi" olduğu ancak deneyim açısından kritik olmadığı durumlarda iyi bir seçimdir. İsteğe bağlı değer, yazı tipi indirme işleminin başlatılıp başlatılmayacağına karar vermeyi tarayıcıya bırakır. Bu durumda, bunu yapmamayı seçebilir veya kullanıcı için en iyi olacağını düşündüğüne bağlı olarak düşük öncelikli bir işlem yapabilir. Bu, kullanıcının zayıf bir bağlantıya sahip olduğu durumlarda faydalı olabilir ve bir yazı tipini aşağı çekmek en iyi kaynak kullanımı olmayabilir.

Tarayıcı desteği

font-display, şu anda masaüstü Chrome 49'da Deneysel Web Platformu Özellikleri'nin arkasında ve Android için Opera ve Opera'da gönderim yapıyor.

Demo

Denemek için örneğe göz atın font-display. Performans odaklı geliştiriciler için bu, araç kemerlerinizde kullanabileceğiniz bir diğer yararlı araç olabilir.