Html 无法解码下载的字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30442319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Failed to decode downloaded font
提问by Luís Ferreira
This is an error I am getting in Chrome and unfortunately searching for it hasn't given me much results. The font itself is appearing correctly. However I still get this error/warning. More specifically, this is the full warning:
这是我在 Chrome 中遇到的一个错误，不幸的是，搜索它并没有给我太多结果。字体本身显示正确。但是我仍然收到此错误/警告。更具体地说，这是完整的警告：
"Failed to decode downloaded font: http://localhost:8000/app/fonts/Lato/"
“无法解码下载的字体： http://localhost:8000/app/fonts/Lato/”
My CSS are these:
我的 CSS 是这些：
@font-face {
font-family:"Lato";
src: url("../fonts/Lato/");
}
html, body {
font-family:'Lato';
}
I just do not understand. The font is applied correctly, but the warning is always there. Trying to use Sans-Serifmakes the font revert to the normal browser font, so that may be it, but I am not sure, and even after searching I have found nothing. Thanks!
我就是不明白。字体应用正确，但警告始终存在。尝试使用Sans-Serif会使字体恢复为正常的浏览器字体，所以可能是这样，但我不确定，即使在搜索之后我也没有找到任何东西。谢谢！
EDIT
编辑
There are various font files, all from the same family. I am trying to load them all. The font files are .ttf. I am loading them from a local folder, and there are various font-files, like Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttfetc.
有各种字体文件，都来自同一个系列。我正在尝试将它们全部加载。字体文件是.ttf. 我从本地文件夹加载它们，并有各种字体文件，如Lato-Black.ttf，Lato-Bold.ttf，Lato-Italic.ttf等。
采纳答案by Germano Plebani
In the css rule you have to add the extension of the file. This example with the deepest support possible:
在 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 */
}
EDIT:
编辑：
"Failed to decode downloaded font" means the font is corrupt, or is incomplete (missing metrics, necessary tables, naming records, a million possible things).
“无法解码下载的字体”意味着字体已损坏或不完整（缺少指标、必要的表格、命名记录、一百万种可能的东西）。
Sometimes this problem is caused by the font itself. Google font provides the correct font you need but if font face is necessary i use Transfonterto generate all font format.
有时这个问题是由字体本身引起的。Google 字体提供了您需要的正确字体，但如果需要字体，我使用Transfonter生成所有字体格式。
Sometimes is the FTP client that corrupt the file (not in this case because is on local pc). Be sure to transfer file in binary and not in ASCII.
有时是损坏文件的 FTP 客户端（在这种情况下不是因为在本地 PC 上）。确保以二进制而不是 ASCII 传输文件。
回答by alex
I experienced a similar issue in Visual Studio, which was being caused by an incorrect url()path to the font in question.
我在 Visual Studio 中遇到了类似的问题，这是由url()相关字体的错误路径引起的。
I stopped getting this error after changing (for instance):
更改后我停止收到此错误（例如）：
@@font-face{
font-family: "Example Font";
src: url("/Fonts/ExampleFont.eot?#iefix");
to this:
对此：
@@font-face{
font-family: "Example Font";
src: url("../fonts/ExampleFont.eot?#iefix");
回答by Fuad Husni
Change from format('woff') into format('font-woff') help me to solve this problem just now.
将 format('woff') 更改为 format('font-woff') 帮助我解决了刚才的问题。
Just change a little change here from Germano Plebani answer
只需从 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 */
}
Please check if your browser sources can open it and what is the type
请检查您的浏览器来源是否可以打开它以及类型是什么
回答by nabjoern
I had to add type="text/css"to my link-tag. I changed it from:
我不得不添加type="text/css"到我的链接标签。我把它从：
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
to:
到：
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet" type="text/css">
After I changed it the error disappeared.
在我更改它之后，错误消失了。
回答by Matteo
Make sure your server is sending the font files with the right mime/type.
确保您的服务器使用正确的mime/type发送字体文件。
I recently have the same problem using nginxbecause some font mime types are missing from its vanilla /etc/nginx/mime.typesfile.
我最近在使用nginx 时遇到了同样的问题，因为其 vanilla/etc/nginx/mime.types文件中缺少某些字体 mime 类型。
I fixed the issue adding the missing mime types in the location where I needed them like this:
我解决了在需要它们的位置添加缺少的 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;}
}
You can also check this out for extending the mime.types in nginx: extending default nginx mime.types file
您还可以查看此以扩展nginx 中的 mime.types： 扩展默认的 nginx mime.types 文件
回答by Christian Rauchenwald
I just had the same issue and solved it by changing
我刚刚遇到了同样的问题并通过更改解决了它
src: url("Roboto-Medium-webfont.eot?#iefix")
to
到
src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')
回答by Venryx
For me, this error was occuring when I referenced a google font using https. When I switched to http, the error went away. (and yes, I tried it multiple times to confirm that was the cause)
对我来说，当我使用 https 引用谷歌字体时发生了这个错误。当我切换到 http 时，错误消失了。（是的，我多次尝试以确认这是原因）
So I changed:
所以我改变了：
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);
To:
到：
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);
回答by Giuseppe
Sometimes this problem happens when you upload/download the fonts using the wrong FTP method. Fonts must be FTP-ed using binary method, not ASCII. (Depending on your mood, it may feel counterintuitive, lol). If you ftp the font files using ASCII method, you can get this error message. If you ftp your files with an 'auto' method, and you get this error message, try ftp forcing the binary method.
当您使用错误的 FTP 方法上传/下载字体时，有时会发生此问题。字体必须使用二进制方法进行 FTP 编辑，而不是 ASCII。（根据您的心情，这可能会违反直觉，哈哈）。如果您使用 ASCII 方法 ftp 字体文件，您会收到此错误消息。如果您使用 'auto' 方法 ftp 文件，并且收到此错误消息，请尝试 ftp 强制二进制方法。
回答by Ebrahim
In my case it was caused with an incorrect path file, in .htaccess. please check correctness of your file path.
在我的情况下，它是由 .htaccess 中的错误路径文件引起的。请检查您的文件路径的正确性。
回答by Francisco Goldenstein
I was having the same issue with font awesome v4.4 and I fixed it by removing the woff2 format. I was getting a warning in Chrome only.
我在使用 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;
}
