logo标签列表

下载的字体解码失败，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;
}

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

3
可能有几种原因：字符编码可能不正确，或者字体本身可能已经损坏。你能否在字体册或类似的软件中打开这个字体？通过快速搜索谷歌可以发现，Chromium浏览器版本45存在一个错误：https://code.google.com/p/chromium/issues/detail?id=545924 - Craig
你能解决这个问题吗？ - coder
1
在我的情况下，我必须清除Cloudflare缓存并等待几分钟让时间解决问题！ - HoseinGhanbari
我曾经遇到过同样的问题，后来发现在Chrome浏览器中需要先有woff2字体再有woff字体。 - jcubic
30个回答
161

我遇到了完全一样的错误，后来发现是因为@font-face声明的路径错误。Web 检查器从未以 404 错误投诉，因为我们正在使用的开发服务器（live-server）被配置为在任何出现 404 错误时提供默认的 index.html。如果不知道您的设置详情，这可能是一个可能的罪魁祸首。

3
如果这是重定向的原因，您可以通过文件扩展名进行过滤。 RewriteRule !.(js|gif|css|jpg|otf|eot|png)$ /redirect [R=301,L] - fearis
在我的情况下，ASP.NET MVC的捆绑和压缩实际上改变了CSS的位置，但没有改变其中的相对路径。不得不删除已经压缩的文件，并在BundleConfig中使用CssRewriteUrlTransform。 - Sinjai
26

我遇到了相同的问题。OTS解析错误：无法将WOFF 2.0字体转换为SFNT （索引）：1下载的字体解码失败：http://dev.xyz/themes/custom/xyz_theme/fonts/xyz_rock/rocksansbold/Rock-SansBold.woff2

如果您在尝试提交字体时收到此错误消息，则与.gitattributes有关。 "警告：CRLF将被LF替换"

解决此问题的方法是将导致问题的任何字体添加到.gitattributes中。

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

然后我删除了损坏的字体文件，并重新应用了新的字体文件，现在它运行得很好。

那个文件在哪里？浏览器会知道它的存在吗？怎么做？ - Omar
@Omar，那个文件应该在你的根目录中，与浏览器无关。它描述了git将如何管理不同文件格式中的行尾。Git尝试更改行尾可能会破坏某些文件类型。 - elliottregan
标志文本差异是用来做什么的？为什么不是“文本差异”？还有为什么不是二进制的？ - undefined
26

如果在作为服务器的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>

7

我有一个受损的字体，虽然它似乎没有问题地加载并在Chrome开发工具的Sources中显示，但字节数不正确，所以我重新下载了一遍，问题得到解决。

1
如果使用woff2，在使用在线转换器后，我遇到了这个问题。需要使用命令行woff2转换器（可通过homebrew获得）。 - rob-gordon
感谢@rob-gordon，我也遇到了这个问题。使用https://anyconv.com/otf-to-woff2-converter/创建了.woff和.woff2文件，但是woff2文件损坏或未正确压缩（比源.otf文件还要大）。 - timotgl
7

如果您在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

1
我还在上述匹配表达式中添加了 woff2。 - infinity
6

我曾遇到同样的问题，这是由于git将这些文件视为文本文件。因此，在构建代理检查这些文件时，二进制文件没有得到维护。

将以下内容添加到你的.gitattributes文件中并尝试。

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary
1
有人发表了相同的评论，但是使用的是“-text diff”而不是“binary”。你知道这两个标志之间的区别吗？ - undefined
4

只需在 @font-face 中按照以下方式指定字体格式：

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

3
尝试
@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

。

2
当使用 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>
1
你能说一下需要为哪个文件添加这些内容吗？ - Saiyaff Farouk
1
编辑 web.config 文件。 - Skorunka František
我在angular-cli项目中找不到web.config文件。使用的版本是1.3.0。有什么线索吗？ - Saiyaff Farouk
只有当您在IIS（包括Azure Web Services）上托管客户端应用程序时，才会使用Web.config。 - Skorunka František
2
我没有想到要检查文件本身... 请确保不要直接下载此链接（使用“另存为”），而是输入链接并使用“下载”按钮。 - omadawn
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接