Bangun situs web hebat menggunakan CSS dan properti kontrol font

Di masa lalu, memodifikasi font halaman web biasanya berarti memasukkan teks yang relevan ke dalam tag dan menggunakan atribut untuk mengontrol warna, ukuran, dan gayanya. Saat ini, pendekatan ini tidak lagi dikenal karena memadukan gaya visual dengan markup konten sebenarnya. Hari ini kami merekomendasikan metode memusatkan informasi gaya font ke dalam file terpisah yang disebut Cascading Style Sheet (CSS).

Mengkonsentrasikan informasi font ke dalam satu file CSS memiliki banyak keuntungan yang jelas: mudah dioperasikan, tidak memerlukan perangkat lunak khusus, dan bekerja secara seragam di sebagian besar browser utama. Terlebih lagi, karena informasi terpusat di satu lokasi, mudah untuk mengubah tampilan visual halaman web: Anda cukup mengubah font atau warna style sheet utama, dan perubahan akan langsung "mengalir" ke seluruh halaman Anda. lokasi.

Kedengarannya menyenangkan, bukan? Jadi silakan baca terus karena dalam artikel ini saya akan membahas properti font CSS, yang dirancang untuk menggantikan elemen yang lama. Jika Anda memerlukan kontrol terpusat atas font, warna, ukuran teks, dan spasi halaman HTML Anda, itu adalah Alat yang ampuh untuk dimanfaatkan.

tipe kontrol

Atribut font mendefinisikan font yang digunakan oleh elemen terkait. Properti ini biasanya berisi daftar nama font yang dipisahkan koma; nama font yang mengandung spasi dapat diapit tanda kutip. Saat diterapkan, browser akan menggunakan font pertama yang ditemukan dalam daftar, atau font browser standar default jika tidak ditemukan font yang valid.

Listing A adalah contoh penerapan instruksi ini:

Daftar A

Gambar A menunjukkan outputnya.

Gambar A

Font_keluarga

Penting untuk diingat bahwa arahan ini sangat bergantung pada font yang ditampilkan oleh sistem klien; dalam contoh di atas, jika sistem tidak menampilkan font Bookman Old Style dan Verdana, font browser default akan digunakan. Untuk menghindari masalah ini, yang terbaik adalah menambahkan daftar nama font umum, seperti serif, sans-serif, atau kursif, setelah daftar nama font khusus; ini memberitahu browser untuk menggunakan font yang paling cocok di kelas font tersebut . Listing B adalah versi revisi dari contoh di atas yang secara tepat memecahkan masalah di atas.

Daftar B