Mengapa Papak Roboto dalam Fon Google Gagal Dipaparkan dalam Chrome, dan Bagaimana Saya Boleh Membetulkannya?

Menyelesaikan Masalah Penyampaian Fon Google dalam Chrome

Adalah perkara biasa untuk menghadapi masalah pemaparan apabila menggunakan Fon Google dalam pembangunan web. Isu khusus yang timbul kebelakangan ini mempengaruhi tapak web yang menggunakan Roboto Slab dalam Chrome. Walaupun fon muncul seperti yang diharapkan dalam penyemak imbas lain, ia kekal tidak kelihatan semasa halaman awal dimuatkan dalam Chrome.

Setelah disiasat, ini nampaknya merupakan pepijat yang diketahui dalam Chrome. Punca masalah ialah Chrome kadangkala gagal untuk memaparkan fon tersuai dengan betul semasa pemuatan halaman awal. Walau bagaimanapun, sebaik sahaja sifat CSS dicetuskan semula (cth., dengan menuding pada pautan yang digayakan), fon menjadi kelihatan.

Untuk menyelesaikan masalah ini, penyelesaian telah dibangunkan yang bergantung sepenuhnya pada CSS. Dengan menambahkan kod berikut pada helaian gaya anda, anda boleh memastikan bahawa Chrome memaparkan fon dengan betul:

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

Penyelesaian ini pada asasnya memaksa Chrome mengecat semula teks, menyelesaikan isu tersebut. Perlu diingat bahawa ini adalah penyelesaian CSS sahaja dan mungkin tidak sesuai untuk semua situasi. Namun begitu, ia menyediakan cara yang berkesan untuk menangani masalah pemaparan Google Font dalam Chrome.

Atas ialah kandungan terperinci Mengapa Papak Roboto dalam Fon Google Gagal Dipaparkan dalam Chrome, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!