如何在 css 中包含 .otf？

Question

我试图在 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;
}

Answer 1

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

尝试包含一次：

@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>

Answer 2

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

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

如何在 css 中包含 .otf？

How to include .otf in css?

css

fonts

font-face