下载的字体解码失败，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 提供, 点击上面的

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

- Robert Bolton · Answer 1

请前往下面的GitHub地址，下载每个FontAwesome文件。

https://github.com/FortAwesome/font-awesome-sass/tree/master/assets/fonts/font-awesome

...但不要右键点击链接并将其另存为，而是单击每个文件并使用“下载”按钮保存它们。

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

一旦我拥有了所有的二进制文件，它对我起作用了。

- ip_x · Answer 2

对于使用 angular-cli 和 webpack 的用户，我怀疑在导入 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;
}

这篇帖子可能有点老，但这是对我有效的解决方案。

- Oleksa O. · Answer 3

我也遇到了同样的问题。

在字体的URL中添加版本号（例如?v=1.101）应该可以解决问题；）

@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）应该足以访问字体版本。

- Kyros · Answer 4

我有同样的问题，在一个 node.js 服务器上运行。问题不是来自我的 navigator，而是来自 server！
我只是使用了 fs.readFile(...) 函数。这对于小文件足够了（我最多使用10ko），但我的字体文件大约有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);
}

- FRabbi · Answer 5

如果你使用Bootstrap，那么请更新Bootstrap CSS(bootstrap.min.css)文件和字体文件。我用这个解决方案解决了我的问题。

- Jos · Answer 6

对我有帮助的是我改变了顺序。首先加载.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;
}

- Buitregool · Answer 7

如果您正在使用Chrome浏览器，请尝试按照以下方式添加一个opentype（OTF）版本的字体：

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

干杯！

- Jawid Hassim · Answer 8

我正在使用ASP.NET和IIS，发现我只需要在IIS中添加MIME类型：'.woff2' / 'application/font-woff'

- Antoine · Answer 9

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

在你的 @font-face{} 之后，你必须声明 $my-font："OpenSans3.0或其他"; 并为每个字体都这样做。

:-)

- busterroni · Answer 10

我遇到了一个问题，本地字体可以正常工作，但是当我部署时就无法使用。我使用小写字符加载字体文件，但是字体文件的名称中有大写字符（例如，我使用url("./fonts/helevectia/helevectia-regular.ttf")，但名称应该是url("./fonts/Helevectia/Helevectia-Regular.ttf")）。在本地环境下似乎可以工作，但是当我部署后就不行了。我修复了大小写问题，错误也不再出现。