Font Face не работает в IIS 8.0

118

У меня есть шрифт в моей программе, созданный из Font Squirrel, я просто не могу заставить его работать в IIS, он работает на localhost. Я добавил статью о application / font-woff в свои MIME-типы, но она по-прежнему не работает.

Context
--Fonts
----font location
--css files

CSS

@font-face {
    font-family: 'wallStreetFont';
    src: url('Fonts/subway-webfont.eot');
    src: url('Fonts/subway-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/subway-webfont.woff2') format('woff2'),
         url('Fonts/subway-webfont.woff') format('woff'),
         url('Fonts/subway-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

ИЗМЕНИТЬ ТЕКУЩИЙ MIME

Я использую стандартный шрифт IIS 8 MIME / x-woff

css iis fonts woff2 joetinger
источник
Как вы это вызываете? Вы пробовали образец вывода в архиве Font Squirrel?
Aibrean
Если вы используете IIS 8, вам не нужно добавлять mime-тип в вашу веб-конфигурацию для WOFF. Фактически, это было бы более вероятной ошибкой из-за наличия дубликата.
Колин Бэкон
@Aibrean, да, пример вывода работает
joetinger
@ColinBacon Я прочитал это после того, как опубликовал. Итак, у меня сейчас есть font / x-woff, он унаследован от IIS 8.0. Но все равно не удалось получить правильный шрифт
Joetinger

Ответы:

259

Приятно видеть, что WOFF2 включен в шрифты Font Squirrel! В то время как IIS 8 не требует добавления типа MIME, WOFFон понадобится для WOFF2. W3C рекомендует :

application/font-woff2

Для получения дополнительной информации WOFF2см. Здесь .

Чтобы добавить тип MIME в IIS, измените его Web.Configследующим образом:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <!-- ... -->
  <system.webServer>
    <!-- ... -->
    <staticContent>
      <!-- ... -->
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
    <!-- ... -->
  </system.webServer>
Колин Бэкон
источник
2
Я добавил, woff2но все равно ничего
joetinger
4
Если вы посмотрите в свой dev tools. Вы получаете 404, когда он пытается получить файл шрифта? Так что проверьте, что путь правильный и у вас есть разрешение на его просмотр в браузере.
Колин Бэкон,
Да, http://192.168.72.196:85/bundles/Fonts/subway-webfont.woff2но я не уверен, откуда они берут папку пакетов. Любая идея?
joetinger
4
Я предполагаю, что вы используете объединение и минификацию ASP.NET. Если вы установите это в конфигурации пакета BundleTable.EnableOptimizations = true. Ваш локальный хост должен вести себя так же, как и на вашем производственном сервере.
Колин Бэкон
1
Спасибо за помощь, теперь он работает. Это была комбинация woff2ошибки 404 и ошибки, которая закончилась ошибкой в ​​моем наборе. Спасибо!
joetinger
79

Чтобы шрифты woff и woff2 правильно работали в IIS, вам следует добавить следующие типы MIME в файл Web.Config.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>  
  <system.webServer>    
    <staticContent>
        <remove fileExtension=".woff" />
        <remove fileExtension=".woff2" />
        <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

Если вы все еще сталкиваетесь с ошибкой 404 в Google Chrome, вам следует очистить кеш браузера перед перезагрузкой страницы.

Варуна
источник
2
Спецификация теперь рекомендует использовать mimeType для woff как application / font-woff .
Стивен
2
У меня была проблема только с .woff2 404, и это сработало для меня. Я использовал только строки, относящиеся к woff2
Francisc0
26

Обратите внимание, что также можно настроить типы MIME в диспетчере IIS. Просто выберите веб-сайт и дважды щелкните значок «Типы MIME» под IIS на главной панели.

введите описание изображения здесь

После этого вы должны увидеть список всех существующих типов MIME и иметь возможность добавлять новые с помощью ссылки «Добавить ...» на правой панели.

Скотт Манро
источник
2
почему бы не использовать web.config? !!
Mojtaba Pourmirzaei
7
@MojtabaPourmirzaei Потому что не все являются системными администраторами. Это вся причина, по которой в IIS есть пользовательский интерфейс.
Alph.Dev
Если вы развертываете веб-сайт, отличный от .NET, в IIS, вам нужно сделать это таким образом (например, приложение Angular).
Джон Крюгер
0

Сегодня у меня возникла эта проблема при развертывании значков пользовательского интерфейса Metro4 для веб-решения и переключении с CDN на параметр Compiled.

Мой проект был разработан с использованием платформы WebSharper, но решение в любом случае не зависит от этих деталей реализации.

Короче говоря, у меня обнаружить , что я должен был добавить расширение файла, например , для .ttf, внутри securityсекции под system.webServerиз Web.config.

<security>
    <requestFiltering>
        <fileExtensions>
            <add fileExtension=".ttf" allowed="true" />
        </fileExtensions>
    </requestFiltering>
</security>

Такой же вариант конфигурации также доступен в настройках графического интерфейса IIS.

Графический интерфейс IIS

Джулио
источник