无法解码下载的字体

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 等

原文由 Luís Ferreira 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 格式传输文件。

原文由 Germano Plebani 发布，翻译遵循 CC BY-SA 4.0 许可协议

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");

原文由 alex 发布，翻译遵循 CC BY-SA 3.0 许可协议