font-displayYazı tipi dosyaları yüklenir ve tarayıcı tarafından nasıl görüntüleneceğini mülkiyet tanımlar. @font-faceBir stil sayfasında özel yazı tiplerini tanımlayan kurala uygulanır .
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )Değerler
font-displayMülkiyet beş değerleri kabul:
auto(varsayılan): Tarayıcının, çoğunluklablockdeğere benzeyen varsayılan yükleme yöntemini kullanmasına izin verir .block: Tarayıcıya, yazı tipi tamamen indirilene kadar metni kısaca gizlemesi talimatını verir. Daha doğrusu, tarayıcı metni görünmez bir yer tutucuyla çizer ve yüklenir yüklenmez özel yazı tipi yüzüyle değiştirir. Bu aynı zamanda "görünmez metin flaşı" veya FOIT olarak da bilinir.swap: Tarayıcıya, özel yazı tipi tamamen indirilene kadar metni görüntülemek için yedek yazı tipini kullanma talimatı verir. Bu aynı zamanda "stilize edilmemiş metin flaşı" veya FOUT olarak da bilinir.fallback:autoVeswapdeğerleri arasında bir uzlaşma görevi görür . Tarayıcı, metni yaklaşık 100 ms süreyle gizler ve yazı tipi henüz indirilmediyse, yedek metni kullanır. İndirildikten sonra yeni yazı tipine değiştirilir, ancak yalnızca kısa bir takas süresi boyunca (muhtemelen 3 saniye).optional: Örneğinfallback, bu değer tarayıcıya önce metni gizlemesini, ardından özel yazı tipi kullanıma hazır olana kadar yedek yazı tipine geçmesini söyler. Bununla birlikte, bu değer, tarayıcının, daha yavaş bağlantıların özel yazı tipini alma olasılığının daha düşük olduğu durumlarda, kullanıcının bağlantı hızını belirleyici bir faktör olarak kullanarak, özel yazı tipinin hiç kullanılıp kullanılmadığını belirlemesine de olanak tanır.
İşte onlar hakkında düşünmenin başka bir yolu
| Blok Dönemi | Swap Dönemi | |
|---|---|---|
| blok | Kısa | Sonsuz |
| takas | Yok | Sonsuz |
| geri çekil | Son derece Kısa | Kısa |
| isteğe bağlı | Son derece Kısa | Yok |
Neden İhtiyacımız Var font-display
Yaygın destek almadan önce @font-face, tipografik cephaneliğimiz yerel yazı tipleriyle sınırlıydı, burada mevcut olan tek yazı tipi son kullanıcının bilgisayarına önceden yüklenmiş olanlardı. Bunlara "web güvenli" yazı tipleri diyoruz çünkü tarayıcının işlenmeleri için herhangi bir şey indirmesine gerek yoktur.
Ardından @font-face, web tasarımcılarına ve ön uç geliştiricilere daha önce hiç olmadığı kadar yeni tipografik güçler veren kural geldi . Yazı tipi dosyalarını bir sunucuya yüklememize ve stil sayfalarımıza yazı tipini adlandıran ve tarayıcıya dosyaların nereden indirileceğini söyleyen bir dizi kural yazmamıza izin verdi. Ayrıca, kitlelere özel yazı tipleri getiren Google Yazı Tipleri gibi hizmetlerin doğmasına neden oldu. Son olarak, web tasarımını baskı tasarımından ayıran büyük bir engel aşılmıştı!
Ancak, özel yazı tipleri bir bedel karşılığında geldi (ve gelmeye devam ediyor). Yazı tipi dosyaları büyük olabilir ve dosyaları indirmek için gereken fazladan zaman, özellikle daha yavaş bir ağ bağlantısına sahip cihazlar için bir sitenin performansını yavaşlatabilir. Sınırlı veri planlarında kullanıcılara ekstra maliyet de bir faktör haline geldi.
Özel yazı tipleriyle ortaya çıkan bir diğer özel endişe, kısaca "stilize edilmemiş metin flaşı" veya FOUT olarak adlandırılan şeydir. Tarayıcılar, özel yazı tipinin indirilmesini beklerken varsayılan olarak bir sistem yazı tipini gösterir. Bu, web sayfalarının daha hızlı yüklenmesine izin verdi, ancak bunu kullanıcı deneyimini ele geçirdiğini ve amaçlanan tasarımı yanlış tanıttığını gören web tasarımcıları arasında endişeleri artırdı. Web tarayıcıları bugün genellikle metni, özel yazı tipi indirilene kadar gizler, buna şimdi "görünmez metin flaşı" veya FOIT diyoruz.
Ne FOUT ne de FOIT harika değil. Efektleri kolaylaştırmaya yardımcı olmak için özel yazı tiplerinin performansını optimize etme yollarımız var. Ancak, şimdi font-displaytarayıcıya FOUT, FOIT veya hatta ikisinin arasında bir şey mi tercih ettiğimizi söylememiz gerekiyor.
Destek için Test Etme
Šime Vidas'ın kaydettiği ilginç uyarı:
CSS yazı tipi görüntüleme
@font-facebir özellik değil , bir tanımlayıcıdır, bu nedenle tarayıcıdaki desteği özellik sorgularıyla (CSS@supportskuralı ve CSS.supports API'si) test edilemez.
Daha fazla bilgi
- CSS Yazı Tipi Oluşturma Kontrolleri Modül Seviye 1 Spesifikasyon: Özellik için spesifikasyon taslağı.
font-displaykitleler için: Jeremy Wagner, CSS-Tricks'de bize buradaki mülkle tanıştırdı.- Kullanma
@font-face: Kuralın kapsamlı bir açıklaması ve nasıl kullanılacağına ilişkin en iyi uygulamalar. - Sistem Yazı Tipi Yığını: Özel yazı tiplerini tamamen terk etmek ve yalnızca kullanıcının sistem yazı tiplerine güvenmek için bir snippet.
- Yazı Tipi Performansını Kontrol Etme
font-display: Konuyla ilgili Google tarafından ince bir yazı.
Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 60 | 58 | Hayır | 79 | 11.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |