无法解码下载的字体答案

【问题标题】：Failed to decode downloaded font无法解码下载的字体
【发布时间】：2015-08-07 04:03:55
【问题描述】：

这是我在 Chrome 中遇到的一个错误，不幸的是，搜索它并没有给我太多结果。字体本身显示正确。但是我仍然收到此错误/警告。更具体地说，这是完整的警告：

"解码下载字体失败： http://localhost:8000/app/fonts/Lato/"

我的 CSS 如下：

@font-face {
    font-family:"Lato";
    src: url("../fonts/Lato/");
}

html, body {
    font-family:'Lato';
}

我只是不明白。字体应用正确，但警告始终存在。尝试使用Sans-Serif 会使字体恢复为正常的浏览器字体，所以可能是这样，但我不确定，即使搜索后我也什么也没找到。谢谢！

编辑

有各种字体文件，都来自同一个系列。我正在尝试将它们全部加载。字体文件为.ttf。我从本地文件夹加载它们，有各种字体文件，如Lato-Black.ttf、Lato-Bold.ttf、Lato-Italic.ttf 等。

【问题讨论】：

为什么在 URL 中使用斜杠？您是要从一个目录加载所有文件还是实际上是重定向到单个字体文件？
@ÁlvaroG.Vicario 您好，感谢您抽出宝贵时间。我编辑了问题以使其更清楚。

标签： css html fonts

【解决方案1】：

在 css 规则中，您必须添加文件的扩展名。这个例子得到了最深的支持：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

编辑：

“无法解码下载的字体”意味着字体已损坏或不完整（缺少指标、必要的表格、命名记录、一百万种可能的东西）。

有时这个问题是由字体本身引起的。 Google 字体提供了您需要的正确字体，但如果需要字体，我使用 Transfonter 生成所有字体格式。

有时是 FTP 客户端损坏了文件（在这种情况下不是因为在本地 PC 上）。请务必以二进制格式而不是 ASCII 格式传输文件。

【讨论】：

我编辑了我的问题以使其更清晰。我不确定它是否会改变您发布的任何内容。抱歉造成混乱，感谢您抽出宝贵时间。
你必须使用@font face？我知道 Lato 在谷歌字体上可用。无论如何你可以试试这个：font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url('../font/file for regular font.wof') format('wof');这个代码适用于每种字体，常规，粗体等......
我最终使用了 google 字体选项并且效果很好。谢谢。我接受了你的回答。
这个问题被标记为“无法解码下载的字体”。答案是具体情况，并没有真正说明错误的含义。

【解决方案2】：

我在 Visual Studio 中遇到了类似的问题，这是由于相关字体的 url() 路径不正确造成的。

更改后我不再收到此错误（例如）：

