无法解码下载的字体

这是我在Chrome中遇到的错误，不幸的是，search它并没有给我多less结果。 字体本身显示正确。 但是，我仍然得到这个错误/警告。 更具体地说，这是完全的警告：

“解码下载的字体失败： http：// localhost：8000 / app / fonts / Lato / ”

我的CSS是这些：

@font-face { font-family:"Lato"; src: url("../fonts/Lato/"); } html, body { font-family:'Lato'; } 

我只是不明白。 字体应用正确，但警告总是在那里。 试图使用Sans-Serif使字体恢复到正常的浏览器字体，所以这可能是，但我不知道，甚至search后，我什么都没有find。 谢谢！

编辑

有各种各样的字体文件，都来自同一个家庭。 我正试图加载它们。 字体文件是.ttf 。 我从本地文件夹加载它们，并且有各种各样的字体文件，例如Lato-Black.ttf ， Lato-Bold.ttf ， Lato-Italic.ttf等。

Answer 1

在CSS规则中，你必须添加文件的扩展名。 这个例子有最深的支持：

 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } 

Answer 2

在Visual Studio中，我遇到了一个类似的问题，这个问题是由一个错误的url()path引起的。

更改后我停止了这个错误（例如）：

 @@font-face{ font-family: "Example Font"; src: url("/Fonts/ExampleFont.eot?#iefix"); 

对此：

 @@font-face{ font-family: "Example Font"; src: url("../fonts/ExampleFont.eot?#iefix"); 

Answer 3

从格式（'woff'）转换成格式（'font-woff'）帮助我解决这个问题。

只需从Germano Plebani的答案中稍作修改

  @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('font-woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } 

请检查您的浏览器来源是否可以打开它，以及types

Answer 4

确保你的服务器发送了正确的MIMEtypes的字体文件。

我最近有使用nginx的相同的问题，因为它的香草/etc/nginx/mime.types文件中缺less一些字体MIMEtypes。

我解决了这个问题，在我需要他们的位置添加缺less的MIMEtypes，如下所示：

 location /app/fonts/ { #Fonts dir alias /var/www/app/fonts/; #Include vanilla types include mime.types; #Missing mime types types {font/truetype ttf;} types {application/font-woff woff;} types {application/font-woff2 woff2;} } 

你也可以检查一下在nginx中扩展mime.types ： 扩展默认的nginx mime.types文件

Answer 5

我只是有同样的问题，并通过改变解决

 src: url("Roboto-Medium-webfont.eot?#iefix") 

至

 src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype') 

Answer 6

我遇到与font awesome v4.4相同的问题，并通过删除woff2格式来修复它。 我只在Chrome中收到警告。

 @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.4.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } 

Answer 7

有时，当您使用错误的FTP方法上载/下载字体时，会发生此问题。 字体必须使用二进制方法进行FTP编辑，而不是ASCII。 （根据你的心情，它可能会感到违反直觉，大声笑）。 如果您使用ASCII方法ftp字体文件，您可以得到此错误消息。 如果您使用“自动”方法对文件进行ftp，并且出现此错误消息，请尝试使用ftp强制执行二进制方法。

Answer 8

在我的情况下，它是由一个不正确的path文件，在.htaccess。 请检查您的文件path的正确性。

Answer 9

有时，当您使用错误的FTP方法上载/下载字体时，会发生此问题。 字体必须使用二进制方法进行FTP编辑，而不是ASCII。 （根据你的心情，它可能会感到违反直觉，大声笑）。 如果您使用ASCII方法ftp字体文件，您可以得到此错误消息。 如果您使用“自动”方法对文件进行ftp，并且出现此错误消息，请尝试使用ftp强制执行二进制方法

Answer 10

对于我来说，当我使用https引用Google字体时，发生了这个错误。 当我切换到http时，错误消失了。 （是的，我多次尝试确认是原因）

所以我改变了：

 @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900); 

至：

 @import url(http://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900); 

Answer 11

我不得不添加type="text/css"到我的链接标签。 我把它从：

 <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet"> 

至：

 <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet" type="text/css"> 

我改变之后，错误消失了。

Answer 12

我也有同样的问题，但我已经解决了所有.ttf文件的响应标题中添加'内容types'：'application / x-font-ttf'

Answer 13

在我的情况下，这是由创build一个包含字体文件的SVN补丁文件引起的。 像这样：

1. 从本地文件系统添加字体文件到颠覆中继
2. 树干按预期工作
3. 创build树干更改的SVN修补程序，包括添加字体文件
4. 将补丁应用到另一个分支
5. 字体文件被添加到颠覆分支（并可以提交），但已损坏，产生OP中的错误。

解决scheme是直接从我的本地文件系统上传字体文件到分支。 我认为这是因为SVN补丁文件必须将所有内容都转换为ASCII格式，而不一定保留字体文件的二进制文件。 但这只是一个猜测。

Answer 14

对于我来说，错误的是在上传字体文件之前忘记把FTP设置为二进制模式。

编辑

您可以通过上传其他types的二进制数据（如图像）来进行testing。 如果他们也没有显示，那么这可能是你的问题。

Answer 15

如果你正在使用快递，你需要通过添加如下内容来允许静态内容的提供：var server = express（）; server.use（express.static（ './公共'））; // public是应用程序根文件夹，其中包含的字体在任何级别，即公共/字体或公共/ dist /字体… / /如果您使用连接，谷歌类似的configuration。