Anak Males – Kali ini kita akan mencoba belajar untuk mengatur font di CSS. Karena pada tutorial sebelumnya kita sudah belajar tentang text formatting. Jadi biar lebih lengkap, kita sekalian belajar tentang font CSS.
Kali ini kita akan membahas tentang properti font- yang juga berfungsi untuk mengatur teks. Lebih tepatnya mengatur font pada teks.
Ada beberapa properti yang bisa mengatur font di CSS yang akan kita bahas di tutorial kali ini yaitu :
- font-size: mengatur ukuran font
- font-weight: mengatur ketebalan font (misalnya bold atau normal)
- font-style: mengatur gaya font (misalnya italic atau normal)
- font-family: menentukan jenis font yang akan digunakan
Jadi mari kita mulai.
Cara Mengatur Ukuran Font CSS
Untuk mengatur ukuran font di CSS, Anda dapat menggunakan atribut font-size. Anda dapat menentukan ukuran font dengan satuan piksel (px), poin (pt), atau em (em). Berikut adalah contoh penggunaan atribut font-size dalam CSS:
.ukuran-font-kecil {
font-size: 12px;
}
.ukuran-font-sedang {
font-size: 16px;
}
.ukuran-font-besar {
font-size: 20px;
}
Anda juga dapat menggunakan perbandingan em untuk mengatur ukuran font relatif terhadap ukuran font yang telah ditetapkan sebelumnya. Sebagai contoh:
body {
font-size: 16px;
}
.ukuran-font-kecil {
font-size: 0.8em;
}
.ukuran-font-sedang {
font-size: 1em;
}
.ukuran-font-besar {
font-size: 1.2em;
}
Di sini, ukuran font yang ditetapkan dalam kelas .ukuran-font-kecil akan menjadi 0.8 kali ukuran font dasar yang telah ditetapkan di elemen body, yaitu 16px. Kelas .ukuran-font-sedang menggunakan ukuran font 1em, yang sama dengan ukuran font dasar. Kelas .ukuran-font-besar menggunakan ukuran font 1.2em, yang sama dengan 1.2 kali ukuran font dasar.
Untuk mengatur ukuran font di elemen HTML, Anda dapat menambahkan kelas yang telah ditentukan di atas ke elemen tersebut, atau Anda dapat menentukan ukuran font secara langsung di elemen tersebut dengan menggunakan atribut style:
<p class="ukuran-font-kecil">Ini adalah paragraf dengan ukuran font kecil.</p>
<p style="font-size: 20px;">Ini adalah paragraf dengan ukuran font besar.</p>
Sebagai catatan, ada beberapa aturan yang harus diikuti saat menentukan ukuran font di CSS:
- Jika Anda menggunakan satuan piksel atau poin, ukuran font akan tetap sama di semua perangkat.
- Jika Anda menggunakan satuan em, ukuran font akan tergantung pada ukuran font dasar yang telah ditetapkan. Jika ukuran font dasar berubah, ukuran font yang ditentukan dalam em juga akan berubah.
Selain atribut font-size, ada beberapa atribut lain yang dapat Anda gunakan untuk mengatur ukuran font di CSS:
font-size-adjust: Atribut ini memungkinkan Anda untuk menyesuaikan ukuran font yang ditampilkan agar sama dengan ukuran font yang ditentukan, meskipun font yang digunakan memiliki ukuran yang berbeda.font-stretch: Atribut ini memungkinkan Anda untuk mengatur lebar font yang ditampilkan. Anda dapat menentukan nilai seperticondensed,expanded, atauultra-condensed.font-variant: Atribut ini memungkinkan Anda untuk mengaktifkan atau menonaktifkan versi alternatif dari suatu font, seperti versi huruf kecil yang lebih besar atau versi huruf kapital yang lebih kecil.
Sebagai contoh, berikut adalah penggunaan atribut font-size-adjust dan font-stretch dalam CSS:
.font-ukuran-disesuaikan {
font-size: 20px;
font-size-adjust: 0.5;
}
.font-lebar-diperluas {
font-size: 20px;
font-stretch: expanded;
}
Di sini, kelas .font-ukuran-disesuaikan akan menampilkan font dengan ukuran 20px, tetapi dengan menggunakan font-size-adjust: 0.5, ukuran font yang sebenarnya akan disesuaikan sehingga menjadi setengah dari ukuran font yang ditentukan. Kelas .font-lebar-diperluas akan menampilkan font dengan ukuran 20px dan lebar yang diperluas.
Cara Mengatur Ketebalan Font Di CSS
Untuk mengatur ketebalan font di CSS, Anda dapat menggunakan atribut font-weight. Atribut ini memungkinkan Anda untuk menentukan berat font yang akan ditampilkan, dengan nilai dari 100 hingga 900, dimana nilai yang lebih tinggi menunjukkan font yang lebih tebal. Sebagai contoh:
.font-tipis {
font-weight: 100;
}
.font-normal {
font-weight: 400;
}
.font-tebal {
font-weight: 700;
}
Di sini, kelas .font-tipis akan menampilkan font dengan ketebalan 100, kelas .font-normal akan menampilkan font dengan ketebalan 400, dan kelas .font-tebal akan menampilkan font dengan ketebalan 700.
Anda juga dapat menggunakan kata kunci seperti lighter, normal, bold, atau bolder untuk menentukan ketebalan font relatif terhadap ukuran font yang telah ditetapkan sebelumnya:
body {
font-weight: normal;
}
.font-tipis {
font-weight: lighter;
}
.font-tebal {
font-weight: bolder;
}
Di sini, kelas .font-tipis akan menampilkan font yang lebih tipis daripada font dasar yang telah ditetapkan di elemen body, dan kelas .font-tebal akan menampilkan font yang lebih tebal daripada font dasar.
Untuk mengatur ketebalan font di elemen HTML, Anda dapat menambahkan kelas yang telah ditentukan di atas ke elemen tersebut, atau Anda dapat menentukan ketebalan font secara langsung di elemen tersebut dengan menggunakan atribut style:
<p class="font-tipis">Ini adalah paragraf dengan font yang tipis.</p>
<p style="font-weight: 700;">Ini adalah paragraf dengan font yang tebal.</p>
Cara Mengatur Font Style CSS
Untuk mengatur font style di CSS, Anda dapat menggunakan atribut font-style. Atribut ini memungkinkan Anda untuk menentukan jenis font yang akan ditampilkan, seperti italic, oblique, atau normal. Berikut adalah contoh penggunaan atribut font-style dalam CSS:
.font-normal {
font-style: normal;
}
.font-miring {
font-style: italic;
}
.font-oblique {
font-style: oblique;
}
Di sini, kelas .font-normal akan menampilkan font dengan style normal, kelas .font-miring akan menampilkan font dengan style italic, dan kelas .font-oblique akan menampilkan font dengan style oblique.
Untuk mengatur font style di elemen HTML, Anda dapat menambahkan kelas yang telah ditentukan di atas ke elemen tersebut, atau Anda dapat menentukan font style secara langsung di elemen tersebut dengan menggunakan atribut style:
<p class="font-miring">Ini adalah paragraf dengan font yang miring.</p>
<p style="font-style: oblique;">Ini adalah paragraf dengan font oblique.</p>
Cara Mengatur Jenis Font CSS
Untuk mengatur jenis font di CSS, Anda dapat menggunakan atribut font-family. Atribut ini memungkinkan Anda untuk menentukan nama font yang akan digunakan, baik itu font yang terinstal di komputer Anda atau font yang tersedia di web. Berikut adalah contoh penggunaan atribut font-family dalam CSS:
.font-sans-serif {
font-family: Arial, sans-serif;
}
.font-serif {
font-family: Times New Roman, serif;
}
.font-monospace {
font-family: Courier, monospace;
}
Di sini, kelas .font-sans-serif akan menampilkan font dengan jenis sans-serif, kelas .font-serif akan menampilkan font dengan jenis serif, dan kelas .font-monospace akan menampilkan font dengan jenis monospace.
Anda juga dapat menentukan nama font yang terinstal di komputer Anda sebagai pilihan pertama, dan menentukan nama font yang tersedia di web sebagai pilihan kedua. Sebagai contoh:
.font-khusus {
font-family: 'My Custom Font', Arial, sans-serif;
}
Di sini, kelas .font-khusus akan menampilkan font dengan nama My Custom Font jika font tersebut terinstal di komputer Anda, atau akan menampilkan font Arial jika font My Custom Font tidak tersedia.
Untuk mengatur jenis font di elemen HTML, Anda dapat menambahkan kelas yang telah ditentukan di atas ke elemen tersebut, atau Anda dapat menentukan jenis font secara langsung di elemen tersebut dengan menggunakan atribut style:
<p class="font-sans-serif">Ini adalah paragraf dengan font sans-serif.</p>
<p style="font-family: Times New Roman, serif;">Ini adalah paragraf dengan font serif.</p>
Cara Menggunakan Font Dari Google
Untuk menggunakan font dari Google di CSS, pertama-tama Anda perlu menambahkan font yang ingin Anda gunakan ke proyek Anda.
Anda dapat melakukannya dengan mengunjungi halaman font Google dan mengklik tombol “Add to Collection” di sebelah nama font yang ingin Anda tambahkan.
Setelah menambahkan font ke koleksi Anda, Anda dapat mengunduh font tersebut atau menyertakannya di proyek Anda dengan menggunakan link yang disediakan oleh Google.
Untuk menyertakan font dari Google di proyek Anda, tambahkan tag <link> ke dalam elemen <head> HTML Anda dengan menggunakan link yang disediakan oleh Google. Sebagai contoh:
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
Setelah menambahkan tag <link> tersebut, Anda dapat menggunakan font dari Google di CSS dengan menentukan nama font tersebut sebagai nilai dari atribut font-family:
body {
font-family: 'Roboto', sans-serif;
}
Di sini, elemen body akan menggunakan font Roboto jika font tersebut tersedia, atau akan menggunakan font sans-serif sebagai gantinya.
Penutup
Baiklah, mungkin hanya segitu aja tutorial css kali ini, sampai jumpa di tutorial berikutnya.