css - Chrome 中 MIME 类型错误的字体

Question

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

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

这在 Firefox 中运行良好，但在 Chrome 中运行不佳。 “检查元素”后，我收到以下消息:

Resource interpreted as font but transferred with MIME type 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