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

136

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

我不知道我到底缺少什么。我进行了很多搜索并尝试了解决方案，但没有成功。

css  asset-pipeline  ruby-on-rails-4.1  custom-font 
— 迪皮卡卡德
source
2
可能有很多事情：字符编码可能不正确，或者字体本身可能已损坏。可以在“字体簿”或类似物中打开字体吗？快速的Google揭示了Chromium浏览器45版中的错误：code.google.com/p/chromium/issues/detail?id=545924
— Craig
你能解决这个问题吗？
— 编码器
1
就我而言，我必须清除cloudflare缓存并等待几分钟，以便有时间解决问题！
— HoseinGhanbari
我遇到了同样的问题，发现我在Chrome的woff之前需要先拥有woff2字体。
— jcubic

Answers:

138

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

— 弗雷德里克·弗罗德隆德
source
1
如果这是重定向的原因，则可以通过文件扩展名RewriteRule！\。（js | gif | css | jpg | otf | eot | png）$ / redirect [R = 301，L]
— fearis
就我而言，ASP.NET MVC捆绑和最小化实质上是在不更改CSS相对路径的情况下更改CSS的位置。必须删除已经缩小的文件并CssRewriteUrlTransform在BundleConfig中使用。
— Sinjai
22

如果在作为服务器和.net 4 / 4.5的IIS上运行，则可能会缺少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>
展开摘要

— 方人88
source
16

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

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

— 堆栈堆栈
source
该文件在哪里？浏览器甚至会知道它的存在吗？怎么样？
— 奥马尔
@Omar该文件应该位于您的根目录中，并且与浏览器没有任何关系。它描述了git如何管理不同文件格式的行尾。Git可以通过尝试更改行尾来破坏某些文件类型。
— elliottregan
5

尝试 

@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

— 沉玉成
source
4

我的字体损坏了，尽管似乎可以正常加载，并且在Chrome devtools中的Sources似乎可以显示的情况下，字节数不正确，所以我再次下载并解决了它。

— LJT
source
如果使用woff2，则在使用在线转换器后会遇到此问题。需要使用命令行woff2转换器（可通过自制软件使用）
— rob-gordon
4

只需在@ font-face上声明格式，如下所示：

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

— Oleksiy Stryzhak
source
3

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

将此添加到您的.gitattributes文件，然后尝试。

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary
— 阿比耶耶
source
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>
— SkorunkaFrantišek
source
如果您可以说，这是很棒的，您必须为这些文件添加哪个文件？
— Saiyaff Farouk
1
编辑web.config
— SkorunkaFrantišek'17
我无法在angular-cli项目中归档web.config文件。使用版本1.3.0。有什么线索吗？
— 塞亚夫·法鲁克
仅当您将客户端应用程序托管在IIS（包括Azure Web Services）上时，才使用Web.config。
— SkorunkaFrantišek'17
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错误消息）。

— DJ戴夫马克
source
我没想到要检查文件本身..确保也不要直接下载此链接（“另存为”），而是输入它并使用“下载”按钮。
— 奥马多恩18'Oct
1

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

在您之后，您 @font-face{} 必须声明 $my-font: "OpenSans3.0 or whatever";

这是每个字体的

:-)

— 安托万
source
您是在谈论字体系列吗？
— Nadav B
现在不记得了，抱歉:-)
— Antoine
1

对于angular-cli和webpack用户，我怀疑在css文件中导入字体时存在一些问题，因此也请提供用单引号编码的网址位置，如下所示-

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

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

— ip_x
source
1

我有同样的问题。

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

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

— 乐凡
source
0

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

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

干杯!

— Buitregool
source
0

如果使用引导程序，则更新引导程序css（bootstrap.min.css）文件和字体文件。我解决了这个问题。

— FRabbi
source
0

在尝试了许多其他方法并进行了许多重新安装和检查之后，我刚刚解决了该问题，方法是从Chrome中清除浏览数据（缓存的图像和文件），然后刷新页面。

— 安迪·洛伦兹（Andy Lorenz）
source
0

打开和保存.woff并保存时，我遇到了同样的问题。woff2通过Sublime Text带有EditorConfig选项的文件end_of_line = lf。我只是将文件复制到字体文件夹，而没有将它们打开到Sublime中，因此问题得以解决。

— 用户名
source
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. 清除浏览器缓存并重新加载
— 安德烈·桑格里（Andrea Zangheri）
source
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文件中删除此标记。删除此内容后，您需要转到字体文件夹，然后您将看到： 在此处输入图片说明

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

然后，问题将解决。

— 艾哈迈德亲王
source
0

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

关于克里斯托夫

— 雷兹巴赫
source
到底有什么问题？
— Nelles
code无法解码下载的字体：localhost：52963 / css /…
— x-of Rezbach
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;
}
— 乔斯·法布尔
source
-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";
— 加彭什
source
7
尽管此代码段可以解决问题，但提供说明确实有助于提高您的帖子质量。请记住，您将来会为读者回答这个问题，而这些人可能不知道您提出代码建议的原因。
— andreas
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.