Я выполняю предварительную компиляцию активов и запускаю приложение в производственном режиме. После компиляции при загрузке моей индексной страницы я получаю следующие предупреждения в консоли chrome:
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Проблема в том, что не загружаются иконки, вместо них отображаются квадратики.
Мы использовали пользовательские шрифты и код:
@font-face {
font-family: 'icomoon';
src: font-url('icomoon.eot');
src: font-url('icomoon.eot?#iefix') format('embedded-opentype'),
font-url('icomoon.ttf') format('truetype'),
font-url('icomoon.woff') format('woff'),
font-url('icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Я не знаю, чего не хватает с моей стороны. Я много искал и также пробовал решение, но не получил никакого успеха. В режиме разработки все работает нормально, но не знаю, почему в режиме производства он показывает квадрат.
Я получил точно такую же ошибку, и в моем случае это оказалось из-за неправильного пути для объявления @font-face
. Веб-инспектор никогда не жаловался на ошибку 404, поскольку сервер, который мы используем (live-server), был настроен на выдачу стандартного index.html при любых ошибках 404. Не зная никаких подробностей о вашей настройке, это может быть вероятным виновником.
Если в качестве сервера используется IIS и .net 4/4.5, возможно, отсутствуют определения mime / расширения файлов в Web.config - например, так:
<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" />
</staticContent>
</system.webServer>
У меня был тот же вопрос., Ошибка ОЦ разбора: не удалось преобразовать формата WOFF шрифт 2.0 для SFNT (индекс):1 не удалось расшифровать скачали шрифт: http://dev.xyz/themes/custom/xyz_theme/fonts/xyz_rock/rocksansbold/Rock-SansBold.woff2
Если вы получили это сообщение об ошибке при попытке совершить свой шрифт, то это проблема .gitattributes по на " предупреждение: эти символы не экранируются будет заменен если в`"
Решение этой проблемы является добавление в зависимости от шрифта, который вы получаете вопрос С в .gitattributes по
*.ttf -text diff
*.eot -text diff
*.woff -text diff
*.woff2 -text diff
Затем я удалил поврежденные файлы шрифтов и переклеить новые файлы шрифтов и работает отлично.
попробовать
@font-face {
font-family: 'icomoon';
src: asset-url('icomoon.eot');
src: asset-url('icomoon.eot?#iefix') format('embedded-opentype'),
asset-url('icomoon.ttf') format('truetype'),
asset-url('icomoon.woff') format('woff'),
asset-url('icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
в
и переименовать ваш файл в приложении.УСБ.СКС`
У меня была та же проблема и это из-за ЖКТ обрабатывать эти файлы как текст. Так, во время проверки файлов в агенты построения, бинарные не поддерживается.
Добавьте это в ваш `.gitattributes файл и попробовать.
*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary
При использовании `угловой-кли, это то, что работает для меня:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<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="application/font-woff2" />
<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
<rewrite>
<rules>
<rule name="AngularJS" stopProcessing="true">
<match url="^(?!.*(.bundle.js|.bundle.js.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.chunk.js|.chunk.js.map|.png|.jpg|.ico|.eot|.svg|.woff|.woff2|.ttf|.html)).*$" />
<conditions logicalGrouping="MatchAll">
</conditions>
<action type="Rewrite" url="/" appendQueryString="true" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Я получаю следующие ошибки:
Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag
который был зафиксирован после загрузки файлов RAW непосредственно с:<БР> https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2
Проблема в том, что произошла ошибка прокси-сервера при скачивание файла (в нем содержатся HTML-сообщение об ошибке).
Переходим по адресу ниже на GitHub и скачать каждый из FontAwesome файлов.
https://github.com/FortAwesome/font-awesome-sass/tree/master/assets/fonts/font-awesome
...но вместо щелчка правой кнопкой мыши и сохранить ссылку как, нажмите на каждый из файлов и использовать 'скачать' кнопку, чтобы сохранить их.
Я обнаружил, что сохраняя ссылку как загрузить HTML-страницу, а не сам FontAwesome двоичный файл.
После того, как я все бинарники он работал для меня.
Просто формат шрифта @следующим образом:
в
@font-face {
font-family: 'Some Family';
src: url('/fonts/fontname.ttf') format('ttf'); /* and this for every font */
}
в
Моя проблема заключалась в том, что я объявлял два шрифта, а scss, похоже, ожидает, что вы объявите имя шрифта.
после вашего
@font-face{}' вы должны объявить
$my-font: "OpenSans3.0 или любой другой";`.
и так для каждого_ шрифта-фэйса.
:-)
Для угловые-интерфейс командной строки и webpack пользователей, я подозревал, что есть какая-то проблема при импорте шрифтов в CSS-файл , то просьба представить URL-адрес, закодированных в одинарные кавычки следующим образом -
@font-face {
font-family: 'some_family';
src: url('./assets/fonts/folder/some_family-regular-webfont.woff2') format('woff2'),
url('./assets/fonts/folder/some_family-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Этот пост может быть устаревшей , но это решение, которое работало для меня .
После попытки много других подходов, и много повторно устанавливает и проверяет, я просто Исправлена проблема, очистив данные от кром (кэшированных изображений и файлов), а потом обновить страницу.
У меня была такая же проблема, когда я открыла и сохранила.вуфи
. woff2файлы через возвышенное текст с опцией
EditorConfig`end_of_line = ЛФ
.
Я просто скопировал файлы в папку шрифт, не открывая их в возвышенное и проблема была решена.
Проверьте свой шрифт's для CSS-файле. (fontawesome.в CSS/fontawesome.мин.УСБ), вы увидите подобное:
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot-v=4.6.3.htm');
src: url('../fonts/fontawesome-webfont.eot#iefix-v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2-v=4.6.3.htm') format('woff2'), url('../fonts/fontawesome-webfont.woff-v=4.6.3.htm') format('woff'), url('../fonts/fontawesome-webfont.ttf-v=4.6.3.htm') format('truetype'), url('../fonts/fontawesome-webfont.svg-v=4.6.3.htm#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal
}
вы увидите тег версии после того как ваш шрифт'с расширением имени файла. Как:
-в=4.6.3
Нужно просто удалить этот тег из файла CSS. После удаления, вам нужно перейти к папке Fonts, и вы увидите:
И форма этих шрифтов's файлов нужно просто удалить тег версия -в=4.6.3 от имени файла.
Тогда проблема будет sloved.
Я использую ASP.NET с IIS и получается, мне просто нужно добавить тип MIME в IIS: '.woff2' / 'заявление/шрифт-вуф'
Если используете Chrome, то попробуйте добавить шрифты OpenType (ОТФ) версию вашего шрифта, как показано ниже:
...
url('icomoon.otf') format('opentype'),
...
Ура!
Я'вэ была та же проблема.
Добавление версию шрифта (например,`?в=1.101) для URL-адреса шрифта следует сделать трюк ;)
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url('../fonts/open-sans-v15-latin-600.eot?v=1.101'); /* IE9 Compat Modes */
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v15-latin-600.woff2?v=1.101') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v15-latin-600.woff?v=1.101') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
Щелчок (правой кнопкой мыши) на шрифт'ы в формате TTF версии и опции-то "информация" по (MAC и OSX) и"Свойства" и (для Windows) в контекстном меню должно быть достаточно, чтобы открыть шрифт версия.
Если других ответов не'т работу, попробуйте:
<службы># шрифты в
</службы><БР>
в <промежуток># добавить правильный тип содержимого для шрифтов в
</службы><БР>
Применение AddType/донгов.МС-fontobject .СРВ<БР>
AddType применение/х-шрифт ТТФ .СТТ<БР>
AddType применение/х-шрифтов-OpenType шрифтов .ОТФ<БР>
AddType применение/х-шрифт-вуф .вуф<БР>
AddType применение/х-шрифтов woff2 .woff2<БР>
AddType изображения/формат svg+xml-файле .СВГ`<БР>