css - CSS：使用已安装的字体

Question

我正在尝试在我的网页上使用从 dafont.com 安装的名为“Bebas Neue”的字体。我正在运行 Ubuntu，我在字体查看器中打开了字体并成功安装。现在我尝试在我的 CSS 中像这样引用字体：

font-family: 'Bebas Neue', sans-serif;

但是，这仍然显示默认字体。我是正确引用它还是需要做更多才能使用这种字体？

Answer 1

使用@font-face 方法。http://fontsquirrel.com在这方面有很多免费和免费的商业使用资源。您可以将字体上传到他们的生成器中，它会为您提供一个包含跨浏览器字体文件和说明的简洁工具包。

这是一个例子：

@font-face {
    font-family: 'OpenSansLight';
    src: url('fonts/fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

然后在要应用它的任何元素上引用它

<style type="text/css">
div {
    font-family: OpenSansLight;
}
</style>


<div>
    This is OpenSansLight!
</div> 

Answer 2

尝试

@font-face
{
font-family: myFirstFont;
src: url('Bebas Neue.ttf'),
     url('Bebas Neue.eot'); /* IE9 */
}

其中 src 是字体的路径。

将字体放入您的项目文件夹中。

并使用如下，

div
{
    font-family: myFirstFont;
}