Bu kod laboratuvarı, Font Face Gözlemci'yi kullanarak metnin nasıl hemen görüntüleneceğini gösterir.
Yazı Tipi Yüzü Gözlemcisi Ekle
Font Face Observer, bir yazı tipinin yüklendiğini algılayan bir komut dosyasıdır. fontfaceobserver.js
dosyası zaten proje dizinine kaydedilmiş olduğundan dosyayı ayrıca eklemeniz gerekmez. Ancak bu işlem için bir komut dosyası etiketi eklemeniz gerekir.
- Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
index.html
hedefinefontfaceobserver.js
için bir komut dosyası etiketi ekleyin:
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
Yazı Tipi Yüzü Gözlemcisini 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 ardından aşağıdaki komut dosyasını ekleyin. Bu, "Pacifico" ve "Roboto" yazı tipi aileleri için gözlemciler oluşturur:
<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özlemleyicilerini oluşturmanız gerektiğinden emin değilseniz CSS'nizdeki font-family
bildirimlerine bakın. Bu beyanların font-family
adını FontFaceObserver()
öğesine iletin. Yedek yazı tipleri için bir yazı tipi gözlemleyicisi oluşturmaya gerek yoktur.
Örneğin, CSS'niz:
font-family: "Times New Roman", Times, serif;
FontFaceObserver('Times New Roman')
ekliyorsunuz. Times ve serif
yedek yazı tipleri olduğundan bunlar için FontFaceObservers belirtmeniz gerekmez.
Yazı tipi yüklemesini algıla
Yazı tipi yüklemesini algılamak için kullanılan kod şuna benzer:
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
, yazı tipi yüklendiğinde yerine getirilecek bir vaattir.
Demo sitesinde iki farklı yazı tipi kullanıldığından her iki yazı tipi de yüklenene kadar beklemek için Promise.all()
kullanmanız gerekir.
- Bu sözü, az önce beyan ettiğiniz FontFaceObservers öğesinin hemen altına komut dosyanıza ekleyin:
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
✔️Giriş
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, her iki yazı tipi de yüklendikten sonra fonts-loaded
sınıfını belgenin kök öğesine (<html>
etiketi) ekler.
✔️Giriş
Tamamlanmış komut dosyanız aşağıdaki gibi 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(){
document.documentElement.className += " fonts-loaded";
});
</script>
CSS'yi güncelle
Sayfanızın stili, başta bir sistem yazı tipi, fonts-loaded
sınıfı uygulandıktan sonra ise özel yazı tipleri kullanacak şekilde belirlenmelidir.
- 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öster'e, ardından Tam Ekran'a basın.
Sayfa böyle görünüyorsa, Yazı Tipi Yüzü Gözlemcisini başarıyla uygulamış ve "Görünmez Metin Flash"ından kurtulmuşsunuz demektir.