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

我必须在我的link-tag中添加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 5

我遇到了同样的问题，并通过更改

解决了这个问题

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

到

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

Answer 6

有时，使用错误的FTP方法上传/下载字体时会出现此问题。字体必须使用二进制方法进行FTP编辑，而不是ASCII。（根据你的心情，它可能会觉得违反直觉，哈哈）。如果使用ASCII方法ftp字体文件，则可能会收到此错误消息。如果你使用＆＃39; auto＆＃39;来ftp你的文件？方法，你得到这个错误信息，尝试ftp强制二进制方法。

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

Answer 8

我遇到了与字体真棒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;
}

Answer 9

在我的情况下，它是由.htaccess中的错误路径文件引起的。请检查文件路径的正确性。

Answer 10

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

修改

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

Answer 11

在我的情况下-通过与Gatsby一起使用React-通过双重检查所有路径解决了该问题。我在Sass上使用React / Gatsby，而Gatsby源文件在与已编译文件不同的位置查找字体。将文件复制到每个路径后，这个问题就消失了。

Answer 12

在我的情况下，这是由创建包含添加字体文件的SVN补丁文件引起的。像这样：

将字体文件从本地文件系统添加到subversioned trunk
Trunk按预期工作
创建主干更改的SVN补丁，包括添加字体文件
将补丁应用于其他分支
字体文件被添加到subversioned分支（并且可以提交），但是已损坏，在OP中产生错误。

解决方案是将字体文件直接上传到本地文件系统的分支中。我认为这是因为SVN补丁文件必须将所有内容转换为ASCII格式，并且不一定保留字体文件的二进制文件。但这只是猜测。

Answer 13

我也有同样的问题，但我通过添加＆＃39; Content-Type＆＃39; ：＆＃39; application / x-font-ttf＆＃39;在所有.ttf文件的响应标题中

Answer 14

我使用.Net Framework 4.5 / IIS 7

要修复此问题，我将Web.config文件放入带有字体文件的文件夹中。

Web.config的内容：

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

Answer 15

就我而言，下载模板时，字体文件只是空文件。可能是下载问题。 Chrome给出了这个一般性错误。我认为起初从woff更改为font-woff的解决方案解决了它，但这只会使Chrome忽略字体。我的解决方案是一一找到字体，然后下载/替换它们。

Answer 16

对我来说，未下载的lfs文件存在问题

git lfs fetch --all

解决了这个问题。

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

Answer 17

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

Answer 18

如果您使用快递，则需要通过添加以下内容来允许提供静态内容： var server = express（）; server.use（express.static（＆＃39; ./公共＆＃39;））; //其中public是app根文件夹，包含其中的字体，在任何级别，即public / fonts或public / dist / fonts ... //如果您使用的是连接，请谷歌进行类似的配置。

Answer 19

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

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

Answer 20

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

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

无法解码下载的字体

20 个答案: