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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 23:04:11  来源:igfitidea点击:

font-face with wrong MIME type in Chrome

cssgoogle-chromefont-face

提问by moonstruck

This is the @font-facedeclaration 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 类型。”

source: http://developer.mozilla.org/en/css/@font-face

来源:http: //developer.mozilla.org/en/css/@font-face

回答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/nginxdirectory:

对于 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 .htaccessfound 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 类型

https://github.com/broofa/node-mime

https://github.com/broofa/node-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 字体代替