Mengapakah pengisytiharan @font-face saya memaparkan jenis MIME yang salah dalam Chrome?

Pengisytiharan 'font-face' Memaparkan Jenis MIME yang salah dalam Chrome

Apabila menggunakan pengisytiharan @font-face di bawah:

<code class="css">@font-face {
    font-family: SolaimanLipi;
    src: url("font/SolaimanLipi_20-04-07.ttf");
}</code>

ia berfungsi dengan sempurna dalam Firefox tetapi gagal dalam Chrome. Selepas memeriksa elemen, mesej berikut muncul:

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

Untuk menangani isu keserasian merentas penyemak imbas ini, pertimbangkan perisytiharan @font-face serba boleh yang dicadangkan oleh Paul Irish:

<code class="css">@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}</code>

Pengisytiharan ini memenuhi keperluan pelayar yang berbeza dengan menawarkan:

• .eot untuk Internet Explorer
• .woff atau .ttf untuk penyemak imbas lain

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

Selain itu, tambahkan fail .htaccess untuk menentukan jenis fon:

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

Atas ialah kandungan terperinci Mengapakah pengisytiharan @font-face saya memaparkan jenis MIME yang salah dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!