CSS - Font: Panduan Komprehensif untuk Pemula

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

Pengenalan ke CSS Fonts

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

Penyederhanaan CSS Font

Mari kita mulai dengan trik kecil yang praktis ini disebut penyederhanaan font. Itu seperti pisau瑞士军刀 untuk gaya font - kompak dan multifungsi!

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

Baris tunggal 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 keren, kan? Itu seperti memesan meal khusus instead of makanan 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 dalam:

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 Anda sedangkan memakai 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 font-feature-settings:

.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 kaligrafi!

CSS Fonts - Kerning Font

Kerning tentang ruang antara karakter:

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

Ini memastikan spacing yang proper 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 memberitahu teks Anda untuk berbicara Jepang!

CSS Fonts - Pengaturan Ukuran Optik Font

Pengaturan ukuran optik mengatur font berdasarkan ukurannya:

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

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

CSS Fonts - Palet Font

Palet font memungkinkan Anda menggunakan skema warna yang sudah 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 make over!

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 lebih 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 mengerut atau memperluas font:

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

Ini membuat teks Anda lebih lebar. Itu seperti teks Anda masuk ke gym dan menambah berat!

CSS Fonts - Dengan Properti font-style

Properti font-style memungkinkan Anda untuk menyorot teks:

.emphasized {
font-style: italic;
}

Ini memberikan teks Anda gaya miring. Itu seperti teks Anda mengerucak untuk mengungkap rahasia!

CSS Fonts - Dengan Properti font-weight

Properti font-weight mengendalikan betapa tebalnya teks Anda:

.important {
font-weight: bold;
}

Ini membuat teks Anda tampak menonjol. Itu seperti teks Anda sedang melengkung otot!

CSS Fonts - Dengan Properti font-synthesis

Properti font-synthesis mengendalikan sintesis wajah font:

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

Ini menghindari browser membuat versi tebal sintetik. Itu seperti memberitahu browser, "Jangan meniru sampai Anda bisa!"

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 kapital kecil. Itu seperti teks Anda memakai tuxedo kecil!

CSS Fonts - Dengan Properti font-variation-settings

Pengaturan font-variation 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 disesuaikan untuk teks Anda!

CSS Line Height

Line height mengendalikan 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 meluruskan kaki!

CSS Fonts - Google Fonts

Google Fonts adalah harta karun dari font yang bebas, ramah 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 font pribadi!

CSS Fonts - Fallback Fonts

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 tidak tersedia. Itu seperti memiliki rencana cadangan untuk rencana cadangan Anda!

CSS Fonts - Ringkasan

Berikut ini adalah ringkasan 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	Mengendalikan fitur tipografi tingkat lanjut	font-feature-settings: "smcp" on;
font-kerning	Mengendalikan kerning font	font-kerning: normal;
font-language-override	Mengganti pengaturan glyph khusus bahasa	font-language-override: "JAN";
font-optical-sizing	Mengendalikan penyesuaian ukuran optik	font-optical-sizing: auto;
font-palette	Menentukan palet font	font-palette: --custom-palette;
font-size	Menetapkan ukuran font	font-size: 16px;
font-size-adjust	Menyesuaikan ukuran font berdasarkan tinggi x	font-size-adjust: 0.5;
font-stretch	Mengendalikan regangan font	font-stretch: extra-expanded;
font-style	Mengendalikan gaya font (normal, italic, oblique)	font-style: italic;
font-weight	Mengendalikan berat font	font-weight: bold;
font-synthesis	Mengendalikan sintesis wajah font	font-synthesis: none;
font-variant	Menentukan varian font	font-variant: small-caps;
font-variation-settings	Mengendalikan karakteristik font variabel	font-variation-settings: "wght" 375;
line-height	Menetapkan tinggi baris	line-height: 1.5;

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

Credits: Image by storyset