无法解码下载的字体
Failed to decode downloaded font
这是我在 Chrome 中遇到的一个错误，不幸的是，搜索它并没有给我太多结果。字体本身显示正确。但是我仍然得到这个 error/warning。更具体地说，这是完整的警告：
"Failed to decode downloaded font:
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 等
在 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 */
}
编辑：
"Failed to decode downloaded font" 表示字体损坏或不完整（缺少指标、必要的表格、命名记录，一百万种可能的东西）。
有时这个问题是字体本身引起的。 Google 字体提供了您需要的正确字体，但如果需要字体，我使用 Transfonter 生成所有字体格式。
有时是 FTP 客户端破坏了文件（在这种情况下不是因为在本地 pc 上）。请务必以二进制而非 ASCII 格式传输文件。
我在 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");
我在使用 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;
}
如果您使用的是 express，则需要通过添加以下内容来允许提供静态内容：
变种服务器=表达（）；
server.use(express.static('./public')); // 其中 public 是应用程序根文件夹，其中包含任何级别的字体，即 public/fonts 或 public/dist/fonts...
// 如果你正在使用连接，google 类似的配置。
我刚遇到同样的问题，通过更改解决了
src: url("Roboto-Medium-webfont.eot?#iefix")
至
src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')
有时当您 upload/download 字体使用错误的 FTP 方法时会发生此问题。
字体必须 FTP-ed 使用二进制方法，而不是 ASCII。 （根据你的心情，可能会觉得违反直觉，哈哈）。
如果你 ftp 使用 ASCII 方法的字体文件，你会得到这个错误信息。
如果您 ftp 您的文件使用 'auto' 方法，并且收到此错误消息，请尝试 ftp 强制使用二进制方法。
确保您的服务器发送的字体文件具有正确的 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
在我的例子中，这是由 .htaccess 中的路径文件不正确引起的。
请检查您的文件路径是否正确。
将 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 */
}
请检查您的浏览器源是否可以打开它，类型是什么
对我来说，这个错误是在我使用 https 引用 google 字体时发生的。当我切换到 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);
我必须将 type="text/css" 添加到我的 link 标签中。我将其更改为：
<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">
我修改后错误消失了。
对我来说，错误是在上传字体文件之前忘记将 FTP 设置为二进制模式。
编辑
您可以通过上传其他类型的二进制数据（例如图像）来对此进行测试。如果它们也无法显示，那么这可能是您的问题。
我也有同样的问题，但我已经通过添加 'Content-Type' 解决了：'application/x-font-ttf' 响应 header 所有 .ttf 文件
在我的例子中，这是由于创建了一个包含添加字体文件的 SVN 补丁文件造成的。像这样：
- 将本地文件系统中的字体文件添加到 subversioned trunk
- 中继按预期工作
- 创建主干更改的 SVN 补丁，以包括添加字体文件
- 将补丁应用到另一个分支
- 字体文件已添加到颠覆分支（并且可以提交），但已损坏，在 OP 中产生错误。
解决方案是将字体文件从我的本地文件系统直接上传到分支中。我认为发生这种情况是因为 SVN 补丁文件必须将所有内容都转换为 ASCII 格式，并且不一定保留字体文件的二进制文件。但这只是一个猜测。
我使用.Net Framework 4.5/IIS 7
为了修复它，我将文件 Web.config 放入了包含字体文件的文件夹中。
Web.config的内容：
<?xml version="1.0"?>
<configuration>
<system.web>
<authorization>
<allow users="*" />
</authorization>
</system.web>
</configuration>
就我而言，下载模板时字体文件只是空文件。应该是下载的问题。 Chrome 给出了这个一般性错误。起初我以为从 woff 更改为 font-woff 的解决方案解决了它，但它只是让 Chrome 忽略了字体。我的解决方案是一个一个地找到字体并 downloading/replacing 它们。
对我来说，这是未下载的 lfs 文件的问题
git lfs fetch --all
解决了问题。
如果它在服务器上（不在本地主机上），请尝试手动上传字体，因为有时 FTP 客户端（例如 FileZilla）会损坏文件，这可能会导致问题。对于我来说，我使用 Cpanel 界面手动上传。
就我而言——将 React 与 Gatsby 结合使用——通过仔细检查我的所有路径解决了这个问题。我正在使用 React/Gatsby 和 Sass 并且 Gatsby 源文件在与编译文件不同的地方寻找字体。一旦我将文件复制到每个路径中，这个问题就消失了。
我的情况看起来很相似，但字体已损坏（因此无法解码）。这是由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>
我的问题出现在不同于 chrome 的浏览器中。
注意 URL 和 format 之间的昏迷，这就是所有浏览器一切恢复正常的原因。老实说，它也可以在没有这种“格式”的情况下工作，但我决定保留它。
@font-face {
font-family: "Roboto";
src: url("~path_to_font/roboto.ttf"), format("ttf");
}
Google 也失败了...
昨天同样的问题是由 Google 方面的问题引起的，但仅在 Win7 和一些 Win10 计算机上。
https://github.com/google/material-design-icons/issues/1220
反正不到24小时就及时解决了
我建议总是从 CDN 备份我们依赖的东西，比如这些字体。
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)$)([^.]+$)/>
这是我在 Chrome 中遇到的一个错误，不幸的是，搜索它并没有给我太多结果。字体本身显示正确。但是我仍然得到这个 error/warning。更具体地说，这是完整的警告：
"Failed to decode downloaded font: 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 等
在 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 */
}
编辑：
"Failed to decode downloaded font" 表示字体损坏或不完整（缺少指标、必要的表格、命名记录，一百万种可能的东西）。
有时这个问题是字体本身引起的。 Google 字体提供了您需要的正确字体，但如果需要字体，我使用 Transfonter 生成所有字体格式。
有时是 FTP 客户端破坏了文件（在这种情况下不是因为在本地 pc 上）。请务必以二进制而非 ASCII 格式传输文件。
我在 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");
我在使用 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;
}
如果您使用的是 express，则需要通过添加以下内容来允许提供静态内容： 变种服务器=表达（）； server.use(express.static('./public')); // 其中 public 是应用程序根文件夹，其中包含任何级别的字体，即 public/fonts 或 public/dist/fonts... // 如果你正在使用连接，google 类似的配置。
我刚遇到同样的问题，通过更改解决了
src: url("Roboto-Medium-webfont.eot?#iefix")
至
src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')
有时当您 upload/download 字体使用错误的 FTP 方法时会发生此问题。 字体必须 FTP-ed 使用二进制方法，而不是 ASCII。 （根据你的心情，可能会觉得违反直觉，哈哈）。 如果你 ftp 使用 ASCII 方法的字体文件，你会得到这个错误信息。 如果您 ftp 您的文件使用 'auto' 方法，并且收到此错误消息，请尝试 ftp 强制使用二进制方法。
确保您的服务器发送的字体文件具有正确的 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
在我的例子中，这是由 .htaccess 中的路径文件不正确引起的。 请检查您的文件路径是否正确。
将 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 */
}
请检查您的浏览器源是否可以打开它，类型是什么
对我来说，这个错误是在我使用 https 引用 google 字体时发生的。当我切换到 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);
我必须将 type="text/css" 添加到我的 link 标签中。我将其更改为：
<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">
我修改后错误消失了。
对我来说，错误是在上传字体文件之前忘记将 FTP 设置为二进制模式。
编辑
您可以通过上传其他类型的二进制数据（例如图像）来对此进行测试。如果它们也无法显示，那么这可能是您的问题。
我也有同样的问题，但我已经通过添加 'Content-Type' 解决了：'application/x-font-ttf' 响应 header 所有 .ttf 文件
在我的例子中，这是由于创建了一个包含添加字体文件的 SVN 补丁文件造成的。像这样：
- 将本地文件系统中的字体文件添加到 subversioned trunk
- 中继按预期工作
- 创建主干更改的 SVN 补丁，以包括添加字体文件
- 将补丁应用到另一个分支
- 字体文件已添加到颠覆分支（并且可以提交），但已损坏，在 OP 中产生错误。
解决方案是将字体文件从我的本地文件系统直接上传到分支中。我认为发生这种情况是因为 SVN 补丁文件必须将所有内容都转换为 ASCII 格式，并且不一定保留字体文件的二进制文件。但这只是一个猜测。
我使用.Net Framework 4.5/IIS 7
为了修复它，我将文件 Web.config 放入了包含字体文件的文件夹中。
Web.config的内容：
<?xml version="1.0"?>
<configuration>
<system.web>
<authorization>
<allow users="*" />
</authorization>
</system.web>
</configuration>
就我而言，下载模板时字体文件只是空文件。应该是下载的问题。 Chrome 给出了这个一般性错误。起初我以为从 woff 更改为 font-woff 的解决方案解决了它，但它只是让 Chrome 忽略了字体。我的解决方案是一个一个地找到字体并 downloading/replacing 它们。
对我来说，这是未下载的 lfs 文件的问题
git lfs fetch --all
解决了问题。
如果它在服务器上（不在本地主机上），请尝试手动上传字体，因为有时 FTP 客户端（例如 FileZilla）会损坏文件，这可能会导致问题。对于我来说，我使用 Cpanel 界面手动上传。
就我而言——将 React 与 Gatsby 结合使用——通过仔细检查我的所有路径解决了这个问题。我正在使用 React/Gatsby 和 Sass 并且 Gatsby 源文件在与编译文件不同的地方寻找字体。一旦我将文件复制到每个路径中，这个问题就消失了。
我的情况看起来很相似，但字体已损坏（因此无法解码）。这是由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>
我的问题出现在不同于 chrome 的浏览器中。 注意 URL 和 format 之间的昏迷，这就是所有浏览器一切恢复正常的原因。老实说，它也可以在没有这种“格式”的情况下工作，但我决定保留它。
@font-face {
font-family: "Roboto";
src: url("~path_to_font/roboto.ttf"), format("ttf");
}
Google 也失败了...
昨天同样的问题是由 Google 方面的问题引起的，但仅在 Win7 和一些 Win10 计算机上。
https://github.com/google/material-design-icons/issues/1220
反正不到24小时就及时解决了
我建议总是从 CDN 备份我们依赖的东西，比如这些字体。
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)$)([^.]+$)/>