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

Failed to decode downloaded font, OTS parsing error: invalid version tag + rails 4

提问by Deepti Kakade

I am doing assets pre-compile, and running the application in production mode. After compilation when I load the my index page I got followings warnings in the chrome console:

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

The issue is its not loading icons instead of that its showing squares.

问题是它没有加载图标而不是它显示的方块。

we used the custom fonts and the code is:

我们使用了自定义字体，代码是：

@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;
}

I don't know what is missing from my end . I searched a lot and also tried solution but not got any success.In development mode its working fine but don't know why its showing square in the production mode.

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

回答by Fredrik Frodlund

I got the exact same error, and in my case it turned out to be because of a wrong path for the @font-facedeclaration. The web inspector never complained with a 404 since the dev server we're using (live-server) was configured to serve up the default index.html on any 404:s. Without knowing any details about your setup, this could be a likely culprit.

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

回答by Squareman88

If running on IIS as the server and .net 4/4.5 it might be missing mime / file extension definitions in Web.config - like this:

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

回答by stacksonstacksonstacks

I was having the same issue., 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

我遇到了同样的问题。, 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

If you got this error message while trying to commit your font then it is an issue with .gitattributes "warning: CRLF will be replaced by LF"

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

The solution for this is adding whichever font you are getting the issue with in .gitattributes

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

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

Then I deleted corrupt font files and reapplied the new font files and is working great.

然后我删除了损坏的字体文件并重新应用了新的字体文件并且运行良好。

回答by Yu-Shing Shen

try

尝试

@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;
}

and rename your file to application.css.scss

并将您的文件重命名为 application.css.scss

回答by LJT

I had a corrupted font, although it appeared to be loading without problem and under Sources in Chrome devtools appeared to display, the byte count wasn't correct, so I downloaded again and it resolved it.

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

回答by Abhijeet

I had the same issue and that was because of the git treating these files as text. So while checking out the files in build agents, binary was not maintained.

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

Add this to your .gitattributesfile and try.

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

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

回答by Oleksiy Stryzhak

Just state format at @font-face as following:

只需在@font-face 声明格式如下：

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

回答by DJDaveMark

I was getting the following errors:

我收到以下错误：

Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag

which was fixed after downloading the raw file directly from:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

直接从以下位置下载原始文件后已修复：https:
//github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

The problem was that there was a proxy error when downloading the file (it contained the HTML error message).

问题是下载文件时出现代理错误（它包含 HTML 错误消息）。

回答by Robert Bolton

Go to the address below on GitHub and download each of the FontAwesome files.

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

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

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

...but instead of right-clicking and saving the link as, click on each of the files and use the 'Download' button to save them.

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

I found that saving the link as downloaded an HTML page and not the FontAwesome file binary itself.

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

Once I had all of the binaries it worked for me.

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

回答by Skorunka Franti?ek

When using angular-cli, this is what works for me:

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