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;
}

你可以看到通过slink - 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');
}

玩得开心！

Answer 2

你需要字体的所有格式，即EOT，WOFF和TTF来完成任务，其次尽量不要在字体名称“BebasNeue.ttf”而不是“Bebas Neue.ttf”之间留出空格，并且网址必须是在引号'或'

之间

src: url(fonts/Bebas Neue.ttf)

然后应用此代码

@font-face {
font-family: 'Bebas Neue';
src: url('fonts/bebasneue.eot');
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('fonts/bebasneue.woff') format('woff'),
url('fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Answer 3

我遇到了同样的问题，但在删除行末尾的 format（...）字符串时解决了这个问题。尽量做到最简单。

@font-face {
  font-family: 'bebasneue';
  src: url(../fonts/bebasneue/bebasneue.woff);
}

Answer 4

通过C-Link添加上述答案，由于我无法发表评论，请使用双引号确保正确处理字体链接。白色空间可能是一个问题，如果不是现在，那么以后。

src: url("fonts/Bebas Neue.ttf") format("truetype");

您可以在此处参考http://www.w3.org/TR/css3-fonts/#font-reference-the-src-descriptor

了解更多详情

字体表面似乎不起作用

4 个答案: