Bagaimana untuk Mencapai Keserasian Merentas Pelayar dengan @font-face dan Jenis MIME yang Betul?

Cross Browser @font-face dengan Jenis MIME Betul

Apabila menggunakan peraturan @font-face untuk membenamkan fon, nyatakan MIME yang betul jenis adalah penting untuk pemaparan yang betul merentas penyemak imbas. Dalam kes ini, Chrome memaparkan ralat disebabkan oleh jenis MIME yang salah.

Untuk menangani perkara ini, mari kita periksa pengisytiharan @font-face yang serasi dengan penyemak imbas:

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

• .eot untuk IE: IE memerlukan format fail .eot.
• .woff atau .ttf untuk Penyemak Imbas Lain: Penyemak imbas lain menyokong sama ada .woff atau .ttf.

Untuk menjana format fon ini daripada fon sumber, gunakan penjana muka fon Font Squirrel.

Selain itu, fail .htaccess diperlukan untuk menentukan jenis MIME untuk format fon:

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

Dengan melaksanakan perubahan ini, peraturan @font-face akan membenamkan fon dengan betul dalam Firefox dan Chrome, memastikan pemaparan yang konsisten merentas penyemak imbas.

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