Terima kasih telah menonton Google I/O. Tonton konten secara on-demand.

Halaman ini diterjemahkan oleh Cloud Translation API.

Teks dan tipografi

Podcast CSS - 036: Teks & Tipografi

Teks merupakan salah satu elemen penyusun inti web.

Saat membuat situs web, Anda tidak perlu memberi gaya teks; HTML sebenarnya memiliki beberapa gaya default yang cukup wajar.

Namun, teks kemungkinan akan mengisi sebagian besar situs Anda, jadi sebaiknya tambahkan beberapa gaya untuk merapikannya. Dengan mengubah beberapa properti dasar, Anda dapat meningkatkan pengalaman membaca secara signifikan bagi pengguna!

Dalam modul ini, kita akan memulai dengan aturan @font-face, yang memungkinkan Anda mengimpor font kustom ke halaman web. Hal ini memastikan bahwa Anda memiliki tipografi yang tepat yang dibutuhkan, terlepas dari font yang diinstal pengguna.

Setelah itu, kita akan membahas properti font CSS yang penting, termasuk font-family, font-style, font-weight, dan font-size. Dasar-dasar ini memungkinkan manipulasi teks untuk gaya dan keterbacaan.

Kita juga akan membahas properti khusus paragraf seperti text-indent dan word-spacing, sebelum menutup dengan topik lanjutan seperti font variabel dan elemen pseudo, yang makin menyempurnakan kontrol tipografi Anda.

Contoh dan tips praktis akan diberikan secara keseluruhan untuk memperkuat pemahaman dan penerapan teknik CSS ini.

Aturan `@font-face`

CSS @font-face yang berlaku sangat penting dalam desain web, yang memungkinkan Anda menentukan dan menggunakan font kustom untuk menampilkan teks. Keindahan @font-face terletak pada keserbagunaannya: memungkinkan Anda mendapatkan font dari server jarak jauh, atau dari font yang diinstal di perangkat pengguna.

Sintaksis

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Penanda (Descriptors)

ascent-override: Menyesuaikan metrik pendakian, yang memengaruhi ruang di atas dasar pengukuran.
descent-override: Menyesuaikan metrik penurunan, yang memengaruhi ruang di bawah dasar pengukuran.
font-display: Mengontrol perilaku tampilan font bergantung pada status downloadnya.
font-family: Menamai font untuk digunakan dalam properti terkait font.
font-stretch: Menetapkan penskalaan horizontal yang dapat diterima, yang ditetapkan sebagai nilai atau rentang tunggal.
font-style: Menentukan gaya font, yang mendukung rentang sudut untuk gaya miring.
font-weight: Menentukan bobot font atau rentang bobot yang tersedia.
font-feature-settings: Mengaktifkan akses ke fitur font OpenType.
font-variation-settings: Memberikan kontrol yang lebih baik atas setelan font variabel.
line-gap-override: Mengganti jarak baris default font.
size-adjust: Menerapkan faktor penskalaan ke metrik dan struktur font.
src: Menentukan sumber font, baik lokal maupun jarak jauh. Tindakan ini diperlukan untuk aturan @font-face. Menggabungkan url() dan local() dalam src adalah strategi umum yang menggunakan font lokal jika tersedia, dengan mengembalikan ke file font jarak jauh sebagai penggantian. Browser memprioritaskan resource berdasarkan urutan deklarasi, sehingga local() biasanya harus mendahului url().
unicode-range: Membatasi karakter yang harus digunakan dengan font ini.

Deskripsi

@font-face membebaskan desainer dari batasan font "aman bagi web" dengan memungkinkan mereka menggunakan tipografi kustom. Kemampuan fungsi local() untuk menelusuri font di perangkat pengguna menawarkan pengalaman yang lancar yang tidak selalu bergantung pada koneksi internet.

Jenis MIME font

Format	Jenis MIME
TrueType	`font/ttf`
OpenType	`font/otf`
Format Font Web Open	`font/woff`
Format Font Web Open 2	`font/woff2`

Perbedaan antara @font-face dan font-family

Dalam CSS, @font-face dan font-family sering kali bingung, tetapi memiliki tujuan yang berbeda.

Seperti yang telah kita bahas, @font-face adalah aturan yang digunakan untuk menentukan font kustom apa pun yang ingin Anda gunakan di aplikasi web. Atribut ini memberi tahu browser tempat mendownload font, cara menampilkannya selama pemuatan (dengan properti font-display), dan menentukan subset karakter mana yang akan didownload (dengan unicode-range).

Sebaliknya, font-family adalah properti CSS yang digunakan dalam aturan CSS untuk menetapkan font tertentu atau daftar font ke elemen. Font yang tercantum dalam font-family dapat berupa font yang aman bagi web, font sistem, atau font kustom yang ditentukan dengan @font-face.

Singkatnya, @font-face mendeklarasikan font dan memberinya nama, serta font-family menerapkan font yang dideklarasikan ini ke elemen HTML.

Berikut ini contoh penggunaan keduanya:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

Dalam contoh ini, @font-face menentukan "CustomFont" dan memberi tahu browser tempat menemukannya. Kemudian, properti font-family menerapkannya ke elemen isi, dengan Arial sebagai penggantian jika "CustomFont" tidak tersedia.

Mengubah jenis huruf

Dukungan Browser

Teks dan tipografi

Podcast CSS - 036: Teks & Tipografi

Aturan @font-face

Sintaksis

Penanda (Descriptors)

Deskripsi

Jenis MIME font

Perbedaan antara @font-face dan font-family

Mengubah jenis huruf

Menggunakan font miring dan miring

Menebalkan teks

Mengubah ukuran teks

Mengubah spasi antarbaris

Mengubah spasi antar-karakter

Mengubah spasi antarkata

Singkatan font

Mengubah kapitalisasi teks

Menambahkan garis bawah, garis atas, dan garis batas ke teks

Menambahkan indentasi ke teks

Menangani konten yang berlebih atau tersembunyi

Mengontrol ruang kosong

Mengontrol bagaimana kata-kata dipisahkan

Ubah perataan teks

Mengubah arah teks

Mengubah alur teks

Mengubah orientasi teks

Menambahkan bayangan ke teks

Font variabel

Elemen semu

Elemen pseudo ::first-letter dan ::first-line

Elemen semu ::selection

font-variant

Menguji pemahaman Anda

Referensi

Aturan `@font-face`

Singkatan `font`

Elemen pseudo `::first-letter` dan `::first-line`

Elemen semu `::selection`