无法解码下载的字体

Question

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

将格式（'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 2

我在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 3

在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 */
}

编辑：

未能解码下载的字体意味着字体损坏或不完整（缺少指标、必要的表、命名记录、一百万种可能的东西）。

有时候这个问题是字体本身造成的。谷歌字体提供你需要的正确字体，但如果字体脸是必要的，我使用Transfonter生成所有字体格式。

有时是FTP客户端损坏了文件（在这种情况下不是因为它在本地pc上）。确保以二进制而不是ASCII传输文件。