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

时间：2015-12-15 12:02:53

标签： css asset-pipeline ruby-on-rails-4.1 custom-font

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

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

25 个答案:

答案 0 :(得分：125)

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

答案 1 :(得分：16)

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

{{1}}

答案 2 :(得分：12)

我遇到了同样的问题。<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pieChart" class="chart"></div> <button>Animate</button>

如果在尝试提交字体时收到此错误消息，那么这是.gitattributes的问题  ＆＃34; , 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＆＃34;

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

warning: CRLF will be replaced by LF

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

我希望它有所帮助。

答案 3 :(得分：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

答案 4 :(得分：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>

答案 5 :(得分：2)

@ font-face的状态格式如下：

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

答案 6 :(得分：2)

在GitHub上转到下面的地址并下载每个FontAwesome文件。

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

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

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

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

答案 7 :(得分：2)

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

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

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

答案 8 :(得分：2)

我收到了以下错误：

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错误消息）。

答案 9 :(得分：2)

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

答案 10 :(得分：2)

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

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

和每个 font-face。

： - ）

答案 11 :(得分：0)

我在IIS中使用ASP.NET，结果我只需要添加 IIS的MIME类型：＆＃39; .woff2＆＃39; /＆＃39; application / font-woff＆＃39;

答案 12 :(得分：0)

在尝试了许多其他方法，以及大量重新安装和检查后，我刚刚通过清除Chrome中的浏览数据（缓存的图像和文件）然后刷新页面来修复此问题。

答案 13 :(得分：0)

如果您使用bootstrap，则更新bootstrap css（bootstrap.min.css）文件和字体文件。我用这个解决方案解决了我的问题。

答案 14 :(得分：0)

当我通过带有.woff选项woff2的Sublime文本打开并保存EditorConfig和。end_of_line = lf文件时，我遇到了同样的问题。 我只是将文件复制到font文件夹而不将它们打开到Sublime中，问题就解决了。

答案 15 :(得分：0)

如果您使用的是Chrome，请尝试添加字体的opentype（OTF）版本，如下所示：

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

干杯！

答案 16 :(得分：0)

我遇到了同样的问题。

将字体版本（例如command-runner.jar）添加到字体URL中应该可以解决问题；）

?v=1.101

单击（右键单击）字体的TTF版本，然后在上下文菜单中选择“获取信息”（Mac OSX）“属性”（Windows），足以访问字体版本。

希望它对任何人都有帮助！

答案 17 :(得分：0)

如果其他答案不起作用，请尝试：

  1. 检查.htaccess文件

    # Fonts
    # Add correct content-type for fonts

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

答案 18 :(得分：0)

检查您的字体的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文件中删除此标签即可。 删除后，您需要进入字体文件夹，然后您将看到： enter image description here

然后，形成这些字体的文件，您只需从文件名中删除版本标签 -v = 4.6.3 。

然后，问题将解决。

答案 19 :(得分：0)

以防万一这与某人有关。我在Visual Studio中使用ASP.NET和C＃遇到了完全相同的错误。当我从Visual Studio中启动该应用程序时，它可以工作，但是却遇到了这个问题。同时，事实证明，我项目的路径包含字符“＃”（c：\ C＃\ testapplication）。这似乎使IIS Express（也许还有IIS）感到困惑，并导致了此问题。我猜“＃”是ASP.NET或更低版本中的保留字符。更改路径很有帮助，现在它可以按预期运行。

问候 克里斯托夫

答案 20 :(得分：0)

帮助我的是我更改了订单。首先加载.eot get，但是我的错误是加载.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;
}

答案 21 :(得分：0)

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

似乎使用空格字符（代码20）触发了此问题。将代码更改为20（空格）以外的其他字符后，字体在Chrome中正常工作。

答案 22 :(得分：0)

我遇到了同样的问题，在 node.js 服务器上运行。问题不是来自我的导航器，而是来自服务器！
我只是在使用 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);
}

答案 23 :(得分：-1)

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

答案 24 :(得分：-3)

我遇到了同样的问题，这对我有用https://github.com/webpack/webpack/issues/1468

相关问题
最新问题