Biasanya gaya halaman yang dilihat pengguna akan dikontrol oleh tiga lapisan. Lapisan pertama adalah gaya default browser, lapisan kedua adalah gaya yang ditentukan halaman web, dan lapisan ketiga adalah gaya yang ditentukan pengguna. Seperti CSS, gaya yang lebih baru memiliki prioritas lebih tinggi daripada gaya yang sebelumnya, yang berarti bahwa gaya yang ditentukan laman web dapat menggantikan gaya default browser, dan gaya yang ditentukan pengguna memiliki prioritas tertinggi. Situasi sebenarnya adalah meskipun browser kurang lebih menyediakan fungsi gaya yang ditentukan pengguna, sangat sedikit pengguna yang akan menyesuaikannya, dan umumnya mereka adalah pengguna tingkat lanjut. Gaya default browser sering kali memiliki pengaturan berbeda di browser berbeda, versi bahasa berbeda, dan bahkan versi sistem berbeda. Hal ini menyebabkan halaman yang langsung menggunakan gaya default ditampilkan sangat tidak konsisten di berbagai browser, sehingga ada masalah Reset YUI digunakan untuk mencoba menulis ulang pengaturan default browser untuk memastikan konsistensi dalam gaya setiap browser.
Ambil font sebagai contoh. Jenis font default, ukuran font, dan tinggi garis font setiap browser berbeda-beda, misalnya ketika IE8 versi China menampilkan halaman web di Windows XP, font defaultnya adalah Song Dynasty, tapi ini tentu saja. tidak demikian halnya dengan versi bahasa Inggris. Oleh karena itu, kita perlu mengatur gaya font default secara seragam untuk mencapai efek tampilan yang konsisten guna memastikan konsistensi desain dan meningkatkan efisiensi pengembangan.
Kedepannya, bersiaplah untuk menggunakan gaya font default berikut:
body{ font: 12px/1.5 arial; }
Sebagian besar karakter konten di halaman kami dalam bahasa Mandarin. Tidak ada keraguan bahwa font yang paling umum digunakan dan paling umum untuk menampilkan bahasa Mandarin di halaman web adalah Dinasti Song, tetapi Dinasti Song terlalu buruk dalam menampilkan bahasa Inggris, angka, dan simbol bahasa Inggris . seperti karakter ©. , jadi biasanya kami berharap untuk menampilkannya dengan gaya font yang lebih baik melalui CSS, dan kemudian menggunakan Dinasti Song untuk menampilkan simbol Cina dan Cina. Alasan saya memilih arial adalah karena:
tahoma
dan helvetica
tidak seberuntung itu.font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif;
Ini adalah pilihan yang sangat bagus, tetapi Anda juga akan menemukan bahwa versi baru Google, YAHOO, Youtube, Bing dan bahkan MSN menggunakan arial
sebagai font default pertama. Jadi arial
seharusnya dapat diterima sepenuhnya dalam hal keindahan dan keterbacaan.font-family:arial,sans-serif;
tetapi setidaknya dalam versi non-Cina. Win7 ketika pengkodeannya adalah GBK, IE8 akan merender font Lagu karena sans-serif
, menyebabkan font berubah bentuk. Inilah sebabnya Taobao perlu menambahkan font Lagu sebelum sans-serif
tetapi Google tidak perlu melakukan ini.font-family:arial;
yang dapat menggambarkan keamanan dalam melakukannya. Beberapa orang mungkin telah memperhatikan bahwa font Cina default yang ditampilkan di Firefox Cina adalah Microsoft Yahei. Hal ini karena Mouzhi Network telah memodifikasi gaya yang ditentukan pengguna tanpa izin dan tidak mengizinkan gaya halaman web untuk menggantikan gaya yang ditetapkan oleh browser. . Karena situasi serupa pula, sangat penting bagi kami untuk mendesain halaman web secara fleksibel. Salah satu masalah yang disebabkan oleh penggunaan font bahasa Inggris sebagai font default pertama adalah masalah penyelarasan ketika bahasa Mandarin, Inggris, dan simbol dicampur . Sebagian besar situasi dapat diselesaikan dengan mengatur tinggi garis dan hasLayout, tetapi itu tidak akan sempurna jika Anda mengubahnya font Mengubahnya menjadi "Song Ti" dapat menyelesaikan masalah sepenuhnya. Rupanya masalah ini hanya terjadi di IE. Oleh karena itu, jika website Anda jarang menggunakan bahasa Inggris, angka, dan simbol bahasa Inggris, maka langsung menyetel {font-family:5b8b4f53;}
juga merupakan pilihan yang masuk akal.
font:13px/1.231 arial,helvetica,clean,sans-serif;
yaitu, ukuran font default adalah 13px, tinggi garis adalah 13*1.231=16.003px, dan tinggi garis default adalah 1.231 kali. font bawaan. Untuk bahasa Cina, ukuran font yang umum digunakan adalah 12px, 14px, 16px, 18px dan ukuran genap lainnya. Mengatur tinggi garis ke angka genap di IE6 dan IE7 dapat menyelesaikan masalah perataan font dalam beberapa kasus khusus.line-height
, berhati-hatilah untuk tidak menggunakan unit (termasuk %) , karena node anak akan mewarisi nilai line-height yang dihitung, jadi saat menggunakan unit, browser akan menghitung line-height
sebagai nilai yang ditentukan pertama kali nilai tidak berubah seiring perubahan ukuran font, dan nilai tanpa unit adalah kelipatan dari font-size
penampung, jadi menyetelnya ke nilai tanpa unit adalah pilihan terbaik.line-height
dan layak untuk dibaca.arial
untuk mengurangi waktu pencarian browser.arial
pada dasarnya adalah font dengan nama terpendek yang dapat menghemat ukuran CSS.{font-family:5b8b4f53;}
, dan ketika menggunakan Microsoft Yahei, itu adalah {font-family:5fae8f6f96c59ed1;}
. Keuntungannya adalah menghindari masalah pengkodean, dan dapat didukung oleh semua browser utama secara bersamaan.