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

@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

Answer 3

如果您使用的是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配置文件。

@ font-face CSS属性不起作用

3 个答案: