自定义字体无法正确显示

Question

我正在尝试在我的网站中加载自定义字体。在我的style.css中，我声明了以下属性

@font-face {
    font-family: billabong;
    src: url('./fonts/billabong.ttf');
    font-weight: bold;
}

h1.header {
    font-family: billabong;
}

在我的HTML中，我有以下代码;

<h1 class="header">Welcome to</h1>

然而，它似乎是默认某些其他字体类型所以我认为它找不到它。

字体是从我的css文件返回一个目录，在一个名为fonts的文件夹中，我是否提供了正确的路径来查找它？如果这不是问题，有谁知道我做错了什么？

Answer 1

尝试在font-family属性中添加Apostrophes。

font-family: 'billabong';

还可以使用更多格式。并非所有浏览器都支持ttf。 在此处详细了解：http://socialcompare.com/en/comparison/browser-fonts-support-comparison

您可以在此处将ttf导出到webfont：http://www.font2web.com/

Answer 2

我认为这里唯一的问题是你的目录。

首先尝试将您的字体文件一直放到与html文件相同的目录中。

然后试试这段代码：

@font-face {
    font-family: billabong;
    src: url(billabong.ttf);
    font-weight: bold;
}

h1.header {
    font-family: billabong;
}

如果这不起作用，请尝试使用font-weight：bold;进入标题类，看看是否有帮助。

如果有效，请将其放回原处。我讨厌猜测，但据我所知，你的css文件中有一个字体文件。我假设你的html文件是一个比你的css文件更高的目录。在这种情况下，你可以说

@font-face {
    font-family: billabong;
    src: url(css/fonts/billabong.ttf);
    font-weight: bold;
}

h1.header {
    font-family: billabong;
}

您不需要为您的属性或源网址使用撇号我已经使用自定义字体制作了许多网站，并且没有看到兼容性等问题。

无论如何，我总是会参考w3schools网站，他们会以最好的方式解释它： http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

希望这有帮助。