Fon Sistem Chrome Snafu

Pada akhir tahun lepas, pepijat berlaku dalam pelayar Chrome, sekurang -kurangnya pada sistem MAC (keadaan di platform lain tidak diketahui), fon sistem terlalu nipis di bawah saiz kecil, dan jarak kata terlalu ketat; Dalam saiz yang besar, ia kelihatan terlalu tebal dan jarak kata terlalu luas. Nasib baik, isu ini telah ditetapkan. Walau bagaimanapun, dalam tempoh masalah itu, saya menyerahkan fon sistem dan beralih ke fon lain. Walaupun prestasi jatuh sedikit, kesan visual bertambah baik.

Sekarang masalah yang lebih serius berlaku: fon sistem tidak boleh berani. Ini sangat buruk kerana banyak laman web menggunakan timbunan font sistem kerana ia mempunyai dua kelebihan utama: 1) membantu laman web untuk kelihatan konsisten dengan sistem operasi; 2) Mempunyai prestasi yang sangat baik kerana laman web tidak perlu memuat turun dan memaparkan fon tersuai.

Jon Henshaw melaporkan mengenai perkara ini:

... Bug ini menarik perhatian Adam Argyle, pemaju Visbug dan penginjil pemaju CSS Chrome Google. Argyle mencipta laporan bug kromium, tetapi pasukan pembangunan kromium akhirnya memutuskan bahawa ini tidak akan menghalang pembebasan versi 81. Ini menyebabkan tapak seperti Coywolf gagal menggunakan teks berani untuk fon yang lebih besar daripada 16px (mis., Per tajuk).

Oleh kerana pasukan Chromium mengumumkan skip versi 82 ​​dan akan melepaskan versi 83 pada pertengahan Mei, bug itu tidak akan ditetapkan dalam versi 82. Argyle memberi jaminan kepada semua orang dalam laporan Bug GitHub awal bahawa ia akan ditetapkan dalam versi 83.

Jadi kita perlu menunggu lebih kurang empat minggu lagi. Šime Vidas mengesyorkan menggunakan fon Helvetica buat sementara waktu sebagai penyelesaian sementara:

 <code>body { font-family: -apple-system, Helvetica; }</code>

Saya fikir versi lama Chrome/MACOS masih boleh mendapat manfaat daripada fon sistem kerana kemasukan -apple-system ? Saya tidak pasti.

Ini membuatkan saya sedikit keliru. Apabila saya mula -mula mendengar tentang menggunakan timbunan font sistem, terdapat -apple-system dan BlinkMacSystemFont dan anda harus menggunakannya dalam timbunan font dalam susunan ini. Kemudian terdapat -system-ui , yang nampaknya berfungsi dengan baik, yang hebat kerana ia jelas tidak terlalu bergantung pada sistem Mac. Tetapi terdapat juga system-ui (tanpa permulaan Dash), yang nampaknya melakukan perkara yang sama, saya tidak pasti yang betul. Kini nampaknya rancangan itu adalah ui-sans-serif dan fon yang berkaitan (seperti ui-serif dan ui-monospace ). Saya suka idea itu, tetapi saya berharap untuk mendapatkan arahan yang jelas dari vendor pelayar mengenai penggunaan yang disyorkan. Adakah kita dalam keadaan ini?

 <code>/* 只是一个猜测... */ body { font-family: ui-sans-serif, system-ui, -system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji"; }</code>

Satu lagi pemerhatian saya adalah ... apabila saya cuba menyalin pepijat ini pada Chrome 81, pada mulanya saya fikir "Anehnya, ia berfungsi dengan baik pada sistem saya" kerana saya cuba untuk membantah teks 16px lalai. Saya perhatikan bahawa apabila saiz fon adalah 20px atau lebih besar, masalah timbul:

Bramus mencadangkan penyelesaian lain: Gunakan fon antara.

Atas ialah kandungan terperinci Fon Sistem Chrome Snafu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!