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

Halaman ini diterjemahkan oleh Cloud Translation API.

Teks dan tipografi

The CSS Podcast - 036: Text & Typography

Teks adalah salah satu elemen penyusun inti web.

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

Namun, teks kemungkinan akan menjadi bagian terbesar dari situs Anda, jadi sebaiknya tambahkan beberapa gaya untuk mempercantik tampilannya. Dengan mengubah beberapa properti dasar, Anda dapat meningkatkan pengalaman membaca pengguna secara signifikan.

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

Setelah itu, kita akan membahas properti font CSS penting, termasuk font-family, font-style, font-weight, dan font-size. Dasar-dasar ini menyiapkan latar untuk memanipulasi 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 di seluruh materi untuk memperkuat pemahaman dan penerapan teknik CSS ini.

Aturan `@font-face`

Aturan at CSS @font-face berperan penting dalam desain web, yang memungkinkan Anda menentukan dan menggunakan font kustom untuk menampilkan teks. Keunggulan @font-face terletak pada fleksibilitasnya: Anda dapat mengambil 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")
}

Deskripsi

ascent-override: Menyesuaikan metrik kenaikan, 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 download-nya.
font-family: Memberi nama font untuk digunakan dalam properti terkait font.
font-stretch: Menetapkan penskalaan horizontal yang dapat diterima, yang ditentukan sebagai satu nilai atau rentang.
font-style: Menentukan gaya font, yang mendukung rentang sudut untuk gaya miring.
font-weight: Menentukan ketebalan font atau rentang ketebalan 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 spasi 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, yang kembali 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 font ini.

Deskripsi

@font-face membebaskan desainer dari batasan font "web-safe" 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 Terbuka Web	`font/woff`
Web Open Font Format 2	`font/woff2`

Perbedaan antara @font-face dan font-family

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

Seperti yang telah kita bahas, @font-face adalah aturan yang digunakan untuk menentukan font kustom yang ingin Anda gunakan di aplikasi web. 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.

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

Berikut adalah 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 menemukan font tersebut. Properti font-family kemudian menerapkannya ke elemen isi, dengan Arial sebagai pengganti jika "CustomFont" tidak tersedia.

Mengubah typeface

Dukungan Browser

Teks dan tipografi

The CSS Podcast - 036: Text & Typography

Aturan @font-face

Sintaksis

Deskripsi

Deskripsi

Jenis MIME font

Perbedaan antara @font-face dan font-family

Mengubah typeface

Menggunakan font miring dan miring terbalik

Menebalkan teks

Mengubah ukuran teks

Mengubah spasi antarbaris

Mengubah spasi antarkarakter

Mengubah spasi antarkata

Singkatan font

Mengubah huruf besar/kecil pada teks

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

Menambahkan indentasi ke teks

Menangani konten yang berlebih atau tersembunyi

Mengontrol spasi kosong

Mengontrol cara kata dipisah

Mengubah perataan teks

Mengubah arah teks

Mengubah alur teks

Mengubah orientasi teks

Menambahkan bayangan ke teks

Font variabel

Elemen semu

Pseudo-elemen ::first-letter dan ::first-line

Elemen semu ::selection

font-variant

Memeriksa pemahaman Anda

Resource

Aturan `@font-face`

Singkatan `font`

Pseudo-elemen `::first-letter` dan `::first-line`

Elemen semu `::selection`