fontawesome не может загрузить шрифты локально и в электронном приложении

<p>я скачал fontawesome, используя npm, а затем скопировал css-файл и шрифты в нужные папки в корневой директории моего электронного приложения, используя задачу копирования grunts. </p><p>все идет нормально. все там, где это должно быть.</p><p>теперь, когда я ссылаюсь на fontawesome в моем приложении, значки не загружаются. это ошибки, которые я получаю в консоли:</p><blockquote> <p>не удалось декодировать загруженный шрифт: <br> файл: ///path/to/fonts/fontawesome-webfont.woff2 v = 4,4,0 <br> ошибка анализа ots: не удалось преобразовать шрифт woff 2.0 в sfnt </p> <p>не удалось декодировать загруженный шрифт: <br> файл: ////path/to/fonts/fontawesome-webfont.woff v = 4,4,0<br> ошибка анализа ots: неверный размер файла в заголовке woff </p> <p>не удалось декодировать загруженный шрифт:<br> файл: ////path/to/fonts/fontawesome-webfont.ttf v = 4,4,0<br> ошибка синтаксического анализа ots: неверный entryselector для каталога таблиц</p> </blockquote><p>я уже пытался изменить css-файл fontawesome, удалив все параметры версии, но, похоже, это не проблема. проблемы возникают как при запуске приложения через <code>electron .</code>, так и при просмотре html-файла в браузере. </p><p><strong>обновление</strong></p><p>чтобы ответить на некоторые комментарии:</p><ul> <li>эта проблема возникает в электронном, а также в браузере (протестировано в chrome и firefox)</li> <li>я использую новейшие версии fontawesome (4.4.0) и electron (0.32.1) (новая установка через npm)</li> <li>css загружается как: <code><link rel="stylesheet" type="text/css" href="css/font-awesome.css" ></code></li> </ul>

<p>проблема была в моем файле grunt. я попытался воспроизвести проблему, просто загрузив все зависимости вручную на веб-сайтах их поставщиков и поместив их в соответствующую папку сценария моего проекта - вдруг это сработало. </p><p>я перешел на глоток сейчас, и он все еще работает. понятия не имею, что я делал не так с ворчанием, хотя ...</p>

<p>у меня была похожая проблема (возможно, этот ответ кому-нибудь поможет). я использую maven для создания проектов (java + js). maven filter plugin - поврежденные двоичные файлы шрифтов. я должен был добавить, включает и исключает:</p><pre><code> <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> </code></pre>

<p>в моей ситуации git рассматривал файл как текстовый файл и связывался с его «окончаниями строк». это повредило файл.</p><p>настройка .gitconfig для распознавания файлов * .woff как двоичных файлов, затем удаление файла и добавление новой копии из <a href="https://github.com/fortawesome/font-awesome/raw/v4.2.0/fonts/fontawesome-webfont.woff">https://github.com/fortawesome/font-awesome/raw/v4.2.0/fonts/fontawesome- webfont.woff</a> решил проблему для меня.</p>

<p>для некоторых людей, которые развертывают в iis, может помочь добавление этого в файл web.config (основной, а не в каталоге controller).</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p>

<p>я столкнулся с той же проблемой, используя api gateway для обслуживания статических файлов шрифтов на amazon s3.</p><p>я исправил это, добавив <code>*/*</code> в качестве двоичных типов носителей на консоли aws.</p><p>дополнительную информацию об управлении двоичными типами носителей можно найти на <a href="https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings-configure-with-console.html">https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings-configure-with-console.html</a> </p>

<p>попробуйте следующее, в начале вашего css-файла вызовите font-face следующим образом. </p><pre><code>@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 } </code></pre>

<p>если вы используете <code>bower</code>, вы можете переписать свой <code>font-face</code> так:</p><pre><code>@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 } </code></pre>

<p>я уверен, что это решено, но это сработало для меня, так что ... я оставлю это здесь:</p><p>у меня была та же проблема со шрифтом, который я использовал раньше. оказалось, это было связано с проблемой ftp. файл был загружен как текст (ascii) вместо двоичного файла, что повредило файл. я просто заново загрузил файлы шрифтов, и тогда все заработало.</p>