Lompat ke konten utama
←

CSS Tata Letak dan Responsif

Pelajaran 18 dari 20

Posisi, variabel, dan gerak

Web font: @font-face, font-display, dan huruf cadangan

Setelah pelajaran ini kamu bisa memasang huruf unduhan dengan @font-face, memilih font-display, menulis daftar font-family yang berakhir di nama generik, dan memberi line-height tanpa satuan.

  • ±13 menit
  • 3 latihan
  • Diperiksa 28 Okt 2026

Latihan di pelajaran ini butuh akun gratis. Progres, kode, dan catatanmu hanya tersimpan di browser ini. Masuk untuk menyimpannya

Materi

Properti font-family berisi daftar huruf berurutan prioritas, dipisah koma. Browser memakai huruf pertama yang tersedia. MDN meminta setiap daftar memuat paling sedikit satu nama keluarga generik, seperti sans-serif atau serif, sebagai cadangan terakhir, karena tidak ada jaminan huruf mana pun terpasang di perangkat pembaca.

Huruf yang tidak terpasang bisa diunduh lewat aturan @font-face. Di dalamnya, font-family memberi nama yang nanti kamu panggil, dan src menunjuk berkasnya. MDN menyarankan format WOFF2 untuk web karena kompresinya lebih efisien daripada format lama. Bila src memuat local() lebih dulu, salinan yang sudah terpasang dipakai tanpa mengunduh.

@font-face {
  font-family: "Nusantara Sans";
  src: url("/font/nusantara-sans.woff2") format("woff2");
  font-display: swap;
}

body {
  font-family: "Nusantara Sans", Arial, sans-serif;
  line-height: 1.5;
}

Selama berkas diunduh, browser memutuskan apa yang tampil lewat font-display. swap memberi masa tunggu yang sangat singkat: teks langsung tampil dengan huruf cadangan, lalu berganti begitu berkasnya siap. block menyembunyikan teks sebentar dengan huruf cadangan yang tidak terlihat. Di jaringan lambat, swap membuat teks bisa dibaca sejak awal.

line-height mengatur tinggi baris. Tulis tanpa satuan, misalnya 1.5: angka itu dikalikan ukuran huruf setiap elemen, jadi judul besar dan paragraf mendapat jarak yang sebanding. Nilai berpiksel diwariskan apa adanya ke judul besar sehingga barisnya bisa bertumpuk. MDN meminta paling sedikit 1.5 untuk paragraf utama.

Latihan

0/3 lulus

Jawaban diperiksa di server. Lulus berarti kamu memahami contohnya, bukan penilaian seluruh pekerjaanmu.

Latihan 3 dari 3

Aturan @font-face memakai font-display: swap, dan berkas hurufnya baru selesai diunduh setelah tiga detik. Apa yang dilihat pembaca selama tiga detik itu?

Pilih satu jawaban

Catatanmu

Memuat catatan…

tersimpan otomatis, ikut tercetak · 0/4.000

Lanjutkan ke

Tampilkan 1 lagi

Sebagian materi kelas ini diadaptasi dari Microsoft Web Dev for Beginners — 3-terrarium (CSS layout) (MIT), web.dev — Learn CSS, Learn Forms, Learn Accessibility (CC-BY-3.0).