Bagaimana untuk Mencapai Keserasian Merentas Pelayar untuk Fon Tersuai dengan @font-face?

Keserasian Merentas Pelayar untuk Fon Tersuai dengan @font-face

Peraturan @font-face membenarkan kemasukan fon tersuai dalam laman web. Walau bagaimanapun, memandangkan penyemak imbas berbeza mempunyai keperluan yang berbeza-beza, keserasian merentas penyemak imbas kadangkala boleh menimbulkan cabaran.

Pertimbangkan pengisytiharan @font-face berikut:

@font-face {
    font-family: SolaimanLipi;
    src: url("font/SolaimanLipi_20-04-07.ttf");
}

Walaupun pengisytiharan ini mungkin berfungsi dengan lancar dalam Firefox, ia mungkin menghadapi ralat dalam Chrome. Ciri "inspect element" dalam Chrome mungkin memaparkan mesej:

Resource interpreted as font but transferred with MIME type application/octet-stream.

Untuk menyelesaikan isu ini dan memastikan keserasian merentas berbilang penyemak imbas, adalah penting untuk menggunakan pengisytiharan @font-face yang komprehensif yang merangkumi berbilang format fon . Perisytiharan serasi silang-pelayar berikut, seperti yang disediakan oleh Paul Irish, boleh digunakan:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Dalam pengisytiharan ini:

• .eot ialah format untuk Internet Explorer.
• Pelayar yang selebihnya menggunakan sama ada format .woff atau .ttf.

Jika perlu, anda boleh menjana format fon yang berbeza menggunakan alatan dalam talian seperti penjana muka fon Font Squirrel.

Selain itu, untuk menyampaikan fail fon dengan betul, anda perlu menambah fail .htaccess ke lokasi fon dan menentukan jenis MIME berikut:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Dengan mengikuti langkah ini, anda boleh memastikan bahawa fon tersuai anda dipaparkan dan dipaparkan dengan betul merentas penyemak imbas yang berbeza, meningkatkan pengalaman pengguna dan daya tarikan estetik halaman web anda.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Keserasian Merentas Pelayar untuk Fon Tersuai dengan @font-face?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!