Lalai `Bolder` Firefox adalah masalah untuk fon berubah -ubah

Fon Variabel Memudahkan penciptaan gaya fon yang pelbagai dari satu fail. Walau bagaimanapun, penyemak imbas semasa<strong></strong> dan<b></b> Elemen memberikan cabaran keserasian dengan pelbagai nilai fon-berat yang ditawarkan oleh fon berubah-ubah.

Perbezaan Pelayar dalam Font-Weight Lalai

<strong></strong> dan<b></b> elemen menyerlahkan teks. Pelayar mencapai ini dengan meningkatkan berat font. Ini berfungsi dengan baik secara amnya. Contohnya, MDN Web Docs menggunakan<strong></strong> dalam "mendapati masalah?" seksyen.

Isu ini timbul dengan font-font adat. Walaupun lalai adalah 400, font-weight menerima nilai dari 1 hingga 1000. Chrome dan Firefox membuat<strong></strong> Berbeza berdasarkan berat font teks.

Chrome dan Safari secara konsisten menggunakan fon-berat sebanyak 700, manakala Firefox menggunakan 400, 700, atau 900, bergantung kepada konteksnya.

Sumber percanggahan

Chrome dan Firefox menggunakan nilai font-weight yang berbeza dalam gaya ejen pengguna mereka:

 <code>/* Chrome and Safari */ strong, b { font-weight: bold; } /* Firefox */ strong, b { font-weight: bolder; }</code>

bold bersamaan dengan 700, manakala bolder adalah relatif. Standard HTML, bagaimanapun, mencadangkan bolder (sejak 2012), cadangan yang kini diikuti oleh Firefox. Stylesheet normalisasi yang popular menangani ketidakkonsistenan ini.

Menilai lalai

Lalai Firefox sejajar dengan standard. Tetapi adakah ia unggul? Kedua-dua lalai mempunyai kelemahan: Chrome's bold gagal pada fon-weight yang lebih tinggi (sekitar 700), manakala Firefox bolder bergelut dengan berat yang lebih rendah (sekitar 300).

Dalam senario terburuk Firefox,<strong></strong> Teks menjadi hampir tidak kelihatan. Imej di bawah menunjukkan teks dengan berat font 349 di Firefox. Bolehkah anda melihat perkataan di dalam<strong></strong> Tags? Firefox menjadikannya pada 400, hanya kenaikan 51 mata.

Kesimpulan

Apabila menggunakan fon nipis atau berubah-ubah di bawah 350 font-weight,<strong></strong> dan<b></b> mungkin tidak jelas di Firefox. Menetapkan secara manual font-weight untuk unsur-unsur ini adalah dinasihatkan untuk mengelakkan bergantung pada lalai suboptimal pelayar.

 <code>/* Example: Defining regular and bold font-weights */ body { font-weight: 340; } b, strong { font-weight: 620; }</code>

bolder bermasalah dengan fon berubah -ubah. Sebaik -baiknya, teks yang ditekankan harus mudah dilihat tanpa mengira berat teks di sekelilingnya. Peningkatan berat font yang konsisten (contohnya, peratusan) akan lebih baik. Kumpulan Kerja CSS membincangkan nilai-nilai font-weight berasaskan peratusan, seperti yang dicadangkan oleh Lea Verou:

 <code>/* Proposed percentage-based font-weight */ strong, b { font-weight: 150%; }</code>

Peningkatan 150% mungkin menjadi lalai yang lebih baik daripada pendekatan bold / bolder semasa untuk fon berubah -ubah.

Atas ialah kandungan terperinci Lalai `Bolder` Firefox adalah masalah untuk fon berubah -ubah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!