css - @font-face CSS 属性不起作用

Question

我正在尝试将自定义字体引入我的网站，这是我的代码：

@font-face {font-family: Bebas Neue; 
      src: url('BebasNeue.otf');
}
body {

  font-family: "Bebas Neue", sans-serif;
  color: #232525;
  padding-top:20px;
  background-color: black;
}

我在同一个文件中将 .otf 文件上传到服务器，并在每个使用它的元素中声明了字体！

我不明白为什么它不起作用！？！

Answer 1

一个完整的@font-face声明应该是这样的：

@font-face {
  font-family: "RegencyScriptFLF Regular";
  src: url("http://site/fontes/RegencyScriptFLF-Regular.eot"); // IE
  src: local("RegencyScriptFLF-Regular"),
  url("http://site/fontes/RegencyScriptFLF-Regular.ttf") format("opentype");
}

然后，您可以在代码中的其他地方使用它：

p { font-family: "RegencyScriptFLF Regular", Cursive; }

Answer 2

如果您使用的是 IIS 服务器 (Windows)，那么问题可能是 IIS 不知道如何提供文件。尝试在 Web.config 文件中为 .otf 添加 MIME 映射。在配置标签中，输入以下内容：

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

我认为您可以通过将 .otf 的地址放在浏览器窗口中来确认这是问题所在。您应该会收到 HTTP 错误 404.3；如果是这种情况，请尝试更新 Web 配置文件。

Answer 3

@font-face {
font-family: bn ;
src: url("bn.otf") format("opentype");
}
@font-face {
font-family: bn;
font-weight: normal;
src: url("bn.otf") format("opentype");
}

body{
font-family:bn;
}

bn 表示 Bebas Neue