font-face с неверным типом MIME в Chrome - PullRequest
Новая
       43

font-face с неверным типом MIME в Chrome

37 голосов
/ 29 октября 2010

Это объявление @font-face, которое я использовал: 

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

Это отлично работает в Firefox, но не в Chrome.После «проверить элемент» я получил следующее сообщение:

Ресурс интерпретируется как шрифт, но передается с приложением / октет-поток MIME-типа.

Любые предложения приветствуются.

Ответы [ 5 ]

76 голосов
/ 29 октября 2010

Как обычно, разные браузеры имеют разные потребности.Вот кросс-браузерное объявление @fontface, взятое из блога Paul Irish - 

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

.eot для IE, остальные браузеры используют .woff или .ttf. Есливам нужно сгенерировать различные типы из исходного шрифта, вы можете использовать генератор шрифтов лица Font Squirrel

. Вам также необходимо .htaccess к расположению шрифтов, добавив следующие типы: 

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
4 голосов
/ 24 января 2013

Ваши файлы шрифтов не передаются с правильным типом MIME.Это проблема конфигурации веб-сервера, которую можно легко исправить.

Для nginx объедините ее с конфигурацией существующих типов, обычно находящейся в каталоге /etc/nginx: 

types {
    application/vnd.ms-fontobject    eot;
    application/x-font-woff    woff;
    font/otf    otf;
    font/ttf    ttf;
}

Для Apache:добавьте эти строки к .htaccess, найденному в вашем корне документа: 

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
4 голосов
/ 18 октября 2011

Вы можете игнорировать предупреждение и, возможно, захотите рассмотреть этот пост по теме, Правильный тип MIME для шрифтов

В котором также упоминается следующее:

"Примечание. Поскольку для шрифтов TrueType, OpenType и WOFF не определены типы MIME, тип MIME указанного файла не учитывается."

источник: http://developer.mozilla.org/en/css/@font-face

0 голосов
/ 25 ноября 2013

Если вы запускаете сервер с nodeJS, это хороший модуль для отображения типов MIME

https://github.com/broofa/node-mime

0 голосов
/ 29 октября 2010

если вы можете редактировать файл .htaccess, попробуйте добавить 

addType font/ttf .ttf

, в противном случае вы можете использовать шрифт svg / svgz вместо

...