无法解码下载的字体

Question

这是我在Chrome中遇到的错误,不幸的是,搜索它并没有给我太多结果.字体本身正确显示.但是我仍然收到此错误/警告.更具体地说,这是完全警告:

"无法解码下载的字体: http:// localhost:8000/app/fonts/Lato / "

我的CSS是这些:

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

html, body {
    font-family:'Lato';
}

我只是不明白.字体已正确应用,但警告始终存在.尝试使用Sans-Serif使字体恢复到正常的浏览器字体,所以可能是它,但我不确定,甚至在搜索后我什么都没找到.谢谢!

编辑

有各种各样的字体文件,都来自同一个家庭.我试图加载它们.字体文件是.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 */
}

编辑:

"无法解码下载的字体"意味着字体已损坏或不完整(缺少指标,必要的表格,命名记录,一百万种可能的东西).

有时这个问题是由字体本身引起的.Google字体提供了您需要的正确字体,但如果需要字体,我可以使用Transfonter生成所有字体格式.

有时是破坏文件的FTP客户端(在这种情况下不是因为在本地PC上).请务必以二进制文件而不是ASCII格式传输文件.

Answer 2

从格式('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 */
}

请检查您的浏览器源是否可以打开它以及类型是什么

Answer 3

我在Visual Studio中遇到了类似的问题,这是由url()相关字体的错误路径引起的.

更改后我停止了这个错误(例如):

@@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 4

确保您的服务器正在使用正确的mime/type发送字体文件.

我最近使用nginx时遇到了同样的问题,因为它的vanilla /etc/nginx/mime.types文件中缺少某些字体mime类型.

我修复了在我需要它们的位置添加缺少的mime类型的问题,如下所示:

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

我不得不添加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 6

我只是遇到了同样的问题并通过改变来解决它

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

至

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

Answer 7

我的问题发生在与 Chrome 不同的浏览器中。注意 URL 和格式之间的逗号，这就是所有浏览器一切恢复正常的方式。老实说，没有这种“格式”它也可以工作，但我决定保留它。

@font-face {
  font-family: "Roboto";
  src: url("~path_to_font/roboto.ttf"), format("truetype");
}

Answer 8

有时，当您使用错误的 FTP 方法上传/下载字体时，会出现此问题。字体必须使用二进制方法而不是 ASCII 进行 FTP 传输。（根据你的心情，这可能会让人感觉违反直觉，哈哈）。如果您使用 ASCII 方法 ftp 字体文件，您可能会收到此错误消息。如果您使用“自动”方法 ftp 文件并收到此错误消息，请尝试 ftp 强制使用二进制方法。

Answer 9

对我来说，当我使用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);