Lab kode ini menunjukkan cara menampilkan teks dengan segera menggunakan Font Face Observer.
Menambahkan Font Face Observer
Font Face Observer adalah skrip
yang mendeteksi saat font dimuat. File
fontfaceobserver.js
telah disimpan ke direktori project, sehingga Anda tidak perlu menambahkannya
secara terpisah. Namun, Anda perlu menambahkan tag skrip untuknya.
- Klik Remix to Edit untuk membuat project dapat diedit.
- Tambahkan tag skrip untuk
fontfaceobserver.js
keindex.html
:
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
Menggunakan Font Face Observer
Membuat Pengamat
Buat observer untuk setiap jenis font yang digunakan di halaman.
- Tambahkan skrip berikut setelah skrip
fontfaceobserver.js
. Tindakan ini akan membuat pengamat untuk jenis font "Pacifico" dan "Roboto":
<script src="fontfaceobserver.js" type="text/javascript"></script>
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
</script>
<body>
Jika Anda tidak yakin observer font face apa yang perlu dibuat, cukup cari deklarasi font-family
di CSS Anda. Teruskan nama font-family
deklarasi ini ke
FontFaceObserver()
. Anda tidak perlu membuat observer font untuk
font penggantian.
Misalnya, jika CSS Anda adalah:
font-family: "Times New Roman", Times, serif;
Anda akan menambahkan FontFaceObserver('Times New Roman')
. Times dan serif adalah font pengganti, sehingga Anda tidak perlu mendeklarasikan FontFaceObservers untuknya.
Mendeteksi pemuatan font
Kode untuk mendeteksi pemuatan font terlihat seperti ini:
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
adalah promise yang diselesaikan saat font dimuat.
Situs demo menggunakan dua font yang berbeda, jadi Anda perlu menggunakan Promise.all()
untuk menunggu hingga kedua font dimuat.
- Tambahkan promise ini ke skrip Anda, tepat di bawah FontFaceObservers yang baru saja Anda deklarasikan:
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
✔️Check-in
Skrip Anda sekarang akan terlihat seperti ini:
<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>
Menerapkan class fonts-loaded
- Ganti komentar
/* Do things */
dalam skrip dengan baris ini:
document.documentElement.classList.add("fonts-loaded");
Tindakan ini akan menambahkan class fonts-loaded
ke elemen root dokumen (tag
<html>
) setelah kedua font dimuat.
✔️Check-in
Skrip yang sudah selesai akan terlihat seperti ini:
<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>
Memperbarui CSS
Halaman Anda harus diberi gaya untuk menggunakan font sistem pada awalnya dan font kustom setelah
class fonts-loaded
diterapkan.
- Perbarui CSS:
.header {
html.fonts-loaded .header {
font-family: 'Pacifico', cursive;
}
.text
html.fonts-loaded .text {
font-family: 'Roboto', sans-serif;
}
Verifikasi
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
Jika halaman terlihat seperti ini, berarti Anda telah berhasil menerapkan Font Face Observer dan menghilangkan "Flash of Invisible Text".