The letter-spacingproperti mengontrol jumlah ruang antara setiap huruf dalam elemen atau blok teks yang diberikan. Nilai yang didukung oleh letter-spacingmenyertakan nilai font-relative (em, rem), nilai relatif-orang tua (persentase), nilai absolut (px) dan normalproperti, yang diatur ulang ke default font.
Direkomendasikan untuk menggunakan nilai font-relative, sehingga letter-spacingbertambah atau berkurang secara tepat saat ukuran font diubah, baik oleh desain atau perilaku pengguna.
p ( /* 16 * 0.0625 = 1px */ letter-spacing: 0.0625em; )Hal terpenting yang perlu diperhatikan saat menggunakan letter-spacingadalah bahwa nilai yang ditentukan tidak mengubah default, itu ditambahkan ke spasi default yang diterapkan browser (berdasarkan metrik font). letter-spacingjuga mendukung nilai negatif, yang akan mengencangkan tampilan teks, bukan melonggarkannya.
Tempat Menarik
- Nilai subpiksel: di sebagian besar browser, menetapkan nilai yang menghitung kurang dari
1pxakan mengakibatkan tidakletter-spacingditerapkannya. Saat ini Firefox 14+ dan IE 10 mendukung tata letak subpiksel; Opera dan WebKit tidak. Patch telah mendarat, jadi WebKit sekarang mendukung subpixel letter-spacing. - The
letter-spacingproperti animatable dengan CSS Transisi. - Salah satu cara untuk melawan jarak antar elemen blok sebaris adalah dengan melakukan setting
letter-spacing: -4px;pada container induk elemen blok sebaris. Anda kemudian perlu mengatur ulangletter-spacing: normal;elemen anak. - Jarang sekali ada ide yang baik untuk menggunakan spasi huruf kecil.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Bekerja | Bekerja | Bekerja | Paling | Bekerja | Bekerja | Bekerja |
Catatan tentang dukungan browser seluler: beberapa versi Opera Mobile, implementasi WebKit non-standar, dan browser NetFront tidak mendukung letter-spacing. Secara spesifik dirinci dalam tautan QuirksMode di atas.