Как убрать ошибку про глификоны-халфлинги-regular.woff2 not found

Приложение ASP.NET MVC4 Bootstrap 3 запускается из Microsoft Visual Studio Express 2013 для веб-среды IDE.

Консоль Chrome всегда показывает ошибку

http://localhost:52216/admin/fonts/glyphicons-halflings-regular.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)

Этот файл существует в каталоге шрифтов в обозревателе решений. Действие сборки установлено на «Содержимое», а Копировать в выходной каталог - «Не копировать, как в других файлах шрифтов». Bootstrap 3 добавляется в решение с помощью NuGet. Как это исправить, чтобы не возникала эта ошибка? Приложение правильно отображает значки Glyphicon и FontAwesome. Эта ошибка всегда возникает при запуске приложения.

Эта проблема возникает из-за того, что IIS не знает MIME-типов woffи woff2файлов.

Решение 1:

Добавьте эти строки в свой проект web.config:

 <system.webServer>
  ...
  </modules>
    <staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>

Решение 2:

На странице проекта IIS:

Шаг 1. Перейдите на домашнюю страницу IIS вашего проекта и дважды щелкните MIME Typesкнопку:

Шаг 2: Нажмите Addкнопку в Actionsменю:

Шаг 3: В середине экрана появляется окно, в которое вам нужно добавить две строки из решения 1:

В моем случае я только что загрузил недостающий файл прямо отсюда: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

Добавьте это в свой html, если у вас есть доступ только к html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Для меня проблема была двоякой: во-первых, версия IIS, с которой я имел дело, не знала о .woff2типе MIME, а только о .woff. Я исправил это с помощью диспетчера IIS на уровне сервера, а не на уровне веб-приложения, поэтому параметр не переопределялся при каждом развертывании нового приложения. (В диспетчере IIS я перешел к типам MIME и добавил недостающие .woff2, а затем обновил .woff.)

Во-вторых, что более важно, я собирал bootstrap.cssвместе с некоторыми другими файлами как "~/bundles/css/site". Между тем мои файлы шрифтов были в формате "~/fonts". bootstrap.cssищет шрифты глификона "../fonts", которые переведены на "~/bundles/fonts"- неправильный путь.

Другими словами, мой путь к пакету был на один каталог слишком глубоким. Я переименовал его в "~/bundles/siteCss"и обновил все ссылки на него, которые я нашел в моем проекте. Теперь bootstrap искал "~/fonts"файлы глификонов, которые работали. Задача решена.

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

Я попробовал все приведенные выше предложения, но на самом деле моя проблема заключалась в том, что мое приложение искало папку / font и ее содержимое (.woff и т. Д.) В app / fonts, но моя папка / fonts была на том же уровне, что и / app. Я переместил / fonts в / app, и теперь он отлично работает. Надеюсь, это поможет кому-нибудь еще в поисках ответа в Интернете.

Эта проблема возникает из-за того, что IIS не находит фактическое расположение mime-типов файлов woff2. Правильно установите URL-адрес font-face, а также сохраните font-family как glyphicons-halflings-regular в вашем файле CSS, как показано ниже.

@font-face {
font-family: 'glyphicons-halflings-regular'; 
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}