CSS menyediakan banyak properti untuk menyesuaikan tampilan font. Hal ini meliputi dari jenis font, gaya font, hingga bayangan.
Di antara properti font CSS adalah informasi tentang jenis font, gaya font, dan bobot font. Properti ini tentu sangat berguna terutama untuk elemen HTML yang mengandung teks (p, i, dan sebagainya). Namun demikian, properti ini juga dapat digunakan untuk tabel.
Dengan menggunakan font-family, kita dapat menentukan jenis font yang akan digunakan.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>Hasilnya terlihat sebagai berikut di browser:
Contoh font yang umum mencakup Arial, Helvetica dan Times Roman. Properti CSS font-family digunakan untuk menetapkan font yang diinginkan. Jika menyebutkan beberapa font, urutan pengaturan penting. Jika font pertama yang disebutkan tersedia, maka akan digunakan. Font-font yang diinginkan dipisahkan oleh koma. Sebagai perintah terakhir, biasanya dicantumkan keluarga font generik. Dengan menggunakan keluarga font generik, browser dapat memilih font yang paling mirip dengan yang ditentukan.
• serif = font dengan serif
• sans-serif = font tanpa serif
• cursive = font kursif
• fantasy = font unik
• monospace = font dengan lebar karakter seragam.
Gaya Font
Dengan properti font-style, Anda dapat menentukan gaya font. Jika jenis font yang dipilih memungkinkan, Anda dapat memaksa menggunakan gaya miring (italic).
Font lain juga dapat dimiringkan dengan menggunakan oblique.
Properti CSS berikutnya yang mempengaruhi tampilan font disebut font-variant. Dengan properti ini, Anda dapat mendefinisikan huruf kapital kecil.
Untuk menjadikan huruf kapital kecil, gunakan nilai small-caps pada font-variant.
Ukuran Font
Sangat penting untuk menyebutkan ukuran font. CSS menyediakan properti font-size untuk hal ini. Ukuran font dapat diatur dengan berbagai satuan yang berbeda.
• EM
• REM
• Pixel
• Persentase
• Kata kunci
Beberapa kata kunci yang bisa digunakan adalah sebagai berikut:
• xx-small – sangat sangat kecil
• x-small – sangat kecil
• small – kecil
• smaller – lebih kecil dari elemen induknya
• medium – sedang
• large – besar
• x-large – sangat besar
• xx-large – sangat sangat besar
• larger – lebih besar dari elemen induknya
Berikut adalah contoh cara menentukan ukuran font:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}Dan inilah tampilannya di browser:
Harap dicatat bahwa mendefinisikan ukuran font sangat kompleks, karena masing-masing satuan memiliki kelebihan dan kekurangan. Untuk panduan yang bagus tentang kapan sebaiknya menggunakan satuan mana, Anda dapat menemukannya di halaman http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Bagi yang tidak ingin membaca semua itu, gunakan nilai relatif seperti em untuk tampilan dalam layar. Untuk tata letak cetak, lebih baik gunakan satuan absolut seperti pt.
Bobot Font
Selanjutnya adalah tentang bobot font. Dengan properti font-weight, Anda dapat menentukan ketebalan dan kekuatan suatu font.
.fett {
font-weight:bold;
}
Dengan sintaks ini, teks yang ditandai akan ditampilkan dalam huruf tebal.
Nilai yang mungkin adalah bold (tebal), bolder (sangat tebal), lighter (tipis), dan normal. Selain itu, nilai numerik 100, 200, 300, 400, 500, 600, 700, 800 dan 900 juga diperbolehkan. Ini berkisar dari sangat tipis (100) hingga sangat tebal (900).
Ringkasan Definisi
Dalam konteks definisi font, sifat line-height juga memainkan peran penting, yang memungkinkan untuk menentukan ketinggian baris. Saya akan membahas sifat ini lebih rinci nanti. Pada titik ini, hal ini hanya perlu disebutkan, karena berhubungan dengan sifat font yang ditunjukkan setelah ini.
Anda dapat menggabungkan informasi yang telah disajikan sebelumnya tentang tampilan font. Digunakan untuk itu adalah sifat font umum. Ini mencakup informasi-informasi individu berikut atau menyertakan mereka.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Dengan font, berbagai format teks dapat digabungkan. Anda dapat menentukan sifat-sifat yang disebutkan sebelumnya, tetapi tidak harus menggunakan semuanya. Namun, wajib menggunakan sifat untuk ukuran font dan keluarga font.
Berkat cara penulisan singkat, file CSS dapat dibuat lebih pendek dan lebih mudah dibaca.
Urutan, seperti yang diperlihatkan di bawah ini, harus diikuti. Ketika kedua sifat font-size dan line-height dicatat, keduanya dipisahkan oleh garis miring. Jika hanya satu nilai yang diberikan, maka itu mewakili font-size.
Contoh:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust dikembangkan untuk dapat menampilkan font dengan ukuran yang hampir sama besar. Font berbeda memiliki ketinggian x yang berbeda pada tinggi font yang sama. Namun, font dengan ketinggian x yang lebih besar lebih mudah dibaca. Sehingga bisa terjadi bahwa dokumen sulit dibaca jika jenis font asli tidak tersedia dan digantikan oleh jenis font lain dengan ketinggian x yang lebih kecil. Dengan font-size-adjust, perbedaan ini seharusnya bisa disesuaikan.
Contoh:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
Pada tutorial berikutnya, Anda akan mempelajari lebih banyak cara untuk menyesuaikan tampilan teks pada situs web Anda.
