FontAwesome не загружает шрифты локально и в электронном приложении
Я загрузил FontAwesome, используя npm, а затем скопировал css файл и шрифты в правильные папки в корневой директории моего электронного приложения, используя задачу копирования grunts.
Пока все хорошо. Все там, где это должно быть.
Теперь, когда я ссылаюсь на FontAwesome в своем приложении, значки не загружаются. Это ошибки, которые я получаю в консоли:
Не удалось декодировать загруженный шрифт:
file:///path/to/fonts/fontawesome-webfont.woff2? v = 4.4.0
Ошибка разбора OTS: не удалось преобразовать шрифт WOFF 2.0 в SFNT
Не удалось декодировать загруженный шрифт:
Файл:////path/to/fonts/fontawesome-webfont.woff v = 4,4,0
Ошибка разбора OTS: неправильный размер файла в заголовке WOFF
Не удалось декодировать загруженный шрифт:
Файл:////path/to/fonts/fontawesome-webfont.ttf v = 4,4,0
Ошибка разбора OTS: неверный entrySelector для каталога таблицы
Я уже пытался изменить файл FontAwesome css, удалив все параметры версии, но это не похоже на проблему. Проблемы возникают как при запуске приложения через electron .
, так и при просмотре html файла в браузере.
UPDATE
Чтобы ответить на некоторые комментарии:
- Эта проблема возникает как в электронном, так и в браузере (проверяется на хроме и firefox)
- Я использую новейшие версии обоих, FontAwesome (4.4.0) и Electron (0.32.1) (новая установка через npm).
- css загружается как:
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" >
Ответы
Ответ 1
Проблема была в моем файле grunt. Я попытался воспроизвести проблему, просто загрузив все зависимости вручную на своих веб-сайтах своих поставщиков и разместив их в соответствующей папке script моего проекта - внезапно это сработало.
Теперь я переключился на gulp, и он все еще работает. Не знаю, что я делал неправильно с хрюканьем, хотя...
Ответ 2
У меня была аналогичная проблема (возможно, этот ответ поможет кому-то). Я использую Maven для создания проектов (Java + JS). Maven Filter Plugin повреждены двоичные файлы шрифтов. Мне приходилось добавлять и исключать:
<resources>
<resource>
<directory>${project.sources}</directory>
<filtering>true</filtering>
<excludes>
<exclude>**/*.woff</exclude>
<exclude>**/*.ttf</exclude>
</excludes>
</resource>
<resource>
<directory>${project.sources}</directory>
<filtering>false</filtering>
<includes>
<include>**/*.woff</include>
<include>**/*.ttf</include>
</includes>
</resource>
</resources>
Ответ 3
В моей ситуации Git обрабатывал файл как текстовый файл и возился со своими "окончаниями строк". Это искажало файл.
Настройка .gitconfig для распознавания *.woff файлов как двоичных файлов, затем удаление файла и добавление новой копии из https://github.com/FortAwesome/Font-Awesome/raw/v4.2.0/fonts/fontawesome-webfont.woff решила проблему для меня.
Ответ 4
Для некоторых людей, которые развертываются в IIS, добавление этого файла в файл web.config(главный, а не тот, который находится внутри каталога Controller) может помочь.
<system.webServer>
<staticContent>
<remove fileExtension=".eot" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<remove fileExtension=".ttf" />
<mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />
</staticContent>
</system.webServer>
Ответ 5
попробуйте следующее: в начале вашего файла CSS вызовите шрифт в следующем виде.
@font-face {
font-family: FontAwesome;
src: url(../fonts/fontawesome-webfont.eot?v=4.0.3);
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: 400;
font-style: normal
}
Ответ 6
Если вы используете bower
, вы можете переписать свой font-face
на:
@font-face {
font-family: FontAwesome;
src: url(font-awesome/fonts/fontawesome-webfont.eot);
src: url(font-awesome/fonts/fontawesome-webfont.eot?#iefix) format('embedded-opentype'),
url(font-awesome/fonts/fontawesome-webfont.woff) format('woff'),
url(font-awesome/fonts/fontawesome-webfont.ttf) format('truetype'),
url(font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular) format('svg');
font-weight: 400;
font-style: normal
}
Ответ 7
Я уверен, что это решено, но это сработало для меня, поэтому... Я собираюсь оставить это здесь:
У меня была такая же проблема с шрифтом, который я использовал раньше. Оказалось, что это связано с проблемой FTP. Файл был загружен в виде текста (ASCII) вместо двоичного, что исказило файл. Я просто повторно загрузил файлы шрифтов, а затем все это сработало.