Code lab ini menunjukkan cara menampilkan teks secara langsung menggunakan Font Face Pengamat.
Menambahkan Font Face Observer
Font Face Observer adalah skrip
yang mendeteksi saat font dimuat. Tujuan
fontfaceobserver.js
file telah disimpan ke direktori proyek, jadi Anda tidak perlu menambahkannya
secara terpisah. Namun, Anda perlu menambahkan tag skrip untuknya.
- Klik Remix to Edit agar 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 Observer
Buat observer untuk setiap jenis font yang digunakan di halaman.
- Tambahkan skrip berikut setelah skrip
fontfaceobserver.js
. Hal ini menciptakan pengamat untuk “Pacifico” dan "Roboto" jenis font:
<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 {i>font
face observer<i} apa yang perlu dibuat, carilah
deklarasi font-family
di CSS Anda. Teruskan nama font-family
deklarasi ini ke
FontFaceObserver()
. Tidak perlu membuat {i>font observer <i}untuk
font pengganti.
Misalnya, jika CSS Anda:
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 akan di-resolve saat font dimuat.
Situs demo menggunakan dua font yang berbeda, sehingga Anda harus menggunakan Promise.all()
untuk menunggu hingga kedua {i>font<i} selesai dimuat.
- Tambahkan promise ini ke skrip Anda, tepat di bawah FontFaceObservers yang baru saja menyatakan:
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>
Terapkan 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 (
<html>
) setelah kedua font dimuat.
✔️Check in
Skrip Anda 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>
Perbarui CSS
Halaman Anda harus diberi gaya untuk menggunakan font sistem di awal dan font kustom satu kali
class fonts-loaded
telah diterapkan.
- Update 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. Lalu tekan Layar penuh .
Jika halaman terlihat seperti ini, berarti Anda telah berhasil menerapkan Font Face Pengamat dan menyingkirkan "Flash of Invisible Text".