Ukuran Font CSS
- Halaman Sebelumnya Gaya Font CSS
- Halaman Berikutnya Font Google CSS
Ukuran font
font-size
Properti mengatur ukuran teks
Dalam desain laman web, mengelola ukuran teks sangat penting. Namun, tidak boleh menggunakan penyesuaian ukuran font untuk membuat paragraf terlihat seperti judul, atau untuk membuat judul terlihat seperti paragraf.
Selalu gunakan tag HTML yang benar, seperti <h1> - <h6> untuk judul, dan <p> hanya untuk paragraf.
Nilai font-size dapat berupa ukuran absolut atau relatif
Ukuran absolut:
- Tetapkan ukuran teks ke ukuran yang ditentukan
- Tidak memungkinkan pengguna untuk mengubah ukuran teks di semua peramban (aksesibilitas buruk)
- Ukuran absolut sangat berharga saat ukuran fisik yang dihasilkan diketahui
Ukuran relatif:
- Tentukan ukuran yang berhubungan dengan elemen sekeliling
- Memungkinkan pengguna untuk mengubah ukuran teks di dalam peramban
Keterangan:Jika Anda tidak menentukan ukuran font, ukuran teks normal (seperti paragraf) adalah 16px (16px = 1em).
Menentukan ukuran font dalam piksel
Menggunakan piksel untuk menentukan ukuran teks dapat mengendalikan ukuran teks sepenuhnya:
Contoh
h1 { font-size: 40px; } h2 { font-size: 30px; } p { font-size: 14px; }
Petunjuk:Jika Anda menggunakan piksel, Anda masih dapat menggunakan alat skala untuk mengatur ukuran halaman yang seluruhnya.
Atur ukuran font menggunakan em
Untuk memungkinkan pengguna untuk mengatur ukuran teks (dalam menu peramban), banyak pengembang menggunakan em daripada piksel.
W3C menyarankan untuk menggunakan ukuran em.
1em sama dengan ukuran font saat ini. Ukuran teks standar di peramban adalah 16px. Jadi, ukuran standar 1em adalah 16px。
Dapat digunakan rumus ini untuk menghitung ukuran dari piksel ke em: pixels/16=em。
Contoh
h1 { font-size: 2.5em; /* 40px/16=2.5em */ } h2 { font-size: 1.875em; /* 30px/16=1.875em */ } p { font-size: 0.875em; /* 14px/16=0.875em */ }
Dalam contoh di atas, ukuran teks dalam satuan em sama dengan ukuran piksel di contoh sebelumnya. Namun, jika menggunakan ukuran em, ukuran teks dapat disesuaikan di semua peramban.
Sayangnya, versi lama Internet Explorer masih memiliki masalah. Saat memperbesar teks, ukurannya lebih besar daripada yang seharusnya, dan saat memperkecil teks, ukurannya lebih kecil.
menggunakan kombinasi persen dan Em
Contoh
body { font-size: 100%; } h1 { font-size: 2.5em; } h2 { font-size: 1.875em; } p { font-size: 0.875em; }
Kode kami saat ini berjalan dengan baik! Ia menampilkan ukuran teks yang sama di semua browser dan memungkinkan semua browser untuk mengukur atau mengatur ukuran teks!
Ukuran Font Berespon
Dapat digunakan vw
Penataan unit teks, yang berarti "lebar viewport" ("viewport width").
Dengan demikian, ukuran teks akan mengikuti ukuran jendela browser, silakan ubah ukuran jendela browser untuk melihat bagaimana ukuran fonta berubah skala:
Contoh
<h1 style="font-size:10vw">Hello World</h1>
Viewport (Viewport) adalah ukuran jendela browser. 1vw = 1% lebar viewport. Jika viewport lebar 50 cm, maka 1vw = 0,5 cm.
- Halaman Sebelumnya Gaya Font CSS
- Halaman Berikutnya Font Google CSS