@@font-face{
    font-family: "Example Font";
    src: url("/Fonts/ExampleFont.eot?#iefix");

到这里：

@@font-face{
    font-family: "Example Font";
    src: url("../fonts/ExampleFont.eot?#iefix");

【讨论】：

对我来说 ./ 或 ../ 不起作用，但完全删除 / 从 /assets... 到 assets... 非常感谢！

【解决方案3】：

将format('woff') 更改为format('font-woff') 即可解决问题。

与 Germano Plebani 的回答相比只是一点点变化

 @font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('font-woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

请检查你的浏览器源是否可以打开，是什么类型

【讨论】：

font-woff 格式错误，应为“woff”。有了这个，Chrome 将 woff 字体视为未知格式并跳到下一个最佳格式（这里可能是 woff2 的 ttf）
非常感谢，有了这个解决方案，我也可以解决其他格式（ttf、woff2、...）的问题。
不幸的是，这个答案是错误的。可能不清楚@Arthur 在说什么，但如果您更改字体格式名称，浏览器将完全忽略该字体，因为它没有注册为字体。在 chrome 的检查工具 (F12) 中，转到 Application 选项卡，然后向下转到 Frames > Top > Fonts。尝试使用此解决方案，您会看到字体已被删除。我很少在 SO 上投反对票，但在这种情况下，答案实际上让读者变得更糟，因为他们可能认为他们已经解决了问题，但只是伪装了它。
正如@AndréC.Andersen 所说这个答案只能掩盖问题，不能解决问题。
答案完全错误，应该删除

【解决方案4】：

我必须将type="text/css" 添加到我的链接标签中。我将其更改为：

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

到：

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet" type="text/css">

修改后错误消失了。

【讨论】：

谢谢，它有效。因此，如果有人从谷歌加载字体，只需添加type="text/css"，浏览器控制台中的警告消息在“硬”刷新后消失

【解决方案5】：

确保您的服务器使用正确的mime/type发送字体文件。

我最近在使用 nginx 时遇到了同样的问题，因为它的原版 /etc/nginx/mime.types 文件中缺少一些字体 mime 类型。

我修复了在需要它们的位置添加缺少的 mime 类型的问题，如下所示：

location /app/fonts/ {

  #Fonts dir
  alias /var/www/app/fonts/;

  #Include vanilla types
  include mime.types;

  #Missing mime types
  types  {font/truetype ttf;}
  types  {application/font-woff woff;}
  types  {application/font-woff2 woff2;}
}

你也可以查看这个来扩展 nginx 中的 mime.types： extending default nginx mime.types file

【讨论】：

【解决方案6】：

我刚遇到同样的问题，通过更改解决了它

src: url("Roboto-Medium-webfont.eot?#iefix")

到

src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')

【讨论】：

【解决方案7】：

对我来说，当我使用 https 引用谷歌字体时发生了这个错误。当我切换到 http 时，错误消失了。（是的，我多次尝试确认这是原因）

所以我改变了：

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

收件人：

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

【讨论】：

我在使用 google 字体时也遇到了同样的错误，当我执行 hard reload 时问题自动解决了！
-1，对不起。应该不使用 drop https 支持这一点！它makes your site insecure。 @MaulikGangani 的观察有效！考虑将其整合到您的答案中

【解决方案8】：

当您使用错误的 FTP 方法上传/下载字体时，有时会发生此问题。字体必须使用二进制方法进行 FTP 编辑，而不是 ASCII。（根据你的心情，它可能会让人觉得违反直觉，哈哈）。如果您使用 ASCII 方法 ftp 字体文件，您会收到此错误消息。如果您使用“自动”方法对文件进行 ftp，并且收到此错误消息，请尝试 ftp 强制二进制方法。

【讨论】：

【解决方案9】：

我在使用 font awesome v4.4 时遇到了同样的问题，我通过删除 woff2 格式修复了它。我只在 Chrome 中收到警告。

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

【讨论】：

是的！我删除了格式（'woff2'）并删除了警告。谢谢。

【解决方案10】：

在我的情况下，它是由 .htaccess 中的不正确路径文件引起的。请检查您的文件路径的正确性。

【讨论】：

【解决方案11】：

我也遇到了同样的问题，但我已经通过在所有 .ttf 文件的响应头中添加 'Content-Type' : 'application/x-font-ttf' 解决了

【讨论】：

怎么做？

【解决方案12】：

在我的情况下，这是由创建包含添加字体文件的 SVN 补丁文件引起的。像这样：

将字体文件从本地文件系统添加到被颠覆的主干
Trunk 按预期工作
创建主干更改的 SVN 补丁，包括添加字体文件
将补丁应用到另一个分支
字体文件被添加到被颠覆的分支（并且可以提交），但已损坏，在 OP 中产生错误。

解决方案是将字体文件从我的本地文件系统直接上传到分支中。我认为这是因为 SVN 补丁文件必须将所有内容转换为 ASCII 格式，并且不一定保留字体文件的二进制文件。但这只是猜测。

【讨论】：

【解决方案13】：

对我来说，错误是在上传字体文件之前忘记将 FTP 设置为二进制模式。

编辑

您可以通过上传其他类型的二进制数据（如图像）来测试这一点。如果它们也无法显示，那么这可能是您的问题。

【讨论】：

这个还有别的说法吗？我似乎在我的任何一个 FTP 客户端中都找不到该选项。
我只知道 *nix 命令行浏览器中的 BIN 和 ASCII 术语。我会假设许多现代 FTP 客户端会知道哪些文件是二进制文件，哪些不是，所以也许这不是你的问题。如果您想测试您的 FTP 客户端是否以二进制模式发送，请使用 FTP 移动二进制数据，例如 .jpg，然后尝试查看它。如果以 ASCII 模式发送，则不会显示。（见jscape.com/blog/…）
啊，我明白了，谢谢你的解释。我上传的所有图像都很好，我最终在 FileZilla 中找到了二进制模式，不幸的是它没有帮助我。我在 PHP Storm 中找不到二进制选项，但正如我所说的图像很好，所以我猜这不是我遇到的问题。

【解决方案14】：

在我的例子中——使用 React 和 Gatsby——通过仔细检查我的所有路径来解决问题。我将 React/Gatsby 与 Sass 一起使用，而 Gatsby 源文件在与编译文件不同的位置寻找字体。一旦我将文件复制到每个路径中，这个问题就消失了。

【讨论】：

【解决方案15】：

在我下载模板时，字体文件只是空文件。应该是下载的问题。 Chrome 给出了这个通用错误。起初我认为从woff 更改为font-woff 的解决方案解决了它，但它只会让Chrome 忽略字体。我的解决方案是一一找到字体并下载/替换它们。

【讨论】：

【解决方案16】：

我的问题发生在不同于 chrome 的浏览器中。注意 URL 和格式之间的逗号，这就是所有浏览器的一切恢复正常的方式。老实说，它在没有这种“格式”的情况下也可以工作，但我决定保留它。

@font-face {
  font-family: "Roboto";
  src: url("~path_to_font/roboto.ttf"), format("ttf");
}

【讨论】：

【解决方案17】：

AWS Amplify 特定无法解码下载的字体 问题如上 - 但将woff2 添加到默认目标地址 /index.html 规则在应用程序设置/重写和重定向中解决了任何woff2 错误?

之前

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

之后

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>

【讨论】：

【解决方案18】：

如果您使用的是 express，则需要通过添加以下内容来允许提供静态内容： var server = express(); server.use(express.static('./public')); // 其中 public 是应用程序根文件夹，其中包含任何级别的字体，即 public/fonts 或 public/dist/fonts... // 如果您使用的是连接，请搜索类似的配置。

【讨论】：

【解决方案19】：

我使用 .Net Framework 4.5/IIS 7

为了修复它，我将文件 Web.config 放在带有字体文件的文件夹中。

Web.config 的内容：

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>

【讨论】：

【解决方案20】：

对我来说，未下载的 lfs 文件有问题

git lfs fetch --all

解决了问题。

见https://github.com/git-lfs/git-lfs/issues/325

【讨论】：

【解决方案21】：

如果它在服务器上（不在 localhost 中），请尝试手动上传字体，因为有时 FTP 客户端（例如 FileZilla）会损坏文件并导致问题。对我来说，我是使用 Cpanel 界面手动上传的。

【讨论】：

【解决方案22】：

我的情况看起来很相似，但字体已损坏（因此无法解码）。它是由 Maven 中的配置引起的。在maven-resources-plugin 中为字体扩展添加 nonFilteredFileExtension 帮助了我：

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>

【讨论】：

【解决方案23】：

Google 也失败了...

昨天同样的问题是由谷歌方面的东西引起的，但只在 Win7 和一些 Win10 电脑上。

https://github.com/google/material-design-icons/issues/1220

不管怎样，不到 24 小时就迅速解决了。

我建议始终从 CDN 备份我们依赖的内容，例如这些字体。

【讨论】：