Вопрос:
Я делаю предварительные компиляции и запускаю приложение в режиме производства. После компиляции, когда я загружаю мою индексную страницу, я получил следующие предупреждения на консоли хром:
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; }
Я не знаю, чего не хватает с моей стороны. Я много искал, а также пробовал решение, но не получил никакого успеха. В режиме разработки он работает нормально, но не знает, почему он показывает квадрат в рабочем режиме.
Ответ №1
Я получил ту же ошибку, и в моем случае это оказалось из-за неправильного пути для объявления @font-face. Веб-инспектор никогда не жаловался на 404, поскольку сервер dev, который мы используем (live-server), был настроен для обслуживания индекса index.html по умолчанию на любых 404: с. Не зная никаких подробностей о вашей настройке, это может быть вероятным виновником.
Ответ №2
Если в IIS в качестве сервера и .net 4/4.5 могут отсутствовать определения расширения mime/file в 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>Ответ №3
У меня была та же проблема. ,
OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
(index):1 Failed to decode downloaded font:
Если вы получили это сообщение об ошибке при попытке зафиксировать ваш шрифт, то это проблема с .gitattributes
“warning: CRLF will be replaced by LF“
Решением для этого является добавление любого шрифта, с которым вы получаете проблему, в .gitattributes
*.ttf -text diff *.eot -text diff *.woff -text diff *.woff2 -text diff
Затем я удалил поврежденные файлы шрифтов, повторно применил новые файлы шрифтов и отлично работает.
Ответ №4
попробуйте
@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; }
и переименуйте файл в application.css.scss
Ответ №5
У меня был поврежден шрифт, хотя он, казалось, загружался без проблем, и в разделе “Источники” в Chrome devtools, казалось, отображалось, количество байтов было неправильным, поэтому я снова загрузил его и разрешил.
Ответ №6
У меня была такая же проблема, и это связано с тем, что git обрабатывал эти файлы как текст. Поэтому, проверяя файлы в агентах сборки, двоичный файл не поддерживался.
Добавьте это в свой .gitattributes файл и попробуйте.
*.eot binary *.ttf binary *.woff binary *.woff2 binary Ответ №7
При использовании angular-cli это то, что работает для меня:
<?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> Ответ №8
Я получал следующие ошибки:
Failed to decode downloaded font: […]/fonts/glyphicons-halflings-regular.woff2 OTS parsing error: invalid version tag
который был исправлен после загрузки исходного файла непосредственно из:
Проблема заключалась в том, что при загрузке файла произошла ошибка прокси (в нем было сообщение об ошибке HTML).
Ответ №9
Перейдите по адресу ниже на GitHub и загрузите каждый из файлов FontAwesome.
https://github.com/FortAwesome/font-awesome-sass/tree/master/assets/fonts/font-awesome
… но вместо щелчка правой кнопкой мыши и сохранения ссылки, нажмите на каждый из файлов и используйте кнопку “Загрузить”, чтобы сохранить их.
Я обнаружил, что сохранение ссылки при загрузке HTML-страницы, а не самого двоичного файла FontAwesome.
Как только у меня были все двоичные файлы, это сработало для меня.
Ответ №10
Моя проблема заключалась в том, что я объявлял два шрифта, и scss, кажется, ожидает, что вы объявите имя шрифта.
после вашего
@font-face{}
вы должны объявить
$my-font: «OpenSans3.0 or whatever»;
и для каждого шрифта.
: -)
Ответ №11
Для пользователей angular-cli и 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; }
Это сообщение может быть старым, но это решение, которое сработало для меня.
Ответ №12
Если вы используете Chrome, попробуйте добавить версию вашего шрифта opentype (OTF), как показано ниже:
… url(‘icomoon.otf’) format(‘opentype’), …
Ура!
Ответ №13
Если вы используете bootstrap, тогда обновите файл bootstrap css (bootstrap.min.css) и файлы шрифтов. Я решил проблему с этим решением.
Ответ №14
Я использую ASP.NET с IIS, и получается, что мне просто нужно добавить
MIME-тип для IIS: ‘.woff2’/’application/font-woff’
Ответ №15
После попытки множества других подходов и множества повторных установок и проверок я только что исправил эту проблему, очистив данные из Chrome (кешированные изображения и файлы), а затем обновив страницу.
Ответ №16
У меня была такая же проблема, когда я открыл и сохранил файлы .woff и. woff2 через Sublime Text с опцией EditorConfig end_of_line = lf.
Я просто скопировал файлы в папку шрифтов, не открывая их в Sublime, и проблема была решена.
Ответ №17
У меня была такая же проблема.
Добавление версии шрифта (например, ?v=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) в контекстном меню, должно быть достаточно для доступа к версии шрифта.
Ответ №18
Если другие ответы не помогли, попробуйте:
-
проверьте файл .htaccess
# Fonts
# Add correct content-type for fontsAddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType image/svg+xml .svg -
очистить кеш сервера
- очистить кеш браузера и перезагружать
Ответ №19
Проверьте свой файл шрифта CSS. (fontawesome.css/fontawesome.min.css), вы увидите следующее:
@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 }
вы увидите тег версии после имени расширения файла шрифта. Как:
-v=4.6.3
Вам просто нужно удалить этот тег из вашего файла CSS.
После удаления этого вам нужно перейти в папку со шрифтами, и вы увидите:
И, сформируйте эти файлы шрифтов, вам просто нужно удалить тег версии -v = 4.6.3 из имени файла.
Тогда проблема будет решена.
Ответ №20
Просто укажите формат @font-face следующим образом:
@font-face { font-family: ‘Some Family’; src: url(‘/fonts/fontname.ttf’) format(‘ttf’); /* and this for every font */ }Ответ №21For it is fixed by using below statement in app.web.scss $fa-font-path: «../../node_modules/font-awesome/fonts/» !default; @import «../../node_modules/font-awesome/scss/font-awesome»; Ответ №22
У меня была такая же проблема, это сработало для меня https://github.com/webpack/webpack/issues/1468