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

Question

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

cssasset-pipelineruby-on-rails-4.1custom-font

184

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

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;
}

我不知道我的那一端缺少什么。我进行了大量搜索，尝试了各种解决方案，但都没有成功。在开发模式下它工作得很好，但不知道为什么在生产模式下会显示正方形。

- Deepti Kakade

3

可能有几种原因：字符编码可能不正确，或者字体本身可能已经损坏。你能否在字体册或类似的软件中打开这个字体？通过快速搜索谷歌可以发现，Chromium浏览器版本45存在一个错误：https://code.google.com/p/chromium/issues/detail?id=545924 - Craig

你能解决这个问题吗？ - coder

1

在我的情况下，我必须清除Cloudflare缓存并等待几分钟让时间解决问题！ - HoseinGhanbari

我曾经遇到过同样的问题，后来发现在Chrome浏览器中需要先有woff2字体再有woff字体。 - jcubic

30个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrea Zangheri · Answer 1

如果其他答案无效，请尝试以下方法：

检查 .htaccess 文件

# 字体
# 为字体添加正确的内容类型

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
清除服务器缓存
清除浏览器缓存并重新加载

- Oz-rod · Answer 2

我收到了这个消息，因为我的 .htaccess 尝试重写这些类型的文件。只需要添加扩展名（在我的情况下添加了 woff 和 woff2）就解决了这个问题。

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

- Andy Lorenz · Answer 3

在尝试了许多其他方法、重新安装和检查后，我刚刚通过清除 Chrome 的浏览数据（缓存的图像和文件），然后刷新页面来解决了这个问题。

- Ашот Барсегян · Answer 4

你是否正在使用loaders模块？它已被弃用，我在使用file-loader模块时遇到了同样的问题。迁移到使用Asset Modules，这解决了相同的问题。

- x-of Rezbach · Answer 5

如果有人需要，我在使用Visual Studio中的ASP.NET和C#时遇到了完全相同的错误。当我从Visual Studio内部启动应用程序时，它可以正常工作，但是我遇到了这个问题。后来发现，我的项目路径包含字符“＃”（c：\ C＃\ testapplication）。这似乎会混淆IIS Express（也可能是IIS），并导致此问题。我猜“＃”在ASP.NET或以下某个地方是保留字符。更改路径有所帮助，现在它按预期工作。

问候克里斯托夫

- user3125779 · Answer 6

当我使用Sublime Text打开并保存.woff和.woff2文件时，使用EditorConfig选项end_of_line = lf时，我遇到了同样的问题。我只需将文件复制到字体文件夹中，而不是在Sublime中打开它们，问题就得到解决了。

- david · Answer 7

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

似乎使用空格字符（代码20）会触发此问题。当我将代码更改为不是20（空格）的其他内容时，该字体在Chrome中正常工作。

- Prince Ahmed · Answer 8

请检查您的字体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
}

在你的字体文件扩展名后面，你会看到版本标签。例如：

-v=4.6.3

你只需要从CSS文件中删除此标签。删除后，你需要进入字体文件夹，然后你会看到：

之后，从这些字体文件中，你只需要从文件名中移除版本标签-v=4.6.3。

问题将会被解决。

- Gampesh · Answer 9

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";

- andreiM · Answer 10

我曾经遇到过同样的问题，这个链接对我很有帮助 https://github.com/webpack/webpack/issues/1468