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 ayarı tekniğidir. Bu makale için yeni yazı tipi görüntüleme tanımlayıcısı @font-face, geliştiricilerin web yazı tiplerinin nasıl oluşturulacağına (veya değiştirileceğine) karar vermesine olanak tanır. ne kadar sürede yüklendiğine bağlı olarak değişebilir.

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

Web Yazı Tipleri, geliştiricilerin zengin yazı tiplerini kullanarak kullanıcının halihazırda sahip olmadığı bir projede tarayıcının metni indirmek için biraz zaman alması gerekir. Çünkü ağlar güvenilir olmayabilir, bu indirme süresinin kullanıcının verilerini olumsuz yönde etkileme potansiyeli sahip olacaksınız. Sonuçta kimse metinlerinizin ne kadar güzel olduğunu görüntülenmesi aşırı zaman alır!

Yazı tipi indirme işleminin yavaş olması riskini azaltmak için çoğu tarayıcı, süresi dolmadan önce bir yedek yazı tipi kullanılır. Bu faydalı bir tekniktir ama Maalesef tarayıcılar asıl uygulama konusunda farklılık gösterir.

• Chrome ve Firefox'ta üç saniye zaman aşımıyla metin gösterilir kullanın. Yazı tipi indirilebiliyorsa sonunda gerçekleşir ve metin istenen yazı tipiyle yeniden oluşturulur.
• Internet Explorer'da sıfır saniye zaman aşımı olduğundan anında metin görüntülenir oluşturma. İstenen yazı tipi henüz kullanılamıyorsa bir yedek kullanılır ve metin, istenen yazı tipi daha sonra yeniden oluşturulur.
• Safari'de zaman aşımı davranışı yok (veya temel ağdan başka en azından hiçbir şey yok) zaman aşımı) ekleyebilirsiniz.

Daha da kötüsü, geliştiriciler bu ayarların nasıl olacağına karar verme konusunda sınırlı kontrole nasıl etkileyeceğine dair bir fikriniz var. Performans odaklı bir geliştirici, ve sadece yedek yazı tipi kullanan daha hızlı bir ilk deneyim daha güzel bir web yazı tipine geçtik. Font Workload API gibi araçları kullanarak bazı öğelerin geçersiz kılınması mümkün olabilir. performans artışları sağlıyor. Ancak bu, en yaygın önemsiz miktarlarda JavaScript yazma ihtiyacının maliyeti; veya harici bir dosyadan istenilen satır öğeleri için ek ücret alınır. HTTP gecikmesi.

Bu durumu çözmeye yardımcı olmak için CSS Çalışma Grubu yeni bir teklifte bulundu. @font-face tanımlayıcısı, font-display ve indirilebilir bir yazı tipinin tam olarak yüklenmeden önce nasıl oluşturulacağını kontrol eder.

Yazı tipi indirme zaman çizelgeleri

Bazı tarayıcıların uyguladığı mevcut yazı tipi zaman aşımı davranışlarına benzer Günümüzde font-display, bir yazı tipinin indirilme süresini üç ana segmente ayırıyor gerekir.

1. İlk nokta, yazı tipi engelleme süresidir. Bu süre zarfında yazı tipi yüzü yüklenmedi, bunu kullanmaya çalışan herhangi bir öğe bunun yerine oluşturulmalıdır görünmez bir yedek yazı tipi yüzüyle entegredir. Yazı tipi yüzü 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. Etkinlik sırasında Bu süre boyunca, yazı tipi yüzü yüklenmezse bunu kullanmaya çalışan herhangi bir öğe yerine bir yedek yazı tipi yüzüyle oluşturulmalıdır. Yazı tipi yüzü başarıyla değiştirme süresi boyunca yüklendiğinde, yazı tipi yüzü normal şekilde kullanılır.
3. Yazı tipi hatası süresi, yazı tipi değiştirme süresi. Bu süre başladığında yazı tipi yüzü henüz yüklenmediyse normal yazı tipi yedeğine neden olacak şekilde başarısız bir yükleme olarak işaretlenir. Aksi halde, yüzü normal bir şekilde kullanılıyor.

Bu dönemleri anlarsanız, her şeyi değerlendirmek için font-display yazı tipinin, indirilip indirilmediğine veya ne zaman indirildiğine bağlı olarak oluşturulması gerekir.

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. Çoğu tarayıcı şu anda engelleme işlemine benzer bir varsayılan stratejiye sahip.

engelle

block, yazı tipi yüzüne kısa bir engelleme süresi verir (çoğu durumda 3 sn önerilir) ve sonsuz bir değişim süresidir. Diğer bir deyişle, tarayıcı "görünmez" text (metin) yazı tipi yüklenmezse de yazı tipini yükler yüklemez yükler. Bunu yapmak için tarayıcı, metriklerle anonim bir yazı tipi yüzü oluşturur seçilen yazı tipine benziyor ancak hiçbir "mürekkep" içermeyen karakterler bulunuyor. Bu değer, yalnızca belirli bir yazı tipinde metin oluşturuluyorsa kullanılmalıdır sayfanın kullanılabilir olması için gereklidir.

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. Yani, yazı tipi yüzü yüklenmez, ancak yüklenir yüklenmez yazı tipini değiştirir. Engellemeye benzer şekilde, bu değer, yalnızca belirli bir yazı tipinde metin oluşturulurken kullanılmalıdır. önemli olsa da herhangi bir yazı tipinde oluşturmak birçok mesaj var. Logo metni değişim için iyi bir adaydır çünkü yerine makul bir yedek yer işareti koyarak mesajı iletirsiniz. Ancak resmi yazı tipini kullanmaya başlar.

fallback

fallback, yazı tipi yüzüne çok kısa bir engelleme süresi verir (100 ms veya daha az çoğu durumda önerilir) ve kısa bir değiştirme süresi (üç saniye önerilir) çoğu durumda). Başka bir deyişle, yazı tipi yüzü yüklü değilse yazı tipi yüklenir yüklenmez değiştirilir. Ancak, çok fazla zaman geçerse, sayfanın geri kalan kısmında yedek ömür boyu. fallback, saklayabileceğinizi gövde metni gibi öğeler için iyi bir adaydır Örneğin, kullanıcının mümkün olan en kısa sürede okumaya başlamasını ve rahatsız etmek istememesini yeni bir yazı tipi yüklenirken metnin yer değiştirerek deneyimlerini gözden geçirebilirsiniz.

isteğe bağlı

isteğe bağlı, yazı tipi yüzüne çok kısa bir engelleme süresi verir (100 ms veya daha az tavsiye edilir) ve sıfır saniyelik değiştirme süresi uygulanır. Yedek özelliğe benzer şekilde, İndirilecek yazı tipinin "kullanılabilirliği güzel" olduğu durumlarda bu iyi bir seçenektir. ama deneyim açısından kritik öneme sahip değil. İsteğe bağlı değer, yazı tipi indirme işleminin başlatılıp başlatılmayacağına karar vermek üzere tarayıcı kullanır. yapmayacağına inandığına bağlı olarak daha az öncelikli bir hedef en iyi hale getirmektir. Bu, kullanıcının belirli bir ve yazı tipini küçültmek, en iyi kaynak kullanımı olmayabilir.

Tarayıcı desteği

font-display şu anda Deneysel Web Platformu Özellikleri işaretinin arkasında ve Android için Opera ve Opera'da kullanıma sunulmaktadır.

Demo

Sağlamak için örneğe göz atın font-display bir şans. Performans odaklı geliştiriciler için kullanışlı bir araç olarak kullanabilirsiniz.