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

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

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

Answer 2

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

尝试包含一次：

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

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

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

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

如何在CSS中包含.otf？

2 个答案: