CSS -_fonts: Panduan Lengkap untuk Pemula

Hai teman-teman pemula pengembang web! Hari ini, kita akan masuk ke dunia yang menakjubkan dari CSS fonts. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk memandu Anda melalui perjalanan ini langkah demi langkah. Jadi, ambillah secangkir kopi (atau tea, jika itu hal Anda), dan mari kita mulai!

CSS - Fonts

Pengenalan ke CSS Fonts

Sebelum kita masuk ke detailnya, mari bicarakan mengapa font sangat penting. Bayangkan Anda membaca buku yang ditulis sepenuhnya dalam Comic Sans - bukan pengalaman yang menyenangkan, kan? Itulah sebabnya pemilihan font yang tepat untuk website Anda sangat penting. Itu seperti memilih pakaian yang sempurna untuk pertemuan pertama - Anda ingin membuat kesan yang bagus!

Penyederhanaan CSS Font

mari mulai dengan trik kecil yang praktis ini disebut penyederhanaan font. Itu seperti pisau Switzerland untuk penataan font - kompak dan multifungsi!

body {
font: italic small-caps bold 16px/2 Arial, sans-serif;
}

Baris ini menetapkan beberapa properti font sekaligus. Mari kitauraikan:

italic: gaya font
small-caps: varian font
bold: berat font
16px: ukuran font
2: tinggi baris
Arial, sans-serif: keluarga font

Cukup menarik, kan? Itu seperti memesan makanan khusus daripada item individual!

CSS Fonts - Dengan Nilai Ganda

kadang-kadang, satu font saja tidak cukup. Itu di mana nilai ganda berguna:

p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}

Ini seperti memiliki rencana cadangan. Jika "Trebuchet MS" tidak tersedia, itu akan mencoba Verdana, dan jika itu juga gagal, itu akan menggunakan font sans-serif mana saja yang tersedia.

CSS Fonts - Keluarga Font

Bicarakan tentang keluarga font, mari kita masuk lebih mendalam:

h1 {
font-family: Georgia, serif;
}
p {
font-family: Arial, sans-serif;
}

Di sini, kita menggunakan keluarga font yang berbeda untuk judul dan paragraf. Itu seperti memakai pakaian formal untuk judul dan pakaian casual untuk paragraf!

CSS Fonts - Pengaturan Fitur Font

Sekarang, mari kita menjadi keren dengan pengaturan fitur font:

p {
font-feature-settings: "smcp" on, "swsh" 2;
}

Ini mengaktifkan small caps dan menyetel swash ke level 2. Itu seperti memberikan font Anda superpower!

CSS Fonts - Dengan Properti font-feature-settings

Mari kita lihat contoh lain dari pengaturan fitur font:

.stylish-text {
font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1;
}

Ini mengaktifkan ligatur standar, ligatur diskretif, dan ligatur historis. Itu seperti mengubah teks Anda menjadi karya calligraphy!

CSS Fonts - Kerning Font

Kerning tentang jarak antara karakter:

.kerned-text {
font-kerning: normal;
}

Ini memastikan jarak yang benar antara huruf. Itu seperti memberikan teks Anda ruang untuk bernapas!

CSS Fonts - Penggantian Bahasa Font

kadang-kadang, Anda perlu mengganti pengaturan bahasa:

.japanese-text {
font-language-override: "JAN";
}

Ini memberitahu browser untuk menggunakan varian glyph khusus Jepang. Itu seperti memberi teks Anda perintah untuk berbicara Jepang!

CSS Fonts - Pengaturan Ukuran Optik Font

Pengaturan ukuran optik menyesuaikan font berdasarkan ukurannya:

.headline {
font-optical-sizing: auto;
}

Ini memungkinkan font untuk optimalkan penampilannya pada ukuran yang berbeda. Itu seperti memiliki font yang dapat berubah bentuk!

CSS Fonts - Palet Font

Palet font memungkinkan Anda menggunakan skema warna yang telah ditentukan:

@font-palette-values --custom-palette {
font-family: Pixelify Sans;
base-palette: 1;
}

.colored-text {
font-palette: --custom-palette;
}

Ini menerapkan palet warna khusus ke font Anda. Itu seperti memberikan teks Anda penampilan baru!

CSS Fonts - Ukuran Font

Ukuran font cukup mudah:

body {
font-size: 16px;
}
h1 {
font-size: 2em;
}

Di sini, kita menetapkan ukuran dasar untuk body dan membuat judul dua kali lipat besar. Itu seperti memiliki potion pertumbuhan untuk teks Anda!

CSS Fonts - Penyesuaian Ukuran Font

Penyesuaian ukuran font membantu menjaga keterbacaan di antara font yang berbeda:

.adjusted-text {
font-size-adjust: 0.5;
}

Ini menyesuaikan ukuran font berdasarkan tinggi x. Itu seperti memberikan teks Anda sepatu platform!

CSS Fonts - Regangan Font

Regangan font memungkinkan Anda untuk mengerutkan atau memperluas font:

.stretched-text {
font-stretch: extra-expanded;
}

Ini membuat teks Anda lebih lebar. Itu seperti teks Anda mengunjungi gym dan memperbesar ototnya!

CSS Fonts - Dengan Properti font-style

Properti font-style memungkinkan Anda untuk miringkan teks Anda:

.emphasized {
font-style: italic;
}

Ini memberikan teks Anda sudut miring. Itu seperti teks Anda sedang berbisik rahasia!

CSS Fonts - Dengan Properti font-weight

Properti font-weight mengontrol berat teks Anda:

.important {
font-weight: bold;
}

Ini membuat teks Anda tampak menonjol. Itu seperti teks Anda sedang menunjukkan ototnya!

CSS Fonts - Dengan Properti font-synthesis

Properti font-synthesis mengontrol sintesis wajah font:

.no-fake-bold {
font-synthesis: none;
}

Ini menghindari sintesis versi tebal font. Itu seperti memberi tahu browser, "Jangan meniru sampai Anda benar-benar membuatnya!"

CSS Fonts - Dengan Properti font-variant

Properti font-variant memungkinkan Anda menggunakan glyph alternatif:

.smallcaps {
font-variant: small-caps;
}

Ini mengubah huruf kecil menjadi huruf besar kecil. Itu seperti teks Anda memakai jaket kecil tuxedo!

CSS Fonts - Dengan Properti font-variation-settings

Pengaturan variabel font memberikan Anda kontrol halus atas font variabel:

.custom-font {
font-variation-settings: "wght" 375, "wdth" 80;
}

Ini menyetel nilai berat dan lebar khusus. Itu seperti memiliki pakaian yang dibuat sesuai ukuran untuk teks Anda!

CSS Tinggi Baris

Tinggi baris mengontrol ruang antara baris teks:

p {
line-height: 1.5;
}

Ini menetapkan tinggi baris ke 1,5 kali ukuran font. Itu seperti memberikan teks Anda ruang untuk melangkah!

CSS Fonts - Google Fonts

Google Fonts adalah harta karun dari font gratis yang ramah bagi web:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

body {
font-family: 'Roboto', sans-serif;
}

Ini mengimpor dan menggunakan font Roboto. Itu seperti memiliki penata busana pribadi untuk font Anda!

CSS Fonts - Font Cadangan

Selalu menyediakan font cadangan:

body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Ini memastikan teks Anda selalu tampak bagus, bahkan jika font yang diinginkan Anda tidak tersedia. Itu seperti memiliki rencana cadangan untuk rencana cadangan Anda!

CSS Fonts - Ringkasan

Berikut adalah ringkasan cepat dari semua properti font yang kita bahas:

Properti	Deskripsi	Contoh
font	Penyederhanaan untuk beberapa properti font	`font: italic bold 16px/2 Arial, sans-serif;`
font-family	Menentukan keluarga font	`font-family: Arial, sans-serif;`
font-feature-settings	Mengontrol fitur tipografi tingkat lanjut	`font-feature-settings: "smcp" on;`
font-kerning	Mengontrol kerning font	`font-kerning: normal;`
font-language-override	Mengganti pengaturan glyph khusus bahasa	`font-language-override: "JAN";`
font-optical-sizing	Mengontrol penyesuaian ukuran optik	`font-optical-sizing: auto;`
font-palette	Menentukan palet font	`font-palette: --custom-palette;`
font-size	Mengatur ukuran font	`font-size: 16px;`
font-size-adjust	Menyesuaikan ukuran font berdasarkan tinggi x	`font-size-adjust: 0.5;`
font-stretch	Mengontrol regangan font	`font-stretch: extra-expanded;`
font-style	Mengatur gaya font	`font-style: italic;`
font-weight	Mengatur berat font	`font-weight: bold;`
font-synthesis	Mengontrol sintesis wajah font	`font-synthesis: none;`
font-variant	Menentukan varian font	`font-variant: small-caps;`
font-variation-settings	Mengontrol karakteristik font variabel	`font-variation-settings: "wght" 375;`
line-height	Mengatur tinggi baris	`line-height: 1.5;`

Dan itu lah, teman-teman! Panduan lengkap tentang CSS fonts. Ingat, tipografi adalah seni, dan sekarang Anda memiliki alat untuk menjadi seorang seniman. Selamat coding, dan semoga font Anda selalu menakjubkan!

Credits: Image by storyset