Я использую @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;
}

Я испытывал этот же симптом - 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.

По состоянию на 2017 год : шрифты Woff теперь стандартизированы как часть спецификации RFC8081 для типа mime font/woffи font/woff2.

Спасибо Себу Даггану: 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="font/woff" />
    </staticContent>    
  </system.webServer>

Ответ на этот пост был очень полезным и сэкономил много времени. Однако я обнаружил, что при использовании 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>

На самом деле ответ @Ian Robinson работает хорошо, но Chrome продолжит жаловаться с таким сообщением: « Ресурс интерпретируется как шрифт, но передается с помощью приложения MIME-типа / x-woff »

Если вы получите это, вы можете изменить

применение / х-Уофф

в

application / x -font -woff

и у вас больше не будет ошибок консоли Chrome!

(проверено на Chrome 17)

Решение для IIS7

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

1. Перейдите в корневой узел IIS и дважды щелкните параметр конфигурации «Типы MIME».

2. Нажмите ссылку «Добавить» на панели «Действия» в правом верхнем углу.

3. Это вызовет диалог. Добавьте расширение файла .woff и укажите «application / x-font-woff» в качестве соответствующего типа MIME.

Добавить MIME-тип для расширения имени файла .woff

Вот что я сделал, чтобы решить проблему в IIS 7

В дополнение к ответу Яна я должен был разрешить расширения шрифтов в модуле фильтрации запросов, чтобы он работал.

<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>

Запустите диспетчер сервера IIS (команда run: inetmgr). Откройте Mime Types и добавьте следующее

Расширение имени файла: .woff

MIME-тип : application / octet-stream

Я перепробовал массу вещей, связанных с разрешениями, типами MIME и т. Д., Но для меня все закончилось тем, что web.config удалил обработчик статических файлов в IIS, а затем явно добавил его обратно для каталогов, которые будут иметь статические файлы. Как только я добавил узел местоположения для своего каталога и добавил обработчик обратно, запросы перестали получать 404 с.

Если вы используете 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>

Надеюсь, поможет !

Это может быть очевидно, но это несколько раз сбило меня с 404s ... Убедитесь, что права доступа к папке шрифтов установлены правильно.

Также проверьте ваш URL переписчик. Он может выбросить 404, если что-то «странное» было найдено.

Если у вас нет доступа к конфигурации вашего веб-сервера, вы также можете просто переименовать файл шрифта, чтобы он заканчивался на svg (но сохранял формат). У меня отлично работает в Chrome и Firefox.

Если все еще не работает после добавления типов MIME, проверьте, включена ли «Анонимная аутентификация» в разделе «Аутентификация» на сайте, и убедитесь, что выбрали «Идентификатор пула приложений» в соответствии с данным снимком экрана.

Тип IIS MIME: .woff font / x-woff (не приложение / x-woff или application / x-font-woff)

Решил это:

Я должен был использовать метод Mo'Bulletproofer