@font-face Safari 字体 mime 类型警告

Posted 2023-03-15

【中文标题】@font-face Safari 字体 mime 类型警告

【英文标题】：@font-face Safari font mime type warning

【发布时间】：2012-03-04 20:51:34

【问题描述】：

我有一个简单的 html/css 布局，通过 @font-face 使用自定义字体：

@font-face 
    font-family: 'Gotham-Medium';
    src: url('../Font/Gotham-Medium.eot');
    src: url('../Font/Gotham-Medium.eot?#iefix') format('embedded-opentype'),
         url('../Font/Gotham-Medium.ttf') format('truetype'),
         url('../Font/Gotham-Medium.svg#Gotham-Medium') format('svg');
    font-weight: normal;
    font-style: normal;

包括 IE6 在内的所有浏览器都能正确加载字体 - 但我在 Safari (5.0.4) 中收到警告。

资源被解释为字体但使用 MIME 类型传输 应用程序/八位字节流。

有趣的事实是，在 Windows/Safari 上字体显示正常（.ttf 文件）但显示警告，但在 Mac/Safari 上，字体显示为透明/不可见 - 根本不显示任何文本（.ttf 字体文件确实加载 + 警告消息也会出现在控制台中）。

有什么想法吗？

【问题讨论】：

你用过松鼠字体吗？ fontsquirrel.com

@Blowski - 是的，我做到了。 font-face 语法应该是正确的 - 我只是删除了 woff 格式，因为我不需要支持它，而且 Safari 也不使用它。

也许这会有所帮助：***.com/questions/2871655/proper-mime-type-for-fonts

如果您要嵌入 Gotham，您将违反 H&FJ 的许可，因为目前没有人有权嵌入他们的字体。

【参考方案1】：

当您的浏览器向网络服务器询问字体文件时，网络服务器会回复标题信息和文件内容。并且似乎网络服务器提供了具有 mime 类型应用程序/八位字节流的 .ttf 文件。浏览器可以期待一些特殊的字体 mime 类型，比如 application/x-font-ttf 您可以在 apache 配置中使用 AddType application/x-font-ttf .ttf 来指定 mime 类型。

顺便说一句，你的@font-face 中有 2 个 src 部分。可能您应该将它们组合成一个，用逗号分隔每个来源。

【讨论】：

font-face 声明没问题，因为它是由 fontsquirel 生成器生成的——我不怀疑这是导致问题的原因。将尝试使用 mime 类型