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