FontAwesome - 无法解码下载的字体答案

【问题标题】：FontAwesome - Failed to decode downloaded fontFontAwesome - 无法解码下载的字体
【发布时间】：2015-09-09 04:43:22
【问题描述】：

我已经找到了这个：https://stackoverflow.com/search?q=Failed+to+decode+downloaded+font

但答案无助于解决我的问题 =/

我的页面上出现了控制台错误：

Failed to decode downloaded font: http://devcomlink.kunena.dev-monkeys.com/components/com_kunena/template/devcomlink/fonts/font-awesome/fontawesome-webfont.woff2
    index.php?option=com_kunena&view=category&layout=list&Itemid=129&templateStyle=9:1 Failed to decode downloaded font: http://devcomlink.kunena.dev-monkeys.com/components/com_kunena/template/devcomlink/fonts/font-awesome/fontawesome-webfont.woff
    index.php?option=com_kunena&view=category&layout=list&Itemid=129&templateStyle=9:1 Failed to decode downloaded font: http://devcomlink.kunena.dev-monkeys.com/components/com_kunena/template/devcomlink/fonts/font-awesome/fontawesome-webfont.ttf

我页面的网址：http://devcomlink.kunena.dev-monkeys.com/index.php?option=com_kunena&view=category&layout=list&Itemid=129&templateStyle=9

在 Firefox 和 IE11 中，图标完全不加载...

有人知道我该如何解决这个问题吗？

【问题讨论】：

标签： css fonts less font-awesome

【解决方案1】：

我只是为以后的观众回答这个问题。如果您使用的是 maven-war-plugin，请确保在过滤中排除 .woff 和 .ttf 文件，否则 maven 会使文件损坏。

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <configuration>
        <filteringDeploymentDescriptors>true</filteringDeploymentDescriptors>
        <webResources>
            <resource>
                <directory>${basedir}/src/main/webapp</directory>
                <targetPath />
                <filtering>true</filtering>
                <excludes>
                    <exclude>**/*.woff</exclude>
                    <exclude>**/*.woff2</exclude>
                    <exclude>**/*.ttf</exclude>
                </excludes>
            </resource>
        </webResources>
    </configuration>
</plugin>

【讨论】：

这真的很有帮助。

【解决方案2】：

问题不在于您的 HTML 或 CSS 代码...必须是 字体文件 或 服务器,

因为普通字体文件应该包含代码，并且可以在浏览器中打开时下载：https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0

即使下载后您的文件看起来也是空的，没有任何代码：http://devcomlink.kunena.dev-monkeys.com/components/com_kunena/template/devcomlink/fonts/font-awesome/fontawesome-webfont.eot?v=4.3.0

尝试替换文件...

【讨论】：

谢谢！我真的不明白为什么文件坏了......但现在它可以工作了！ ;)
当我通过npm 安装ui-grid 并通过从GitHub 下载文件替换它们时，我的字体文件已损坏。
我在一台（共享主机）服务器上遇到了同样的问题，起初以为是因为主题。问题出在 WinSCP 中，由于某种原因，它以 TEXT 而不是 BINARY 模式上传了字体文件。以二进制模式重新上传文件解决了这个问题。您可以通过比较文件大小来直观地检查这一点，在文本模式下，文件的大小要小几百字节。

【解决方案3】：

我遇到了同样的问题，最后设法解决了。它可能对某人有所帮助。

我有一个相当大的 .htacces 文件，其中包含很多 RewriteCond 和 RewriteRule，并且还使用以下行从这些条件中过滤了一些文件夹：

RewriteRule  ^(css|functions|js|media|tpl|vendor)($|/) - [L]

添加fonts文件夹（简称fonts，位于public_html/）后，问题就解决了。

RewriteRule  ^(css|<strong>fonts</strong>|functions|js|media|tpl|vendor)($|/) - [L]

请注意，此行应位于 .htaccess 文件的顶部才能正常工作。

【讨论】：

【解决方案4】：

类似于maven-war-plugin 的用法，如果您使用的是maven-resources-plugin，则需要指定不应过滤字体文件扩展名：

<plugin>
    <artifactId>maven-resources-plugin</artifactId>
    <version>2.7</version>
    <configuration>
        <encoding>UTF-8</encoding>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>

从这个SO answer得到解决方案。

【讨论】：

:-) 这有助于我使用带有 springboot 和 maven 组合的 ExtJS 应用程序。非常感谢！我想知道在不使用 stackoverflow 时如何找出类似的问题。我确实在 maven-war-plugin 页面上进行了交叉检查，但无法掌握解决我的问题的想法。
完全救了我。我的图标还活着！谢谢。

【解决方案5】：

不管怎样，我在我的共享网络服务器上遇到了这个问题。我的字体文件和封闭文件夹的权限不正确。我花了很长时间才弄清楚。将它们更改为文件夹的 755 和字体文件的 644。现在完美运行。

【讨论】：

就我而言，这是我的问题。谢谢

【解决方案6】：

问题不在于您的 HTML 或 CSS 代码。它必须与 字体文件 或 服务器 一起使用。如果您的资源文件没有任何问题，请将以下代码与 maven-resources-plugin 一起使用。将此代码添加到您的 pom.xml 文件中。

<build>
        <resources>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>true</filtering>
                <excludes>
                    <exclude>static/vendor/font-awesome/webfonts/**</exclude>
                </excludes>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>false</filtering>
                <includes>
                    <include>static/vendor/font-awesome/webfonts/**</include>
                </includes>
            </resource>
        </resources>
</build>

【讨论】：

【解决方案7】：

游戏有点晚了，但这就是我在 .NET MVC 上修复它的原因，它也应该适用于 WebForms。如果您使用 FA 或 GI 来装饰您的登录表单，则字体文件夹将受到限制。您可以通过在 web.config 中执行此操作来提前授予权限

<location path="fonts">
    <system.web>
     <authorization>
     <allow users="*" />
     </authorization>
    </system.web>
</location>

希望这对那里的人有所帮助！

【讨论】：

【解决方案8】：

@mujtaba-fadhel 答案在大多数情况下应该可以解决问题。但是如果您使用 git，您可能希望将字体扩展名设置为二进制，以防万一它被转换为文本。您需要在项目根目录中创建一个.gitattributes 文件。

这是一个示例：

*.svg text eol=lf

*.eot binary
*.ttf binary
*.woff binary

See more about that here

【讨论】：

【解决方案9】：

这可能是从损坏的文件到服务器问题的多种原因的列表。我只是通过更改为 fontawesome CDN 链接来解决我的问题。希望对您有所帮助。

【讨论】：

【解决方案10】：

我在这里可能会迟到，但一件简单的事情对我有用。我的 FileZilla 文件传输设置最初选择为“ASCII”。我在某处读到字体文件传输应该是二进制的。所以我将设置更改为自动并再次从本地原始字体目录上传字体文件。它就像一个魅力。希望这对寻找解决方案的人有用。谢谢

【讨论】：