The font-sizeproperti menentukan ukuran, atau tinggi, font. font-sizemempengaruhi tidak hanya font yang diterapkan, tetapi juga digunakan untuk menghitung nilai unit panjang em, rem, dan ex.
p ( font-size: 20px; )font-sizedapat menerima kata kunci, satuan panjang, atau persentase sebagai nilai. Penting untuk diperhatikan bahwa ketika dideklarasikan sebagai bagian dari fontproperti singkatan, font-sizeadalah nilai wajib. Jika tidak disertakan dalam singkatan, seluruh baris akan diabaikan.
Nilai panjang (misalnya px, em, rem, ex, dll) yang diterapkan font-sizetidak boleh negatif.
Kata kunci dan nilai mutlak
.element ( font-size: small; )Ini menerima nilai kata kunci absolut berikut:
xx-smallx-smallsmallmediumlargex-largexx-large
Nilai absolut ini dipetakan ke ukuran font tertentu seperti yang dihitung oleh browser. Tetapi Anda juga dapat menggunakan dua nilai kata kunci yang relatif terhadap ukuran font elemen induk.
Nilai absolut lainnya termasuk mm(milimeter), cm(sentimeter), in(inci), pt(poin) dan pc(picas). Satu titik sama dengan 1/72 inci sementara satu pica sama dengan 12 titik - nilai ini biasanya digunakan untuk dokumen yang dicetak.
Kata kunci relatif
.element ( font-size: larger; )largersmaller
Misalnya, jika elemen induk memiliki ukuran fonta small, elemen turunan dengan ukuran relatif yang ditentukan largerakan membuat ukuran font sama dengan mediumuntuk elemen turunan.
Nilai persentase
.element ( font-size: 110%; )Nilai persentase, seperti menyetel ukuran font 110%, juga relatif terhadap ukuran font elemen induk seperti yang ditunjukkan pada demo di bawah ini:
Lihat Pen qdbELL oleh CSS-Tricks (@ css-trick) di CodePen.
Unit em
.element ( font-size: 2em; )Unit em adalah unit relatif berdasarkan nilai yang dihitung dari ukuran font dari elemen induk. Ini berarti bahwa elemen anak selalu bergantung pada induknya untuk menyetel ukuran fontnya. Sebagai contoh:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )Pada contoh di atas, paragraf akan memiliki ukuran font 16px karena 1 x 16 = 16px sedangkan heading akan menjadi 32px karena 2 x 16 = 32px. Ada banyak keuntungan dari penskalaan tipe tergantung pada ukuran font dari elemen induk, yaitu kita dapat membungkus elemen di dalam sebuah wadah dan mengetahui bahwa semua anak akan selalu relatif satu sama lain:
Lihat Pena Mencari tahu bagaimana unit em bekerja dengan CSS-Tricks (@ css-trick) di CodePen.
Unit rem
Dalam kasus unit rem, bagaimanapun, ukuran font tergantung pada nilai elemen root (atau htmlelemen).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )Dalam contoh di atas, unit rem sama dengan 16px (karena diturunkan dari htmlelemen / root) dan dengan demikian ukuran font untuk semua elemen paragraf akan dihitung menjadi 24px (1,5 x 16 = 24). Tidak seperti unit em, paragraf akan mengabaikan gaya semua orang tuanya selain root.
Unit ini didukung oleh browser berikut:
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Bekerja | Bekerja | Bekerja | Bekerja | 10+ | Bekerja | Bekerja |
Unit ex
.element ( font-size: 20ex; )Untuk unit ex, 1ex akan sama dengan tinggi yang dihitung dari huruf kecil x dari elemen root. Jadi dalam contoh di bawah ini htmlelemen disetel ke 20pxdan semua ukuran font lainnya ditentukan oleh tinggi x font tersebut.
Lihat Pena Mencari tahu bagaimana ex unit bekerja dengan CSS-Tricks (@ css-trick) di CodePen.
Bereksperimen dengan demo di atas saya mengganti font-familypada htmlelemen untuk melihat bagaimana ukuran font-lain perubahan.
Unit viewport
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Unit area pandang , seperti vwdan vh, menyetel ukuran font elemen relatif terhadap dimensi area pandang:
- 1vw = 1% dari lebar viewport
- 1vh = 1% dari tinggi viewport
Jadi jika kita ambil contoh berikut:
.element ( font-size: 100vh; )Kemudian ini akan menyatakan bahwa ukuran font elemen harus selalu 100% dari tinggi viewport setiap saat (50vh akan menjadi 50%, 15vh akan menjadi 15% dan seterusnya). Dalam demo di bawah, coba ubah ukuran ketinggian contoh untuk melihat peregangan tipe:
Lihat tipe Pen Sizing dengan unit vh oleh CSS-Tricks (@ css-trick) di CodePen.
vw units berbeda karena menetapkan tinggi bentuk huruf dengan lebar viewport, jadi dalam demo di bawah ini Anda perlu mengubah ukuran jendela browser secara horizontal untuk melihat perubahan ini:
Lihat jenis Pen Sizing dengan unit vw oleh CSS-Tricks (@ css-trick) di CodePen.
Unit ini didukung oleh browser berikut:
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Penting untuk diperhatikan bahwa ada dua unit viewport lainnya: vmindan vmax. Yang pertama akan menemukan nilai vhdan vwdan mengatur ukuran font sebagai yang terkecil dari keduanya sementara vmaxmengatur ukuran font menjadi yang terbesar dari dua nilai ini.
Unit ch
.element ( font-size: 24ch; )The chUnit mirip dengan exunit yang akan mengatur font-ukuran elemen dalam kaitannya dengan lebar 0 (nol) mesin terbang dari font:
Lihat tipe Pen Sizing dengan unit ch oleh CSS-Tricks (@ css-trick) di CodePen.
Unit ini didukung oleh:
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Bekerja | 10+ | Bekerja | 9+ | Bekerja | Bekerja |