css - Chrome 没有选择 @font-face OTF

Question

我的网站不会在 Chrome 中获取“proxima nova”otf 并且无法理解为什么.. 这是 CSS：

@font-face {
    font-family:'Proxima Nova';
    src: url("/Fonts/ProximaNova-Regular.otf") format('opentype');
}

任何想法都非常感谢。

score 18 · Accepted Answer

刚遇到同样的问题，otf字体不需要指定格式，去掉src属性的最后一部分即可：

@font-face {
    font-family:'Proxima Nova';
    src: url("/Fonts/ProximaNova-Regular.otf");
}

这条评论帮助我解决了这个问题：

score 3 · Accepted Answer

不同的浏览器喜欢不同的字体文件格式，例如 IE 只会承认 .eot，我认为我说 webkit 浏览器更喜欢 .ttf 文件是正确的。

使用Squirrel 的字体生成器来创建您需要的所有各种字体文件，它还将为您提供一个示例，说明如何将它们全部正确地包含在您的 css 字体声明中

score 3 · Accepted Answer

如果您在浏览器控制台中看到此字体请求的 404 错误，则问题不在于浏览器，而在于服务器端。解决方案是在 Web 服务器上的 IIS 中为 .otf 文件扩展名添加 mime 类型。由于 otf 是一种相当新的格式，它在 IIS serevr 的默认 mime 类型列表中不可用；您必须明确添加一个。

score 2 · Accepted Answer

最适合chrome的是base64

src: url(data:application/x-font-woff;charset=utf-8;base64

共同生成这个

4 回答 4