Chrome无法识别@font-face OTF字体

Question

我的网站在Chrome浏览器中无法读取'proxima nova' otf字体，不知道原因。以下是CSS代码：

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

非常感谢任何想法。

- 321

Answer 1

我遇到了同样的问题，你不需要为otf字体指定格式，只需删除src属性的最后一部分:

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

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

https://github.com/facebook/create-react-app/issues/2609#issuecomment-311231425

- Elias Platek

---

这应该是这个问题的正确答案，它对我起作用了。 - marco

为了增加额外的上下文——在Chrome中，浏览器甚至没有尝试下载字体，甚至没有404错误。我认为这就是OP所说的“不会捡起”的意思，但是为了帮助其他人，我进行了澄清。 - kdub1312

Answer 2

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

- Amit Arora

Answer 3

不同的浏览器喜欢不同的字体文件格式，例如IE只承认.eot格式，而我认为WebKit浏览器更喜欢.ttf文件。

使用Squirrel's font face generator创建所需的所有各种字体文件，它还会为您提供如何在CSS字体声明中正确包含它们的示例。

- mr_lewjam

---

WOFF格式在WebKit浏览器上更可取，但@font-face生成器将处理此问题。 - Jukka K. Korpela

我不确定，但在我使用它时，质量从未降低过。你可以尝试另一个，看看是否有所不同。http://fontface.codeandmore.com/ - mr_lewjam

Answer 4

在Chrome浏览器中，最佳方式是使用Base64编码。

字体的源文件可以使用如下格式：url(data:application/x-font-woff;charset=utf-8;base64

你可以使用http://www.fontsquirrel.com/fontface/generator生成这种格式。

- user1756079