نوع MIME غير صحيح لـ @font-face في Chrome

عند محاولة تنفيذ خط مخصص باستخدام تعريف @font-face في Chrome ، قد يواجه المطورون رسالة خطأ تشير إلى "تم تفسير المورد كخط ولكن تم نقله باستخدام تطبيق من نوع MIME/تدفق ثماني بتات." تنبع هذه المشكلة من عدم التطابق بين نوع MIME لملف الخط والنوع المتوقع المحدد في الإقرار.

لحل هذا التناقض، يمكن استخدام إعلان @font-face الشامل الذي يلبي متطلبات المتصفح المختلفة . يضمن الإعلان التالي عبر المتصفحات التوافق مع كل من Chrome وFirefox:

@font-face {
  font-family: 'Font Name';
  src: url('FontName.eot');
  src: local('☺'),
         url('FontName.woff') format('woff'), url('FontName.ttf') format('truetype');
}

تم تخصيص الملف ‎.eot لبرنامج Internet Explorer، بينما تستخدم المتصفحات الأخرى تنسيقات ‎.woff أو ‎.ttf. لإنشاء هذه التنسيقات المختلفة من خطك المصدر، فكر في الاستفادة من منشئ وجه الخط الخاص بـ Font Squirrel.

بالإضافة إلى ذلك، يجب تكوين ملف .htaccess لتحديد أنواع MIME ذات الصلة لملفات الخطوط:

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

من خلال اتباع هذه التوصيات، يمكنك التأكد من عرض الخط المخصص بشكل صحيح عبر المتصفحات المختلفة، بما في ذلك Chrome.