Bu kod laboratuvarı, Yazı Tipi Yüzü kullanarak metni nasıl hemen görüntüleyeceğinizi gösterir Gözlemci.
Yazı Tipi Yüzü Gözlemci Ekle
Font Face Observer bir komut dosyasıdır
algılamasını sağlar. İlgili içeriği oluşturmak için kullanılan
fontfaceobserver.js
dosyası proje dizinine zaten kaydedildiğinden dosyayı eklemeniz gerekmez
ayrı olarak düzenleyebilirsiniz. Ancak bunun için bir komut dosyası etiketi eklemeniz gerekir.
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
index.html
öğesinefontfaceobserver.js
için komut dosyası etiketi ekleyin:
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
Font Face Observer'ı kullan
Gözlemci Oluşturma
Sayfada kullanılan her yazı tipi ailesi için bir gözlemci oluşturun.
fontfaceobserver.js
komut dosyasının arkasına aşağıdaki komut dosyasını ekleyin. Bu da "Pacifico" gözlemcileri ve "Roboto" yazı tipi aileleri:
<script src="fontfaceobserver.js" type="text/javascript"></script>
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
</script>
<body>
Hangi yazı tipi yüzü gözlemcilerini oluşturmanız gerektiğinden emin değilseniz
CSS'nizdeki font-family
beyanlarını sağlamanız gerekir. Bu beyanların font-family
adını şuraya geçirin:
FontFaceObserver()
. Gerekirse yazı tipi gözlemleyicisi oluşturmaya
yedek yazı tipleri sunar.
Örneğin, CSS'niz:
font-family: "Times New Roman", Times, serif;
FontFaceObserver('Times New Roman')
eklerdiniz. Times ve serif:
Bu nedenle, bunlar için FontFaceObservers belirtmeniz gerekmez.
Yazı tipi yüklemesini algıla
Yazı tipi yüklemesini algılama kodu aşağıdaki gibi görünür:
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
, yazı tipi yüklendiğinde çözüme ulaştırılacak bir taahhüttür.
Demo sitesi iki farklı yazı tipi kullandığından Promise.all()
kullanmanız gerekir
ve yüklenene kadar bekleyin.
- Bu sözü komut dosyanıza, eklemek istediğiniz FontFaceObservers az önce açıklandı:
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
✔️Check-in
Komut dosyanız artık şu şekilde görünmelidir:
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
</script>
fonts-loaded
sınıfı uygula
- Komut dosyasındaki
/* Do things */
yorumunu, şu satırla değiştirin:
document.documentElement.classList.add("fonts-loaded");
Bu işlem, fonts-loaded
sınıfını dokümanın kök öğesine (
<html>
etiketi) yükleyin.
✔️Check-in
Tamamladığınız komut dosyası aşağıdaki gibi görünecektir:
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
document.documentElement.className += " fonts-loaded";
});
</script>
CSS'yi güncelle
Sayfanızın stili, başta bir sistem yazı tipi ve bir kez özel yazı tipleri kullanılacak şekilde biçimlendirilmelidir
fonts-loaded
sınıfı uygulandı.
- CSS'yi güncelleyin:
.header {
html.fonts-loaded .header {
font-family: 'Pacifico', cursive;
}
.text
html.fonts-loaded .text {
font-family: 'Roboto', sans-serif;
}
Doğrula
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran .
Sayfa böyle görünüyorsa Font Face'ı başarıyla uygulamışsınızdır Gözlemci ve "Görünmez Metin'in Flash"ından kurtuldu.