Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 5 : Cara Menggunakan Properti Background di CSS, selanjutnya kita akan mempelajari cara menggunakan properti font di CSS.
Pada tutorial ini, kita akan belajar mengatur font konten yang ada di dalam elemen HTML. Berikut prperti yang digunakan untuk mengatur fnt dalam elemen HTML :
- Properti font-family digunakan untuk mengubah tampilan font.
- Properti font-style digunakan untuk membuat font menjadi miring atau blique.
- Properti font-variant digunakan untuk membuat efek huruf kecil.
- Properti font-weight digunakan untuk menambah atau mengurangi tampilan huruf tebal atau terang.
- Properti font-size digunakan untuk menambah atau mengurangi ukuran font.
- Properti font digunakan sebagai singkatan untuk menentukan sejumlah properti font lainnya.
Mengatur font-family
Berikut ini adalah contoh yang menunjukkan bagaimana mengatur font-family dari sebuah elemen. Biasanya diberi nilai berupa nama keluarga font apa saja.
<html>
<head>
</head>
<body>
<p style = "font-family:georgia,garamond,serif;">
Kalimat ini akan ditampilkan dengan jenis huruf georgia, garamond, atau
font default serif tergantung jenis font apa yang tersedia di komputer Anda.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Mengatur font-style
Berikut adalah contoh bagaimana mengatur gaya font dari sebuah elemen. Nilai yang biasanya digunakan adalah normal, italic dan oblique.
<html>
<head>
</head>
<body>
<p style = "font-style:italic;">
Kalimat ini akan ditampilkan dalam gaya miring/italic
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Mengatur font-variant
Contoh berikut menunjukkan cara mengatur font-varian suatu elemen. Nilai yang biasanya digunakan adalah normal dan small-caps.
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;">
Kalimat ini akan ditampilkan dalam huruf besar dan ukuran kecil
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Mengatur font-weight
Contoh berikut menunjukkan cara mengatur bobot font suatu elemen.
Properti ‘font-weight’ menyediakan fungsionalitas untuk menentukan seberapa tebal font tersebut.
Nilai yang biasanya digunakan adalah normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
<html>
<head>
</head>
<body>
<p style = "font-weight:bold;">
Tulisan ini ditebalkan menggunakan nilai ‘bold’.
</p>
<p style = "font-weight:bolder;">
Tulisan ini ditebalkan menggunakan nilai ‘bolder’.
</p>
<p style = "font-weight:500;">
Tulisan ini memiliki besar 500.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Mengatur font-size
Contoh berikut menunjukkan cara mengatur ukuran font suatu elemen.
Properti ‘font-size’ digunakan untuk mengontrol ukuran font.
Nilai yang biasanya digunakan adalah xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, ukuran dalam piksel atau dalam %.
<html>
<head>
</head>
<body>
<p style = "font-size:20px;">
Ukuran font ini adalah 20 pixels
</p>
<p style = "font-size:small;">
Ukuran font ini adalah small
</p>
<p style = "font-size:large;">
Ukuran font ini adalah large
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Mengatur font-size-adjust
Contoh berikut menunjukkan cara mengatur penyesuaian ukuran font suatu elemen.
Properti ini memungkinkan Anda menyesuaikan tinggi-x untuk membuat font lebih terbaca.
Nilai yang biasanya digunakan memungkinkan bisa berupa angka apapun.
<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;">
Kalimat ini menggunakan properti font-size-adjust value.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Mengatur font-strecth
Contoh berikut menunjukkan cara menyetel bentangan font suatu elemen. Properti ini bergantung pada komputer pengguna untuk memiliki versi font yang diperluas atau ringkas yang digunakan.
Nilai yang biasanya digunakan adalah normal, wider, narrower, ultra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
<html>
<head>
</head>
<body>
<p style = "font-stretch:ultra-expanded;">
Jika perubahan tidak tampak di komputer Anda, artinya komputer Anda tidak menyediakan
<br>versi font condensed atau expanded yang dapat digunakan.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Shorthand Property
Untuk mempermudah, Anda dapat menggunakan properti ‘font’ untuk merangkum dan mengatur semua properti font sekaligus.
Sebagai contoh :
<html>
<head>
</head>
<body>
<p style = "font:italic small-caps bold 15px georgia;">
Menerapkan semua property dalam kalimat.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini membantu Anda untuk memahami bagaimana cara menggunakan properti font di CSS untuk membuat tampilan huruf menjadi lebih bagus.
