如何在 css 中包含 .otf？

Posted 2023-03-15

【中文标题】如何在 css 中包含 .otf？

【英文标题】：How to include .otf in css?

【发布时间】：2016-03-17 13:20:48

【问题描述】：

我试图在 css 中包含字体但没有成功。在控制台中我收到错误 在控制台中。但是当我包含另一种带有 .ttf 扩展名的字体时，它的工作原理。有什么建议吗？

@font-face 
    font-family: 'Novecentowide-DemiBold';
    src: url("/wp-content/themes/test/fonts/Novecentosanswide-DemiBold.otf"); 
    src: url("/wp-content/themes/test/fonts/Novecentosanswide-DemiBold.otf") format("opentype");
    font-style: normal;

【问题讨论】：

***.com/questions/3245141/… 的副本

你看到我已经试过了吗？

【参考方案1】：

如果您使用的是开放字体，您可以尝试使用这样的转换器：http://www.fontsquirrel.com/tools/webfont-generator 建议将几种文件格式绑定到字体，因为默认情况下并非每个浏览器都支持每种格式： （根据字体松鼠）

TTF 适用于除 IE 和 iPhone 以外的大多数浏览器。 仅限 EOT IE。 WOFF 压缩的新兴标准。 SVG iPhone/iPad。

【讨论】：

According to caniuse.com，自 2011 年 3 月起，适用于 ios 的 Safari 和 Chrome 支持 TTF。

【参考方案2】：

为什么要包含两次字体路径？

尝试包含一次：

@font-face 
    font-family: 'Novecentosanswide-DemiBold'; 
    src: url("/wp-content/themes/test/fonts/Novecentosanswide-DemiBold.otf") format("opentype");
    font-style: normal;

另外，字体系列和路径也不同。字体系列为 Novecentowide-DemiBold，字体路径为 Novecentosanswide-DemiBold。这些应该是一样的。我在上面的 CSS 中为你修复了它，假设 Novecentosanswide-DemiBold 是正确的路径，而不是另一个。

您可能还需要向页面添加 MIME 类型：

<system.webServer>
    <staticContent>
      <mimeMap fileExtension=".otf" mimeType="font/opentype" />
    </staticContent>
</system.webServer>

【讨论】：

我试过这个，但我在控制台中得到一个错误......当我尝试打开该文件时，我在浏览器中得到这个：“由于扩展​​配置，您请求的页面无法提供服务. 如果页面是脚本，添加处理程序。如果要下载文件，添加 MIME 映射。"

查看我的更新答案，其中包含您的 OTF 字体的 MIME 类型。