Deskripsi
Jarak spasi teks pada semua halaman web bernilai normal. Namun, jika ingin menambah atau merapatkan spasi karena kebutuhan, Anda dapat menggunakan letter-spasing dengan menentukan sendiri nilainya jarak spasinya. Misalnya, paragraf kedua artikel Anda spasinya 4px, sedangkan paragraf ketiga menjadi -0,1em.
Nilai
Letter-spacing mempunyai dua nilai;
normal : berada dalam jarak spasi normal, jika letter-spacing tidak dipakai dalam css Anda, maka teks yang ditampilkan di browser/halaman web bernilai normal.
length : nilai ini menggunakan angka positif untuk jarak spasi semakin lebar, untuk lebih rapat gunakan angka minus.
Satuan
Ada dua satuan yang bisa Anda pakai, piksel (px) dan em untuk nilai positf atau negatif. Contoh; 6px, 1em, -6px, -1em.
Penulisan sintak letter-spacing
letter-spacing: nilai_satuan;
Contoh: (1) letter-spacing: 6px; (2) letter-spacing: 1em;
Contoh: letspac.html
<!DOCTYPE HTML>
<html>
<head>
<title>Contoh Letter Spacing Css</title>
<style type="text/css">
p.letnormal{letter-spacing: normal;}
p.letem{letter-spacing: 1em;}
p.letpx{letter-spacing: 6px;}
p.letpxmin{letter-spacing: -0.7px;}
p.letemmin{letter-spacing: -0.1em;}
</style>
</head>
<body>
<p class="letnormal">Inilah letter spacing normal.</p>
<p class="letem">Teks ini letter spacing-nya 1em.</p>
<p class="letpx">Kalau teks ini letter spacing-nya 6px.</p>
<p class="letpxmin">Sedangkan teks ini letter spacing-nya malah minus, 0.7px</p>
<p class="letemmin">Teks terakhir ini letter spacing-nya minus 0.3 em.</p>
</body>
</html>
Tampilan di browser:
 |
| Tampilan letter-spacing di Firefox. |
Referensi tulisan:
- letter-spacing Css; ditulis oleh: Kontributr MDN, developer.mozilla.org, diakses 16 Januari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Tidak ada komentar:
Posting Komentar