Fontawesome не работает при обслуживании IIS
-
21-12-2019 - |
Вопрос
FontAwesome у меня не работает, когда я размещаю свое приложение на сервере IIS7.
В Firefox запрошенный URL-адрес закодирован в http://l2etest.kema.intra/fonts/fontawesome-webfont.ttf%3Fv=4.0.3
и я получаю 404.Когда я меняюсь %3F
к ?
все работает нормально.
То же самое происходит и в IE, но запрос идет к шрифту eot.
Вот что у меня есть в CSS (так же, как на странице FontAwesome):
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Я думаю, проблема в том, что IIS кодирует URL-адреса и вместо запроса ../fonts/fontawesome-webfont.eot?
запрос отправляется на ../fonts/fontawesome-webfont.eot%3F
.
Пожалуйста, не предлагайте удалить "? или '#' от URL.Они здесь специально и необходимы.Вопрос в том, как заставить IIS не кодировать URL таким образом.Любые подсказки будут оценены.
Редактировать:Кстати.описанная выше ситуация имеет место, когда в web.config я устанавливаю requestValidationMode и requestPathInvalidCharacters:
<httpRuntime shutdownTimeout="360" maxRequestLength="102400" enable="true" requestValidationMode="2.0" requestPathInvalidCharacters="" />
Без него я получаю 400 (Плохой запрос):У клиента обнаружено потенциально опасное значение Request.Path (?)
Как я могу исправить IIS для правильной работы шрифта?
Редактировать2: Хорошо, я нашел причину проблемы.Инструмент связывания SquishIt для MVC3 менял эти символы.Когда я исключаю font-awesome.css из пакета, все работает нормально.
Решение 4
Инструмент связывания SquishIt для MVC3 кодировал URL-адреса путей шрифтов, поэтому ../fonts/fontawesome-webfont.eot?
в файле css было изменено на ../fonts/fontawesome-webfont.eot%3F
.Обычно возвращается 400, поскольку %3F считается небезопасным.Если вы установите requestPathInvalidCharacters=""
тогда %3F считается безопасным, но очевидно, что файла ``../fonts/fontawesome-webfont.eot%3F` нет, поэтому 404.
Я удалил Fontawesome.css из комплекта, и все работает нормально.
Другие советы
Почему @font-face выдает ошибку 404 в файлах woff?
Добавьте типы 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>
Вы можете открыть IIS, указать на свой веб-сайт, в Сеанс IIS, выбирать MIME-типы.После отображения представления «Типы MIME» нажмите Добавлять -> В диалоге:
- Расширение имени файла: .woff
- Типы MiME: приложение/x-font-woff
нажмите ОК.
Сделанный.
Этот ответ не для вышеуказанной проблемы Но для тех, кто сталкивается с подобной ошибкой, но по другой причине и попадает в эту тему.
Я столкнулся с аналогичной проблемой, но позже обнаружил, что IIS пытается найти в папке файлы woff, eot с потрясающими шрифтами. MyIpAddress/fonts/fontawesome-webfont.woof
но у меня были файлы в другой папке.Перемещение fontawesome-webfont.eot, fontawesome-webfont.svg,fontawesome-webfont.ttf, fontawesome-webfont.woff
в мою папку шрифтов решил мою проблему
для меня только добавление загрузочной ссылки CDN решило проблему
для вашей страницы:
<head>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
...
</head>
Играть с сервером IIS рискованно, вместо этого я попробовал другой трюк, который оказался 100% успешным.
Шаг 1
Переименуйте имена файлов шрифтов, добавив .jpg в конце файлов.
Fontawesome-webfont.eot.jpg (аналогично)
Затем измените типы файлов в строках рендеринга шрифтов Fontawesome.css.
*/@font-face{font-family:'FontAwesome'; src:url('../fonts/fontawesome-webfont.eot.jpg?v=4.0.3'); src:url('../fonts/fontawesome-webfont.eot.jpg?#iefix&v=4.0.3') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff.jpg?v=4.0.3') format('woff'),url('../fonts/fontawesome-webfont.ttf.jpg?v=4.0.3') format('truetype'),url('../fonts/fontawesome-webfont.svg.jpg?v=4.0.3#fontawesomeregular') format('svg');
Если вы используете CodeIgniter под IIS7:
В файле web.config добавьте уфф к шаблон
<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>
Надеюсь, поможет !
Я перешел с woff2 на woff, и все пошло нормально.
Если вы добавляете FontAwesome через пакет, он может выбросить URL-адрес woff2.См. следующее решение в аналогичной теме, где CssRewriteUrlTransform
используется для переделки URL-адреса:https://stackoverflow.com/a/22700610/746984
Используйте этот cdn на своей странице index.html...
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">