Почему @font-face бросает ошибку 404 на файлы woff?
Я использую @font-face на сайте моей компании, и он работает / отлично выглядит. Кроме Firefox и Chrome будет выдавать ошибку 404 на . 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;
}
14 ответов:
я испытывал этот же симптом-404 на WOFF файлы в Chrome-и запускал приложение на сервере Windows с IIS 6.
Если вы находитесь в той же ситуации вы можете восстановить ее, выполнив следующие действия:
Решение 1
" просто добавьте следующие объявления типа MIME через диспетчер IIS (вкладка заголовки HTTP свойств веб-сайта):
.WOFF application / x-woff"обновление: по данным MIME Типы для шрифтов woff и Grsmto фактический тип MIME
application / x-font-woff (по крайней мере, для Chrome). х-вуф будет исправить 404s хром, х-шрифт-вуф будет исправить предупреждения хром.по состоянию на 2017 год: шрифты Woff теперь стандартизированы как часть спецификация RFC8081 к типу mime
font/woffиfont/woff2.
спасибо Себу Даггану: http://sebduggan.com/posts/serving-web-fonts-from-iis
решение 2
вы также можете добавить типы MIME в web config:
<system.webServer> <staticContent> <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type --> <mimeMap fileExtension=".woff" mimeType="font/woff" /> </staticContent> </system.webServer>
на самом деле ответ @Ian Robinson работает хорошо, но Chrome будет продолжать жаловаться с этим сообщением : "ресурс интерпретируется как шрифт, но передается с помощью приложения типа MIME / x-woff"
Если вы получите это, вы можете изменить от
application / x-woff
до
application / x-шрифт-музыка
и у вас больше не будет ошибок консоли Chrome !
(проверено на Chrome 17)
ответ на этот пост был очень полезным и большой экономии времени. Однако, я обнаружил, что при использовании
FontAwesome 4.50, мне пришлось добавить дополнительную конфигурацию дляwoff2тип расширения также, как показано ниже еще запросыwoff2тип давал ошибку 404 в инструментах разработчика Chrome в разделе консоль> ошибки.согласно комментарию S. 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>
решение для IIS7
Я также столкнулся с той же проблемой. Я думаю, что делать эту конфигурацию с уровня сервера было бы лучше, так как она применяется для всех веб-сайтов.
перейти к IIS корневой узел и дважды щелкните "типы MIME " параметр конфигурации
Нажмите кнопку" Добавить " ссылку в панели действий в правом верхнем углу.
в появившемся диалоговом окне. Добавлять.вуф расширение файла и укажите "application / x-font-woff" как соответствующий тип MIME.
добавить тип MIME для .WOFF расширение имени файла
вот что я сделал, чтобы решить эту проблему в IIS 7
запуск сервера Диспетчер служб IIS (команда "выполнить" команду inetmgr) Откройте типы Mime и добавьте следующие
расширение имени файла: .вофф
тип MIME: application / octet-stream
в дополнение к ответу Яна мне пришлось разрешить расширения шрифтов в модуле фильтрации запросов, чтобы он работал.
<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>
Я пробовал кучу вещей вокруг разрешений, типов mime и т. д., Но для меня это закончилось тем, что в интернете.config удалил статический обработчик файлов в IIS, а затем явно добавил его обратно в каталоги, которые будут иметь статические файлы. Как только я добавил узел расположения для моего каталога и добавил обработчик обратно, запросы перестали получать 404s.
Если вы используете CodeIgniter под IIS7:
в интернете.конфигурационный файл, добавить музыка до pattern
<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>надеюсь, что это помогает !
решить это:
Я должен использовать метод Mo'Bulletproofer
Это может быть очевидно, но он несколько раз сбивал меня с 404s... Убедитесь, что разрешения папки "шрифты" установлены правильно.
также проверьте свой URL-адрес рерайтера. Он может бросить 404, если что-то" странное " было найдено.
Если у вас нет доступа к конфигурации веб-сервера, вы также можете просто переименовать файл шрифта, чтобы он заканчивался в svg (но сохранить формат). Отлично работает для меня в Chrome и Firefox.
Если все еще не работает после добавления типов MIME, проверьте, включена ли "анонимная аутентификация" в разделе аутентификации на сайте и не забудьте выбрать "идентификатор пула приложений" в соответствии с данным снимком экрана.
Comments