解码下载字体失败，OTS 解析错误: 版本标签无效 + Rails 4

我正在进行资产预编译，并在生产模式下运行应用程序。编译后，当我加载我的索引页面，我得到了以下警告在铬控制台:

Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0
prospects:1 OTS parsing error: invalid version tag

问题是它没有加载图标，而是显示方块 。

我们使用了自定义字体，代码是:

@font-face {
font-family: 'icomoon';
src: font-url('icomoon.eot');
src: font-url('icomoon.eot?#iefix') format('embedded-opentype'),
font-url('icomoon.ttf') format('truetype'),
font-url('icomoon.woff') format('woff'),
font-url('icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

我不知道我这边少了什么。我找了很多，也尝试了解决方案，但没有得到任何成功。在开发模式它的工作良好，但不知道为什么它的显示方块在生产模式。

248965 次浏览
小开

我得到了完全相同的错误，在我的例子中，原来是因为 @font-face声明的路径错误。Web 检查员从来没有抱怨过404，因为我们正在使用的开发服务器(live-server)被配置为在任何404上提供默认 index.html。如果不知道任何关于您的设置的细节，这可能是一个罪魁祸首。

小开

如果作为服务器在 IIS 上运行，并且。Net 4/4.5在 Web.config 中可能缺少 mime/file 扩展名定义，如下所示:

<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" />
</staticContent>
</system.webServer>

小开

我的问题是，我声明了两种字体，而 scss 似乎期望您声明字体的名称。

在你的 @font-face{} 你必须申报 $my-font: "OpenSans3.0 or whatever";

这是 每个人字体。

:-)

小开

试试看

@font-face {
font-family: 'icomoon';
src: asset-url('icomoon.eot');
src: asset-url('icomoon.eot?#iefix') format('embedded-opentype'),
asset-url('icomoon.ttf') format('truetype'),
asset-url('icomoon.woff') format('woff'),
asset-url('icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

并将您的文件重命名为 application.css.scss

小开

如果你正在使用 Chrome，尝试添加一个 opentype (OTF)版本的字体，如下所示:

    ...
url('icomoon.otf') format('opentype'),
...

干杯！

小开

我也有同样的问题，这对我来说很管用

小开

我也有同样的问题, OTS 解析错误: 未能将 WOFF 2.0字体转换为 SFNT (索引) : 1未能解码下载字体: http://dev.xyz/themes/custom/xyz_theme/fonts/xyz_rock/rocksansbold/rock-sansbold.woff2

如果您在尝试提交字体时得到了这个错误消息，那么这就是. gitproperties 的一个问题 “ warning: CRLF will be replaced by LF”

解决这个问题的方法是添加你在. gitproperties 中遇到问题的任何字体

*.ttf     -text diff
*.eot     -text diff
*.woff    -text diff
*.woff2   -text diff

然后我删除了损坏的字体文件，并重新应用新的字体文件，工作得很好。

小开 
For it is fixed by using below statement in app.web.scss
$fa-font-path:   "../../node_modules/font-awesome/fonts/" !default;
@import "../../node_modules/font-awesome/scss/font-awesome";
小开

如果你使用引导，然后更新引导 CSS (bootstrap.min.css)文件和字体文件。我修复了这个解决方案的问题。

小开

我有一个损坏的字体，虽然它似乎是加载没有问题，并在 Chrome devtools 的源显示，字节计数是不正确的，所以我再次下载，它解决了它。

小开

我在 IIS 中使用 ASP.NET，结果我只需要添加 将 MIME-type 设为 IIS:’. woff2’/’application/font-woff’

小开

在尝试了很多其他方法，重新安装和检查了很多次之后，我刚刚解决了这个问题，清除了 Chrome 浏览器中的数据(缓存的图片和文件) ，然后刷新了页面。

小开

当使用 angular-cli时，这是对我有效的方法:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<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="application/font-woff2" />
<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
<rewrite>
<rules>
<rule name="AngularJS" stopProcessing="true">
<match url="^(?!.*(.bundle.js|.bundle.js.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.chunk.js|.chunk.js.map|.png|.jpg|.ico|.eot|.svg|.woff|.woff2|.ttf|.html)).*$" />
<conditions logicalGrouping="MatchAll">
</conditions>
<action type="Rewrite" url="/"  appendQueryString="true" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
小开

我有同样的问题，当我打开和保存 .woff和.woff2文件通过崇高文本与 EditorConfig选项 end_of_line = lf。 我只是复制文件到字体文件夹没有打开他们到崇高和问题得到解决。

小开

我得到了以下错误:

Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag

直接从以下网址下载原始档案后修正:
Https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

问题是在下载文件时有一个代理错误(它包含 HTML 错误消息)。

小开

我也有同样的问题，那是因为 Git 把这些文件当作文本处理。因此，在检出生成代理中的文件时，没有维护二进制文件。

将其添加到 .gitattributes文件中，然后尝试。

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary
小开

到 GitHub 下面的地址下载每个 FontAwesome 文件。

Https://github.com/fortawesome/font-awesome-sass/tree/master/assets/fonts/font-awesome

... 而不是右键单击并保存链接为，单击每个文件，并使用’下载’按钮保存它们。

我发现将链接保存为下载的 HTML 页面，而不是 FontAwesome 文件的二进制文件本身。

一旦我有了所有的二进制文件，它就为我工作了。

小开

对于 角斜肌和 网络包用户，我怀疑在导入 css 文件中的字体时存在一些问题，所以请提供以下单引号编码的 URL 位置

@font-face {
font-family: 'some_family';
src: url('./assets/fonts/folder/some_family-regular-webfont.woff2') format('woff2'),
url('./assets/fonts/folder/some_family-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

这个帖子可能有点老了，但是这个解决方案对我很有效。

小开

我也有同样的问题。

将字体版本(例如 ?v=1.101)添加到字体 URL 应该可以解决这个问题;)

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url('../fonts/open-sans-v15-latin-600.eot?v=1.101'); /* IE9 Compat Modes */
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v15-latin-600.woff2?v=1.101') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v15-latin-600.woff?v=1.101') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

点击(鼠标右键点击)在字体的 TTF 版本和选择“获取信息”(Mac OSX)“属性”(Windows)在上下文菜单应该足以访问的字体版本。

小开

如果其他答案不起作用，试试看:

  1. Htaccess 文件

    # Fonts
    # Add correct content-type for fonts < br >

    AddType application/vnd.ms-fontobject .eot
    AddType application/x-font-ttf .ttf
    AddType application/x-font-opentype .otf
    AddType application/x-font-woff .woff
    AddType application/x-font-woff2 .woff2
    AddType image/svg+xml .svg

  2. 清除服务器缓存

  3. 清除浏览器缓存和重新加载
小开

检查你的 Font 的 css 文件(fontawesome.css/fontawesome.min.css)，你会看到这样:

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

你会看到 在字体的文件扩展名后面加上 version 标记比如:

- v = 4.6.3

您只需要从您的 css 文件中删除这个标记。 删除这个之后，你需要进入你的字体文件夹，你会看到: enter image description here

并且，对于这些字体的文件，您只需要从文件名中删除版本标记 - v = 4.6.3。

然后，问题就解决了。

小开

状态格式@font-face 如下:

@font-face {
font-family: 'Some Family';
src: url('/fonts/fontname.ttf') format('ttf'); /* and this for every font */
}

小开

以防这事跟谁有关。我在 Visual Studio 中使用 ASP.NET 和 C # 得到了完全相同的错误。当我在视觉工作室内部启动这个应用程序时，它起作用了，但是我遇到了这个问题。与此同时，我的项目路径包含字符“ #”(c: C # testapplication)。这似乎混淆了 IIS Express (也可能是 IIS)并导致了这个问题。我猜“ #”是 ASP.NET 或其下的某个地方的保留字符。改变路径有所帮助，现在它按预期工作。

问候 克里斯托弗

小开

帮助我的是我改变了顺序。那个。Eot 先加载，但我的错误是在加载。Eot.所以我放弃了。Eot 作为 woff2的第一个 src，错误消失了。

所以现在的代码是:

@font-face {
font-family: 'icomoon';
src:  url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2');
src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

以前是:

@font-face {
font-family: 'icomoon';
src:  url('assets/fonts/icomoon.eot?9h1pxj');
src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
小开

这个问题我已经遇到过两次了，都是由 icomoon 生成的图标字体。在这两种情况下，其中一个图标使用了“空格字符”(20)

似乎使用空格字符(代码20)触发了这个问题。在我把代码改成20(空格)以外的字体后，Chrome 中的字体运行正常。

小开

我也有同样的问题，在 < strong > node.js server上跑步。问题不是来自我的 领航员，而是来自 服务器！
我只是用了 fs.readFile(...)函数。这对于小文件来说已经足够了(我使用的是10ko max) ，但是我的字体文件大约是150ko，这对于所有这些异步的东西来说太多了:/
我用流程解决了这个问题:
(数据在流读取时发送)

const stream = fs.createFileStream(filename);


stream.on("error", () => {
// error : file does not exist, etc.
res.setHeader("content-type", "text/plain");
res.statusCode = 404;
res.end("ouuups, problem :/");
}


stream.on("open", () => {
// good
res.setHeader("content-type", mime);
// mime is your font / file mime-type
res.statusCode = 200;
stream.pipe(res);
}
小开

对于任何在 AWS Amplify 遇到这个问题的人，请执行以下操作:

  1. 打开你的 AWS Amplify 应用
  2. 点击 应用程序设置-> 重写和重定向
  3. 将 源地址更改为:
    </^[^.]+$|\.(?!(css|gif|ico|otf|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

注意: 我要做的唯一一件事就是在原始的 AWS Amplify 配置中添加 otf，因为它丢失了。其余的配置已经在那里了。

AWS Amplify configuration

小开

我得到这个消息是因为我的.htaccess 尝试重写这些类型的文件。 仅仅添加扩展(在我的例子中添加了 woff 和 woff2)就解决了这个问题。

RewriteRule \.(js|css|svg|gif|jpg|jpeg|png|woff|woff2)$ -  [L]
小开

你在使用装载机模块吗？它已经过时了，我在使用文件加载器模块时遇到了同样的问题。迁移到使用 资产模块，这修复了同样的问题。

小开

我有一个问题，字体是工作在本地，但当我部署他们没有。我加载我的字体文件使用小写字符，但是字体文件的名称中有大写字符(例如，我正在做 url("./fonts/helevectia/helevectia-regular.ttf")，但是名称应该是 url("./fonts/Helevectia/Helevectia-Regular.ttf"))。在当地，这似乎奏效了，但是当我部署的时候，它并没有奏效。我修正了大写，不再出错。


提交答案