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.
Tarayıcı | Engelleme | Fallback | 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ı 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.
- İ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.
- 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.
- 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.