turuncukafalikiz
New member
Yarından Sonra Özellikler: Yazı Tipi Yükleme API’sı
Yazı Tipi Yükleme API’si, JavaScript aracılığıyla yazı tiplerini dinamik olarak yüklemek için standartlaştırılmış bir yol sağlar. Bu, önceki prosedürleri gereksiz kılar.
Arial, Times New Roman veya Helvetica gibi bazı yazı tipleri, İnternet’in ilk günlerinde web siteleri tasarlanırken hala kullanılıyordu, çünkü bunların tüm kullanıcıların bilgisayarlarına önceden yüklenmiş olarak geldikleri varsayılabilir, ancak bu (neyse ki) o zamandan beri değişti. sonra: CSS kuralı sayesinde @yazı tipi-yüz Herhangi bir yazı tipi, tarayıcının (örneğin, Google Fonts veya Adobe TypeKit gibi sağlayıcılardan) gerektiğinde indirdiği bir kaynak olarak belirtilebilir.
Ancak bazen ilgili yazı tipi dosyaları, söz konusu web sitesindeki verilerin geri kalanına kıyasla nispeten büyüktür, yani yazı tipi dosyaları tamamen indirilene kadar, görüntülemede gecikme olabilir (özellikle yavaş bağlantılarda). Somut olarak, bu, web sitesindeki ilgili metinlerin önce standart bir yazı tipinde görüntülenmesi ve ardından – istenen yazı tipi yüklenir yüklenmez – burada görüntülenmesi anlamına gelir.
Kullanılabilirlik söz konusu olduğunda, metni web sitesinde görüntülemeden önce tamamen alternatif (standart) yazı tiplerine geçmeniz veya istenen yazı tipinin yüklenmesini beklemeniz önerilir.
Yazı Tipi Yükleme API’sı
TypeKits Web Font Loader veya Font Face Observer gibi JavaScript kitaplıkları burada yardımcı olabilir: Bir yandan JavaScript aracılığıyla fontları dinamik olarak yükleyebilirsiniz ve diğer yandan bir fontun doğru yüklenip yüklenmediği konusunda bilgilendirilirsiniz.
W3C’nin şu anda “Editörün Taslağı” durumunda olan ve aşağıdaki arayüzleri tanımlayan Font Loading API’si (veya daha doğrusu: CSS Font Loading Module Level 3 spesifikasyonu) tam olarak burada devreye giriyor:
- Yazı Yüzü: Bir karakteri temsil eder.
- Yazı TipiFaceSet: bir dizi karakteri temsil eder. Mülkteki kişi tarafından kullanılır belge.yazı tipleri bırakılan nesneyi uygular ve türdeki nesneleri içerir Yazı Yüzü.
- FontFaceSource: Yazı tiplerini yüklemek için bir kaynağı temsil eder. Arayüzler tarafından kullanılır belgeler Ve WorkerGlobalScope uygulandı. emlak hakkında karakterler bir varmak Yazı TipiFaceSetilgili belgenin tüm karakterlerini içeren.
- FontFaceSetLoadEvent: Yazı tipi yüklemeyle ilgili olarak oluşturulan olayları temsil eder.
Yazı tiplerini dinamik olarak yükle
Bir yazı tipi iki adımda yüklenir: ilk adımda ilgili yazı tipi verilerinin indirilmesi gerekir, ikinci adımda yazı tipinin web sitesinde CSS’de kullanılabilmesi için indirilmesi gerekir. Yazı TipiFaceSet ilgili web sitesine eklenecektir.
İlk önce bir nesne örneğine ihtiyacınız var Yazı Yüzü: Uygun yapıcıya yazı tipi adı ve yazı tipinin yükleneceği kaynak iletilir (yer kazanmak için aşağıdaki kod örneklerinde tam URL kısaltılmıştır). İsteğe bağlı olarak, yazı tipi stilini, yazı tipi ağırlığını, yazı tipi değişkenlerini vb. tanımlamak için kullanılabilen üçüncü bir parametre olarak bir yapılandırma nesnesi iletilebilir.
let fontFace = new FontFace('OpenSans','url(https://fonts.gstatic.com
/s/opensans/v13/......woff2)');
Yöntemin çağrılması yük() ardından yapılandırılmış yazı tipinin eşzamansız yüklenmesini başlatır. Sonuç olarak, yöntem çağrılarak her zamanki gibi erişilebilen bir söz verme nesnesi döndürür. o zamanlar() Ve yakalamak() Yazı tipi yüklenmesi veya oluşabilecek hatalardan haberdar olmak için geri arama işlevlerini belirtin.
'use strict';
const log = console.log;
let fontFace = new FontFace('OpenSans','url(https://fonts.gstatic.com
/s/opensans/v13/......woff2)');
fontFace.load()
.then(loadedFontFace => {
log('Schriftart geladen');
log(loadedFontFace.family); // Schriftfamilie
log(loadedFontFace.style); // Schriftstil
log(loadedFontFace.weight); // Schriftstärke
log(loadedFontFace.stretch); // Schriftweite
log(loadedFontFace.unicodeRange); // Unicode-Bereich
log(loadedFontFace.variant); // Schriftvariante
log(loadedFontFace.featureSettings); // Schriftfeatures
log(loadedFontFace.status); // Status
})
.catch(error => console.error('Fehler beim Laden der Schriftart'));
Alternatif olarak, bu geri arama işlevleri de özelliğe eklenebilir yüklendi Saklanan Taahhüt Nesnesini Tanımlayın:
fontFace.loaded
.then((loadedFontFace) =>
console.log('Schriftart "${loadedFontFace.family}" geladen.'))
.catch(error => console.error(error));
fontFace.load();
yazı tiplerini kullanılabilir yap
nesneye belge.yazı tipleri oğlandan Yazı TipiFaceSet bu bir kurmak-benzer nesne, yani doğrudan kurmak ancak yine de kendi yöntemleri vardır (örneğin, ekler (), anahtarlar(), değerler(), açık(), Sokmak() Vesaire.).
İndirilen yazı tipleri demlenebilir Yazı TipiFaceSet için böylece Sokmak() eklenecek. Yazı tipi daha sonra tereddüt etmeden kullanılabilir.
'use strict';
const fontFaceSet = document.fonts;
let fontFace = new FontFace('OpenSans','url(https://fonts.gstatic.com
/s/opensans/v13/......woff2)');
fontFace.load()
.then(loadedFontFace => {
console.log('Schriftart geladen');
fontFaceSet.add(loadedFontFace);
console.log('Schriftart hinzugefügt');
// Ab hier kann die Schriftart sicher genutzt werden.
})
.catch(error => console.error('Fehler beim Laden der Schriftart'));
Ayrıca, teklifler Yazı TipiFaceSet diğer iki yöntem: Yöntem yük() yöntem aracılığıyla bir veya daha fazla yazı tipini indirme ve ekleme adımlarını etkili bir şekilde birleştirir. Kontrol() belirtilen yazı tiplerinin zaten tam olarak yüklenip yüklenmediğini ve web sitesinde görüntü sorunu olmadan kullanılıp kullanılamayacağını kontrol etmek de mümkündür.
Mağazanın durumu da mülk üzerinden kontrol edilebilir. hazır bakın: bu yine bir Promise cui öğesidir o zamanlar()– Geri arama, dosyadaki tüm karakterler olduğu anda çalışır Yazı TipiFaceSet kullanılabilir:
fontFaceSet.ready
.then((loadedFontFaceSet) => {
log(`Insgesamt sind ${loadedFontFaceSet.size} FontFaces geladen.');
for (let fontFace of document.fonts.values()) {
log(fontFace.family);
}
})
})
BTW: Kural aracılığıyla CSS aracılığıyla tüm yazı tipleri için @yazı tipi-yüz tanımlanmışsa otomatik olarak uygun olacaktır Yazı Yüzü-Object örnekleri oluşturuldu ve demlendi Yazı TipiFaceSet içinde belgeler.yazı tipleri katma. Ayrıca pratik: CSS’deki değişikliklerin bunun üzerinde etkisi vardır Yazı Yüzü-Object örnekleri, nesne örneklerinde yapılan değişiklikler CSS’yi etkiler.
Çözüm
Yazı Tipi Yükleme API’si, JavaScript aracılığıyla yazı tiplerini dinamik olarak yüklemek için standartlaştırılmış bir yol sağlar. Caniuse.com’a göre, API şu anda diğerleri arasında Firefox, Chrome, Safari ve Opera tarafından uygulanmaktadır. Internet Explorer ve Edge ise şu anda herhangi bir destek sunmuyor.
()
Haberin Sonu