下载的字体解码失败

Question

这是我在Chrome中遇到的错误，不幸的是搜索它并没有给我太多结果。字体本身显示正常。然而，我仍然收到这个错误/警告。更具体地说，这是完整的警告：

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

我的CSS如下：

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

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

我就是不明白。字体应用得没问题，但警告一直在那里。试图使用“无衬线字体”会使字体恢复为正常的浏览器字体，所以可能是这个原因，但我不确定，即使搜索了也没有找到答案。谢谢！

编辑

有各种字体文件，都来自同一个字体家族。我正在尝试加载它们。字体文件是.ttf格式的。我从本地文件夹加载它们，有各种字体文件，比如Lato-Black.ttf，Lato-Bold.ttf，Lato-Italic.ttf等等。

- Luís Ferreira

---

为什么URL末尾要加斜杠？你是想加载目录中的所有文件还是实际上是重定向到单个字体文件？ - Álvaro González

@ÁlvaroG.Vicario 您好，谢谢您的时间。我编辑了问题以使其更清晰。 - Luís Ferreira

我遇到了一个与 .FON 文件相关的相同问题。 - RixTheTyrunt

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客户端会破坏文件（不是在本地计算机上的情况）。请确保以二进制传输文件而不是ASCII。

- Germano Plebani

---

我编辑了我的问题以使其更清晰。我不确定它是否改变了你发布的任何内容。对于混乱，我很抱歉，谢谢你的时间。 - Luís Ferreira

你一定要使用@font face吗？我知道Lato在Google字体中可用。无论如何，你可以尝试这个代码： font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url('../font/file for regular font.wof') format('wof'); 这段代码适用于每种类型的字体，包括常规、粗体等。 - Germano Plebani

我最终使用了谷歌字体选项，效果很好。谢谢。我接受了你的答案。 - Luís Ferreira

这个问题被标记为“无法解码下载的字体”。答案针对特定情况，没有明确说明这个错误的含义。 - Krii

我正在使用一个 .FON 文件。 - RixTheTyrunt

谢谢，我只是从我的woff2文件得到一个警告。我使用Transfonter将我的ttf文件转换为woff2。现在woff2文件可以使用了。就像Transfonter修复了它一样！ - undefined

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

---

对我来说，./或../都不起作用，但是完全删除/后面的字符就可以了，从/assets...变成了assets...。非常感谢！ - Shereef Marzouk

重要的是要理解每个符号的含义。../ 表示父目录，而单独的斜杠 / 则表示根目录。您需要调整 URL，使其指向包含字体文件的目录。有时您可能会使用类似 ../../ 的东西。 - Joseph Kreifels II

Answer 3

我不得不在我的链接标记中添加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">

我修改后错误消失了。

- nabjoern

---

谢谢，它有效。因此，如果有人正在从Google加载字体，只需添加type="text/css"，在浏览器控制台中的警告消息将在“强制”刷新后消失。 - lewis4u

Answer 4

确保您的服务器以正确的发送字体文件。

最近我使用nginx时遇到了相同的问题，因为一些字体mime类型在其基本的/etc/nginx/mime.types文件中缺失。

我通过在需要它们的位置添加丢失的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文件

- Matteo

Answer 5

将format('woff')更改为format('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 */
}

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

- Fuad Husni

---

字体格式应该是"woff"，而不是"font-woff"。由于这个错误，Chrome无法识别这种字体格式，会跳过它，尝试使用下一个可用的最佳格式（可能是ttf或woff2）。 - Arthur

非常感谢，有了这个解决方案，我也能够解决其他格式（ttf，woff2等）的问题了。 - Far

很遗憾，这个答案是错误的。可能不清楚 @Arthur 在说什么，但如果您更改字体格式名称，浏览器将会完全忽略该字体，因为它没有注册为字体。在 Chrome 的检查工具（F12）中，转到“应用程序”选项卡，然后到框架> 顶部> 字体。尝试使用此解决方案，您将看到字体被移除。我很少在 Stack Overflow 上使用负分，但在这种情况下，这个答案实际上使读者变得更糟，因为他们可能认为已经解决了问题，实际上只是掩盖了它。 - André C. Andersen

正如@AndréC.Andersen所说，“这个回答只是掩盖了问题，而没有解决它。” - JohnK

完全回答是错误的，应该被删除。 - chojnicki

Answer 6

我刚遇到了相同的问题，通过更改解决了它。

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

to

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

- Christian Rauchenwald

Answer 7

对我而言，在使用https引用谷歌字体时出现了此错误。当我切换至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);

- Venryx

---

当我使用谷歌字体时，遇到了同样的错误，当我进行“硬刷新”后，问题自动解决了！ - Maulik

-1，抱歉。在这种情况下，不应该使用取消https支持！ 这会使您的网站变得不安全（https://www.troyhunt.com/heres-why-your-static-website-needs-https/）。@MaulikGangani的观察是正确的！请考虑将其整合到您的答案中。 - Ciprian Tomoiagă

Answer 8

我的问题发生在除Chrome之外的浏览器中。 注意URL和格式之间的逗号，这是如何使所有浏览器恢复正常的。说实话，“格式”没有也可以正常工作，但我决定让它保持原样。

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

- MetaTron

---

请注意：.ttf 的正确格式是 truetype。因此应该是 src: url("path_to_font/roboto.ttf"), format("truetype")。 - herrstrietzel

Answer 9

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

- Giuseppe

Answer 10

我曾遇到与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;
}

- Francisco Goldenstein

---

是的！我移除了 format('woff2')，警告消失了。谢谢。 - duyn9uyen