解码下载的字体失败

小开

最佳答案

在 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 */
}

编辑:

“未能解码下载的字体”意味着该字体已损坏或不完整(缺少指标、必要的表、命名记录、成千上万种可能)。

有时这个问题是由字体本身引起的。谷歌字体提供了正确的字体，你需要，但如果字体脸是必要的，我使用转换器生成所有的字体格式。

有时是 FTP 客户端破坏文件(不在这种情况下，因为是在本地电脑)。确保以二进制而不是 ASCII 格式传输文件。

小开

我在 VisualStudio 中也遇到过类似的问题，这是由于问题字体的 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");

小开

我在4.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，则需要添加以下内容来允许提供静态内容: Var server = Express () ; Use (Express.static (’。//其中 public 是应用程序根文件夹，其中包含任何级别的字体，即 public/font 或 public/dist/fonts..。 //如果你正在使用连接，谷歌一个类似的配置。

小开

我只是遇到了同样的问题，通过改变来解决

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

到

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

小开

有时，当你使用错误的 FTP 方法上传/下载字体时，这个问题就会发生。字体必须使用二进制方法进行 FTP 编辑，而不是 ASCII。如果使用 ASCII 方法对字体文件进行 ftp，则可以得到此错误消息。如果您使用‘ auto’方法来 ftp 文件，并且得到了这个错误消息，请尝试 ftp 强制使用二进制方法。

小开

请确保您的服务器正在发送字体文件与正确的 默剧/类型。

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

我修正了这个问题，在我需要它们的位置添加缺失的哑剧类型，如下所示:

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 中的 ime.type: 扩展默认的 nginx ime.types 文件

小开

在我的例子中，它是由一个不正确的路径文件引起的，在.htaccess 中。请检查您的文件路径的正确性。

小开

将 format('woff')改为 format('font-woff')可以解决这个问题。

和普莱巴尼的回答相比，这只是一个小小的改变

 @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 引用谷歌字体时，出现了这个错误。当我切换到 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 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”来解决这个问题。TTF 文件

小开

在我的例子中，这是由于创建了一个包含字体文件添加的 SVN 补丁文件造成的。像这样:

将本地文件系统中的字体文件添加到已颠覆的主干
后备箱正常工作
创建主干更改的 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 忽略了字体。我的解决方案是逐个找到字体并下载/替换它们。

小开

对我来说，这是一个问题与 lfs 文件没有下载

git lfs fetch --all

解决了问题。

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

小开

如果它在服务器上(不在 localhost 中) ，那么尝试手动上传字体，因为有时 FTP 客户端(例如 FileZilla)会破坏文件，并可能导致问题。对我来说，我使用 Cpanel 界面手动上传。

小开

在我的例子中——使用 React with Gatsby ——通过重复检查我的所有路径，问题得到了解决。我和 Sass 一起使用 React/Gatsby 而且 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 和格式之间的间隔，这是所有浏览器恢复正常的方式。老实说，它没有这种“格式”也工作，但我决定让它。

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

小开

谷歌也失败了。

昨天同样的问题是由谷歌方面的某些东西引起的，但只是在 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)$)([^.]+$)/>