0Pricing
CSS Academy · Pelajaran

Keluarga Font dan Font yang Aman untuk Web

Atur keluarga font dan pahami font yang aman digunakan di semua peramban.

Keluarga Font dan Font yang Aman untuk Web adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Properti font-family

Properti font-family menetapkan jenis huruf untuk sebuah elemen. Anda memberikan tumpukan font: daftar nama font yang dipisahkan dengan koma, dari yang paling disukai hingga yang paling tidak disukai, dan diakhiri dengan keluarga generik.

<p>This text renders in the page's body font stack.</p>

Keluarga Font Generik

CSS mendefinisikan lima keluarga generik sebagai cadangan:

  • serif — font dengan guratan dekoratif (Times, Georgia)
  • sans-serif — font bersih tanpa guratan (Arial, Helvetica)
  • monospace — font dengan lebar tetap (Courier, Consolas)
  • cursive — font bergaya tulisan tangan
  • fantasy — font tampilan dekoratif

Font yang Aman untuk Web

Font yang aman untuk web telah terpasang di hampir semua sistem operasi. Anda dapat mengandalkannya tanpa memuat berkas font eksternal:

  • Sans-serif: Arial, Helvetica, Verdana, Trebuchet MS
  • Serif: Georgia, Times New Roman
  • Monospace: Courier New, Consolas

Nama Font dengan Spasi

Nama font yang mengandung spasi harus diapit tanda kutip:

<p class="serif-example">"Times New Roman", Times, serif</p>
<p class="sans-example">"Open Sans", sans-serif</p>

Praktik Terbaik Tumpukan Font

Bangun tumpukan font Anda dengan:

  1. Font pilihan Anda (mungkin belum terpasang)
  2. Satu atau dua font cadangan yang serupa
  3. Keluarga generik sebagai pilihan terakhir
<p class="font-stack">Georgia &rarr; Palatino Linotype &rarr; serif fallback</p>

Font UI Sistem

Desain modern sering menggunakan font sistem — font UI bawaan sistem operasi. Tampilan ini terasa alami dan tidak memerlukan pengunduhan:

<p class="system-ui-text">This uses your OS's native UI font.</p>

Tumpukan Monospace untuk Kode

Penyunting kode dan terminal memerlukan tumpukan monospace:

<p>Inline <code>const x = 1;</code> code.</p>
<pre>function hello() {
  return "world";
}</pre>

Mewariskan font-family

Sebagian besar elemen mewarisi font-family dari elemen induknya. Beberapa elemen formulir (<input>, <textarea>) tidak mewarisinya secara default di beberapa peramban — tetapkan secara eksplisit:

<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select><option>Select</option></select>
<button>Button</button>

Memeriksa Font yang Tersedia

Anda dapat memeriksa ketersediaan font sistem menggunakan fungsi local() di dalam @font-face. Peramban akan mencoba font lokal terlebih dahulu sebelum mengunduhnya.

<p class="my-font-text">Text using MyFont (local match or fallback)</p>

Subsetting Unicode-Range

Saat memuat font, gunakan unicode-range dalam @font-face untuk hanya memuat rentang karakter yang diperlukan, sehingga ukuran unduhan untuk situs multibahasa menjadi lebih kecil.

<p class="inter-text">Basic Latin text (U+0000&ndash;00FF range)</p>

Ikhtisar Font Variabel

Font variabel memuat seluruh keluarga (ketebalan, lebar, dan gaya) dalam satu berkas menggunakan sumbu variasi font. Font ini secara drastis mengurangi permintaan HTTP untuk desain yang kaya tipografi.

Pemeriksaan Cepat

Keluarga font generik mana yang harus digunakan sebagai cadangan terakhir untuk tumpukan font sans-serif?

Ringkasan

Properti font-family menerima tumpukan font yang diakhiri dengan keluarga generik. Font yang aman untuk web dapat digunakan di mana saja tanpa perlu dimuat. Tumpukan UI sistem memberikan nuansa alami tanpa tambahan permintaan HTTP. Selalu gunakan tanda kutip untuk nama font yang mengandung spasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Keluarga Font dan Font yang Aman untuk Web” gratis?

Ya — teks lengkap “Keluarga Font dan Font yang Aman untuk Web” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Keluarga Font dan Font yang Aman untuk Web”?

Atur keluarga font dan pahami font yang aman digunakan di semua peramban. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Keluarga Font dan Font yang Aman untuk Web” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Keluarga Font dan Font yang Aman untuk Web
  2. Ukuran, Ketebalan, dan Gaya Font
  3. Perataan, Dekorasi, dan Jarak Teks
  4. Google Fonts dan @font-face
← Kembali ke CSS Academy