html - 字体似乎不起作用

Question

我已经下载了 Bebas Neue.ttf 并通过 ftp 上传到我的 fonts 文件夹。然后我将以下代码添加到我的 css 文件中

@font-face {
font-family: "bebas";
src: url(fonts/Bebas Neue.ttf) format("truetype");
}

为了应用到我的标题头上，我在我的 CSS 中添加了以下代码

  .plain_text .big_title {
font-family: bebas;
font-size: 33px;
font-weight: bold!important;
}

您可以通过此链接看到显示WELCOME TO OUR COMPANY 的磁贴- MY SITE .

我不知道我做错了什么。请帮忙!!谢谢

Answer 1

网页不仅要用ttf格式，还需要eot、woff、svg。

我通常使用web font generator您可以在其中上传和下载字体。

并且也有使用它的演示。

所以现在你可以这样使用:

@font-face {
    font-family: 'bebas';
    src: url('fonts/bebas.eot?') format('eot'), 
         url('fonts/bebas.woff') format('woff'), 
         url('fonts/bebas.ttf')  format('truetype'),
         url('fonts/bebas.svg#bebas') format('svg');
}

玩得开心!