The font-sizeharta menentukan saiz, atau ketinggian, fon. font-sizemempengaruhi bukan sahaja fon yang digunakan, tetapi juga digunakan untuk menghitung nilai unit em, rem, dan ex length.
p ( font-size: 20px; )font-sizedapat menerima kata kunci, unit panjang, atau peratusan sebagai nilai. Penting untuk diperhatikan bahawa apabila dinyatakan sebagai sebahagian daripada fontharta tanah, font-sizeadalah nilai wajib. Sekiranya ia tidak termasuk dalam singkatan, keseluruhan baris akan diabaikan.
Nilai panjang (misalnya px, em, rem, ex, dll) yang digunakan font-sizetidak boleh negatif.
Kata kunci dan nilai mutlak
.element ( font-size: small; )Ia menerima nilai kata kunci mutlak berikut:
xx-smallx-smallsmallmediumlargex-largexx-large
Nilai mutlak ini dipetakan ke ukuran fon tertentu seperti yang dihitung oleh penyemak imbas. Tetapi anda juga boleh menggunakan dua nilai kata kunci yang relatif dengan ukuran fon elemen induk.
Nilai mutlak lain termasuk mm(milimeter), cm(sentimeter), in(inci), pt(titik) dan pc(picas). Satu titik sama dengan 1/72 inci sementara satu pica sama dengan 12 mata - nilai ini biasanya digunakan untuk dokumen bercetak.
Kata kunci relatif
.element ( font-size: larger; )largersmaller
Sebagai contoh, jika elemen induk memiliki ukuran font small, elemen anak dengan ukuran relatif yang ditentukan largerakan menjadikan ukuran fon sama dengan mediumelemen anak.
Nilai peratusan
.element ( font-size: 110%; )Nilai peratusan, seperti menetapkan ukuran font 110%, juga relatif terhadap ukuran font elemen induk seperti yang ditunjukkan dalam demo di bawah:
Lihat Pen qdbELL oleh CSS-Tricks (@ css-tricks) di CodePen.
Unit em
.element ( font-size: 2em; )Unit em adalah unit relatif berdasarkan nilai yang dikira ukuran fon elemen induk. Ini bermaksud bahawa elemen anak selalu bergantung kepada ibu bapa mereka untuk menetapkan ukuran fon mereka. Sebagai contoh:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )Dalam contoh di atas, perenggan akan mempunyai ukuran fon 16px kerana 1 x 16 = 16px sedangkan tajuknya akan 32px kerana 2 x 16 = 32px. Terdapat banyak kelebihan untuk meningkatkan skala bergantung pada ukuran fon elemen induk, iaitu kita dapat membungkus elemen di dalam bekas dan mengetahui bahawa semua anak akan selalu saling berhubungan:
Lihat Pena Mengetahui bagaimana unit em berfungsi oleh CSS-Tricks (@ css-tricks) di CodePen.
Unit rem
Dalam kes unit rem, ukuran font bergantung pada nilai elemen akar (atau htmlelemen).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )Dalam contoh di atas, unit rem sama dengan 16px (kerana ia diwarisi dari html/ root element) dan dengan itu ukuran fon untuk semua elemen perenggan akan dikira menjadi 24px (1.5 x 16 = 24). Tidak seperti unit em, perenggan itu akan mengabaikan gaya semua ibu bapanya selain dari akarnya.
Unit ini disokong oleh penyemak imbas berikut:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Berfungsi | Berfungsi | Berfungsi | Berfungsi | 10+ | Berfungsi | Berfungsi |
Unit bekas
.element ( font-size: 20ex; )Untuk unit ex, 1ex akan sama dengan ketinggian yang dikira dari huruf kecil x unsur akar. Jadi dalam contoh di bawah htmlelemen ditetapkan 20pxdan semua ukuran fon lain ditentukan oleh ketinggian x fon tertentu.
Lihat Pena Mengetahui bagaimana ex unit berfungsi oleh CSS-Tricks (@ css-tricks) di CodePen.
Percubaan dengan demo di atas saya menggantikan font-familypada htmlelemen untuk melihat bagaimana yang lain font-saiz perubahan.
Unit pandang arah
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Unit viewport, seperti vwdan vh, menetapkan ukuran fon elemen relatif terhadap dimensi viewport:
- 1vw = 1% lebar pandangan
- 1vh = 1% daripada ketinggian pandangan
Oleh itu, jika kita mengambil contoh berikut:
.element ( font-size: 100vh; )Maka ini akan menyatakan bahawa ukuran fon elemen harus selalu 100% dari ketinggian ruang pandang sepanjang masa (50vh akan 50%, 15vh menjadi 15% dan seterusnya). Dalam demo di bawah ini, cuba ubah ukuran ketinggian contoh untuk melihat jenis urutan:
Lihat jenis Pen Sizing dengan unit vh oleh CSS-Tricks (@ css-tricks) di CodePen.
vw unit berbeza kerana menetapkan ketinggian bentuk huruf dengan lebar ruang pandang, jadi dalam demo di bawah ini anda perlu mengubah saiz tetingkap penyemak imbas secara mendatar untuk melihat perubahan ini:
Lihat jenis Pen Sizing dengan unit vw oleh CSS-Tricks (@ css-tricks) di CodePen.
Unit-unit ini disokong oleh penyemak imbas berikut:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Adalah penting untuk komen terdapat dua unit viewport lain: vmindan vmax. Yang pertama akan mencari nilai vhdan vwdan menetapkan ukuran fon sebagai yang terkecil dari dua sementara vmaxmenetapkan ukuran fon ke yang terbesar dari kedua nilai ini.
Unit ch
.element ( font-size: 24ch; )The chunit adalah sama dengan exunit kerana ia akan menetapkan saiz fon bagi unsur yang berhubung dengan lebar (sifar) glif fon 0:
Lihat jenis Pen Sizing dengan unit ch oleh CSS-Tricks (@ css-tricks) di CodePen.
Unit ini disokong oleh:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Berfungsi | 10+ | Berfungsi | 9+ | Berfungsi | Berfungsi |