CSS Chrome 中 MIME 类型错误的字体
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4051826/
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
font-face with wrong MIME type in Chrome
提问by moonstruck
This is the @font-face
declaration I have used:
这是@font-face
我使用的声明:
@font-face {
font-family: SolaimanLipi;
src: url("font/SolaimanLipi_20-04-07.ttf");
}
This is working perfectly in Firefox but not in Chrome. After "inspect element" I got the following message:
这在 Firefox 中运行良好,但在 Chrome 中不运行。在“检查元素”之后,我收到以下消息:
Resource interpreted as font but transferred with MIME type application/octet-stream.
资源被解释为字体但使用 MIME 类型应用程序/八位字节流传输。
Any suggestions will be appreciated.
任何建议将不胜感激。
回答by Eran Galperin
As usual, different browsers have different needs. Here is a cross browser @fontface declaration, taken from the Paul Irish blog-
像往常一样,不同的浏览器有不同的需求。这是一个跨浏览器的@fontface 声明,摘自Paul Irish 的博客——
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('?'),
url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
.eot is for IE, the rest of the browsers use either .woff or .ttf If you need to generate the different types from the source font, you can use Font Squirrel's font-face generator
.eot 用于 IE,其余浏览器使用 .woff 或 .ttf 如果您需要从源字体生成不同类型,您可以使用 Font Squirrel 的font-face 生成器
You also need to an .htaccess to the location of the fonts adding the following types:
您还需要 .htaccess 到添加以下类型的字体的位置:
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
回答by Domokun
You can ignore the warning and may want to consider this post on the topic, Proper MIME type for fonts
您可以忽略警告,并可能需要考虑这篇关于字体正确 MIME 类型主题的帖子
Which also mentions the following:
其中还提到了以下内容:
"Note: Because there are no defined MIME types for TrueType, OpenType, and WOFF fonts, the MIME type of the file specified is not considered."
“注意:因为没有为 TrueType、OpenType 和 WOFF 字体定义 MIME 类型,所以不考虑指定文件的 MIME 类型。”
回答by jchook
Your font files are not being trasferred with the proper MIME type. This is a web server configuration issue that can easily be fixed.
您的字体文件没有使用正确的 MIME 类型进行传输。这是一个可以轻松修复的 Web 服务器配置问题。
For nginx, merge this with existing types config, usually found in the /etc/nginx
directory:
对于 nginx,将其与现有类型配置合并,通常在/etc/nginx
目录中找到:
types {
? ?application/vnd.ms-fontobject ? ?eot;
? ?application/x-font-woff ? ?woff;
? ?font/otf ? ?otf;
? ?font/ttf ? ?ttf;
}
For Apache, add these lines to .htaccess
found in your Document Root:
对于 Apache,将这些行添加到.htaccess
您的文档根目录中:
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
回答by Daan
If you run a server with nodeJS, this is a nice module to map your mime types
如果你使用 nodeJS 运行服务器,这是一个很好的模块来映射你的 mime 类型
回答by Daan
if you can edit an .htaccess file you should try add
如果您可以编辑 .htaccess 文件,您应该尝试添加
addType font/ttf .ttf
otherwise you could use a svg/svgz font instead
否则你可以使用 svg/svgz 字体代替