无法解码下载的字体，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

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

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

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

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

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

Answer 3

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

这篇文章可能很旧，但这是对我有用的解决方案。

Answer 4

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

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

干杯!

Answer 5

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

Answer 6

我在IIS中使用ASP.NET，结果我只需要将MIME类型添加到IIS：'。woff2'/'application / font-woff'

Answer 7

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

Answer 8

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

Answer 9

我有同样的问题。

将字体版本（例如?v=1.101）添加到字体URLS应该可以解决问题;）

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

希望它能帮到任何人！

Answer 10

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

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

Answer 11

检查你的字体css文件。（字体awesome.css / font awesome.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
}

您将在字体的文件扩展名后看到版本标记。喜欢：

-c = 4.6.3

您只需要从css文件中删除此标记即可。删除后，你需要转到你的字体文件夹，你会看到：

并且，形成这些字体的文件，您只需要从文件名中删除版本标记-v = 4.6.3。

然后，问题将得到解决。

Answer 12

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

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

Answer 14

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

Answer 15

我有同样的问题., 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 16

尝试

@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

Answer 17

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

Answer 18

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

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

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

Answer 19

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

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

这适用于每个font-face。

:-)

Answer 20

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

Answer 21

我收到以下错误：

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

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

问题描述投票：114回答：21

21个回答

最新问题

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

问题描述 投票：114回答：21

21个回答

最新问题

问题描述投票：114回答：21