无法解码下载的字体,OTS解析错误:无效的版本标记+ rails 4

Question

我正在进行资产预编译,并在生产模式下运行应用程序.编译完成后,当我加载我的索引页面时,我在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;
}

我不知道我的遗失了什么.我搜索了很多,也尝试了解决方案,但没有取得任何成功.在开发模式下它的工作正常,但不知道为什么它在生产模式中显示方块.

Answer 1

我得到了完全相同的错误,在我的情况下,结果是因为@font-face声明的路径错误.由于我们正在使用的开发服务器(实时服务器)被配置为在任何404上提供默认的index.html,因此网络检查员从不抱怨404.在不知道有关您的设置的任何细节的情况下,这可能是一个可能的罪魁祸首.

Answer 2

如果在IIS上作为服务器和.net 4/4.5运行,它可能会丢失Web.config中的mime /文件扩展名定义 - 如下所示:

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

Answer 3

我遇到了同样的问题., OTS parsing error: Failed to convert WOFF 2.0 font to SFNT (index):1 Failed to decode downloaded font: http://dev.xyz/themes/custom/xyz_theme/fonts/xyz_rock/rocksansbold/Rock-SansBold.woff2

如果您在尝试提交字体时收到此错误消息,那么这是.gitattributes" warning: CRLF will be replaced by LF" 的问题

解决方法是在.gitattributes中添加您遇到问题的任何字体

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

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

我希望它有所帮助.

Answer 4

对于在 AWS Amplify 中遇到此问题的任何人，请执行以下操作：

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

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

Answer 5

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

Answer 6

我遇到了同样的问题，那是因为 git 将这些文件视为文本。因此，在检查构建代理中的文件时，不会维护二进制文件。

将其添加到您的.gitattributes文件中并尝试。

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary

Answer 7

尝试

@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