Question

这是我使用的@font-face声明：

@font-face {
    font-family: SolaimanLipi;
    src: url("font/SolaimanLipi_20-04-07.ttf");
}

这在Firefox中完美运行，但在Chrome中却不行。在“检查元素”之后，我收到以下消息：

资源解释为字体但使用MIME类型application / octet-stream传输。

任何建议都将受到赞赏。

Answer 1

与往常一样，不同的浏览器有不同的需求。这是一个跨浏览器@fontface声明，取自Paul Irish blog -

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

.eot用于IE，其余浏览器使用.woff或.ttf 如果需要从源字体生成不同类型，可以使用Font Squirrel的font-face generator

您还需要.htaccess添加以下类型的字体位置：

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Answer 2

您可以忽略该警告，并可能希望考虑有关该主题的帖子Proper MIME type for fonts

其中还提到了以下内容：

“注意：因为TrueType，OpenType没有定义的MIME类型，和WOFF字体，指定的文件的MIME类型不是认为是“

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

Answer 3

您的字体文件未使用正确的MIME类型进行传输。这是一个可以轻松修复的Web服务器配置问题。

对于nginx，将其与现有类型配置合并，通常位于/etc/nginx目录中：

types {
    application/vnd.ms-fontobject    eot;
    application/x-font-woff    woff;
    font/otf    otf;
    font/ttf    ttf;
}

对于Apache，请将这些行添加到文档根目录中的.htaccess：

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Answer 4

如果你可以编辑.htaccess文件，你应该尝试添加

addType font/ttf .ttf

否则你可以改用svg / svgz字体

Answer 5

如果您使用nodeJS运行服务器，这是一个很好的模块来映射您的mime类型

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

Chrome中的MIME类型错误的font-face

5 个答案: