Почему @font-face бросает ошибку 404 на файлы Woff?
Я использую @font-face
на моем сайте компании, и он работает/отлично выглядит. Кроме того, Firefox и Chrome будут вызывать ошибку 404 в файле .woff
. IE не выдает ошибку. У меня есть шрифты, расположенные в корне, но я попытался использовать шрифты в папке css и даже дал весь URL-адрес шрифта. Если удалить эти шрифты из моего css файла, я не получаю 404, поэтому я знаю, что это не синтаксическая ошибка.
Кроме того, я использовал инструмент fontsquirrels для создания шрифтов и кода @font-face
:
@font-face {
font-family: 'LaurenCBrownRegular';
src: url('/laurencb-webfont.eot');
src: local('☺'),
url('/laurencb-webfont.woff') format('woff'),
url('/laurencb-webfont.ttf') format('truetype'),
url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'FontinSansRegular';
src: url('/fontin_sans_r_45b-webfont.eot');
src: local('☺'),
url('/fontin_sans_r_45b-webfont.woff') format('woff'),
url('/fontin_sans_r_45b-webfont.ttf') format('truetype'),
url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
font-weight: normal;
font-style: normal;
}
Ответы
Ответ 1
У меня был тот же самый симптом - 404 в файлах woff в Chrome - и запускалось приложение на Windows Server с IIS 6.
Если вы находитесь в той же ситуации, вы можете исправить это, выполнив следующие действия:
Решение 1
"Просто добавьте следующие объявления типа MIME через IIS Manager (вкладка заголовков HTTP свойств веб-сайта): .woff application/x-woff"
Обновление в соответствии с MIME-типами для woff-шрифтов и Grsmto фактический тип MIME application/x-font-woff (для Chrome по крайней мере). x-woff исправит Chrome 404s, x-font-woff исправит предупреждения Chrome.
![IIS 6 MIME Types]()
Спасибо Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis
Решение 2
Вы также можете добавить типы MIME в веб-конфигурацию:
<system.webServer>
<staticContent>
<remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
</staticContent>
</system.webServer>
Ответ 2
На самом деле ответ @Ian Robinson работает хорошо, но Chrome будет продолжать жаловаться на это сообщение:
"Ресурс интерпретируется как" Шрифт ", но передается с помощью приложения типа MIME/x-woff"
Если вы это сделаете, вы можете перейти от
применение/х-Уофф
to
применение/х <Ь > -font -woff
и больше не будет ошибок консоли Chrome!
(проверено на Chrome 17)
Ответ 3
Ответ на этот пост был очень полезен, и большая экономия времени. Тем не менее, я обнаружил, что при использовании FontAwesome 4.50
мне пришлось добавить дополнительную конфигурацию для расширения типа woff2
, как показано ниже, остальные запросы для типа woff2
давали 404 ошибку в инструментах разработчика Chrome в консоли "Ошибки".
Согласно комментарию С .Serp, приведенная ниже конфигурация должна быть помещена в тег <system.webServer>
.
<staticContent>
<remove fileExtension=".woff" />
<!-- In case IIS already has this mime type -->
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<remove fileExtension=".woff2" />
<!-- In case IIS already has this mime type -->
<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
</staticContent>
Ответ 4
Решение для IIS7
Я также столкнулся с той же проблемой. Я думаю, что выполнение этой конфигурации с уровня сервера было бы лучше, поскольку оно применяется для всех веб-сайтов.
-
Перейдите в IIS root node и дважды щелкните "MIME Types"
вариант конфигурации
-
Нажмите ссылку "Добавить" на панели "Действия" в правом верхнем углу.
-
Это вызовет диалог. Добавьте расширение .woff и укажите
"application/x-font-woff" как соответствующий тип MIME.
Добавить MIME-тип для расширения имени файла .woff
![Перейти к MIME-типам]()
![Добавить тип MIME]()
Вот что я сделал для решения проблемы в IIS 7
Ответ 5
Запустите диспетчер IIS Server (команда запуска: inetmgr)
Откройте Mime Types и добавьте следующие
Расширение имени файла:.woff
Тип MIME: application/octet-stream
Ответ 6
В дополнение к ответу Ian я должен был разрешить расширения шрифтов в модуле фильтрации запросов, чтобы он работал.
<system.webServer>
<staticContent>
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
</staticContent>
<security>
<requestFiltering>
<fileExtensions>
<add fileExtension=".woff" allowed="true" />
<add fileExtension=".ttf" allowed="true" />
<add fileExtension=".woff2" allowed="true" />
</fileExtensions>
</requestFiltering>
</security>
</system.webServer>
Ответ 7
Решил:
Мне пришлось использовать метод Mo'Bulletproofer
Ответ 8
Это может быть очевидным, но это несколько раз приводило меня в порядок 404s... Убедитесь, что права на папки шрифтов установлены правильно.
Ответ 9
Также проверьте URL-адрес перезаписи. Он может выбросить 404, если будет найдено что-то "странное".
Ответ 10
Я попробовал массу вещей, связанных с разрешениями, типами mime и т.д., но для меня это закончилось тем, что web.config удалил обработчик Static в IIS и затем явно добавил его обратно для каталогов, которые имели бы статические файлы. Как только я добавил местоположение node для моего каталога и добавил обработчик обратно, запросы перестали получать 404s.
Ответ 11
Попробуйте снова преобразовать в OTF в Woff. У меня была аналогичная проблема, и разбор файлов был поврежден. Это хороший сайт для преобразования в различные типы шрифтов.
https://onlinefontconverter.com/
Ответ 12
Если у вас нет доступа к конфигурации вашего веб-сервера, вы также можете просто отредактировать файл шрифта, чтобы он закончился в svg (но сохраните формат). Работает отлично для меня в Chrome и Firefox.
Ответ 13
Если вы используете CodeIgniter в IIS7:
В файле web.config добавьте woff к шаблону
<rule name="Rewrite CI Index">
<match url=".*" />
<conditions>
<add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
</conditions>
<action type="Rewrite" url="index.php/{R:0}" />
</rule>
Надеюсь, что это поможет!
Ответ 14
Если все еще не работает после добавления типов MIME, проверьте, включена ли функция анонимной аутентификации в разделе "Проверка подлинности" на сайте, и обязательно выберите "Идентификатор пула приложений" в соответствии с данным снимком экрана.
![введите описание изображения здесь]()
Ответ 15
Тип Mime IIS:.woff font/x-woff (не приложение /x -woff, или application/x-font-woff)