无法解码下载的字体

这是我在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等。

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

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

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

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

确保您的服务器发送的字体文件具有正确的mime / type。

我最近在使用nginx时遇到了同样的问题，因为其原始/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文件

我必须添加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">

更改后，错误消失了。

我只是遇到了同样的问题，并通过更改解决了

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

至

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

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

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

我在使用真棒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;
}

就我而言，它是由错误的路径文件.htaccess引起的。请检查文件路径的正确性。

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

编辑

您可以通过上传其他类型的二进制数据（例如图像）进行测试。如果它们也无法显示，则可能是您的问题。

我也有同样的问题，但是我通过在所有.ttf文件的响应标题中添加'Content-Type'：'application / x-font-ttf'解决了

就我而言，这是由创建包含字体文件添加内容的SVN补丁文件引起的。像这样：

1. 将字体文件从本地文件系统添加到被颠覆的主干
2. 行李箱按预期工作
3. 创建Trunk更改的SVN补丁，以包括添加字体文件
4. 将补丁应用到另一个分支
5. 字体文件已添加到Subversion分支（可以提交），但已损坏，从而在OP中产生错误。

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

在我的案例中-通过React与Gatsby结合使用-通过仔细检查我的所有路径解决了该问题。我在Sass上使用React / Gatsby，而Gatsby源文件在与编译文件不同的位置查找字体。将文件复制到每个路径后，此问题就消失了。

以我为例，下载模板时，字体文件只是空文件。可能是下载问题。Chrome给出了有关此错误的信息。我一开始以为解决从更改woff为font-woff解决的办法，但这只会让Chrome忽略字体。我的解决方案是一一找到字体并下载/替换它们。

如果您使用Express，则需要通过添加类似以下内容来允许提供静态内容：var server = express（）; server.use（express.static（'./ public'））; //其中public是应用程序根文件夹，其中包含任何级别的字体，即public / fonts或public / dist / fonts ... // //如果您使用connect，则使用google进行类似配置。

我使用.Net Framework 4.5 / IIS 7

要修复它，我将文件Web.config放在带有字体文件的文件夹中。

Web.config的内容：

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>

对我来说，这是未下载的lfs文件的问题

git lfs fetch --all

解决了问题。

参见https://github.com/git-lfs/git-lfs/issues/325

如果它在服务器上（不在本地主机中），则尝试手动上载字体，因为有时FTP客户端（例如FileZilla）会损坏文件，并且可能导致问题。对于我来说，我是使用Cpanel界面手动上传的。

我的情况看上去很相似，但是字体已损坏（因此无法解码）。这是由Maven中的配置引起的。为字体扩展添加nonFilteredFileExtension maven-resources-plugin帮助了我：

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>