Hindari kilatan teks tak terlihat

Katie Hempenius
Katie Hempenius
X

Code lab ini menunjukkan cara menampilkan teks secara langsung menggunakan Font Face Observer.

Tambahkan Pengamat Tampilan Font

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.

  • Klik Remix untuk Mengedit agar project dapat diedit.
  • Tambahkan tag skrip untuk fontfaceobserver.js ke index.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 pada halaman.

  • Tambahkan skrip berikut setelah skrip fontfaceobserver.js. Cara 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 tidak yakin observer tampilan font apa yang perlu dibuat, cari saja deklarasi font-family di CSS Anda. Teruskan nama font-family deklarasi ini ke FontFaceObserver(). Tidak perlu membuat pengamat font untuk font penggantian.

Misalnya, jika CSS Anda:

font-family: "Times New Roman", Times, serif;

Anda akan menambahkan FontFaceObserver('Times New Roman'). Waktu dan serif adalah font pengganti, sehingga Anda tidak perlu mendeklarasikan FontFaceObservers untuknya.

Deteksi pemuatan font

Kode untuk mendeteksi pemuatan font terlihat seperti ini:

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

robotoObserver.load() adalah promise yang di-resolve saat font dimuat.

Situs demo menggunakan dua font yang berbeda, jadi Anda harus 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>

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 (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>

Perbarui CSS

Halaman Anda harus diberi gaya untuk menggunakan font sistem di awal dan font kustom setelah class fonts-loaded 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 layar penuh.

Jika halaman terlihat seperti ini, berarti Anda telah berhasil menerapkan Font Face Observer dan menghilangkan "Flash of Invisible Text".

Judul dengan font tulis tangan.