css - 字体 SRC 在 HTML/CSS 中不起作用

Question

我正在尝试使用位于主站点文件夹 (erbosdraco_nova_nbp.ttf) 中的外部字体，但它不起作用并显示默认的 html 字体。

@font-face

{
font-family: "fontFlightboard";
src: url('templates/erbosdraco_nova_nbp.ttf')
    ,url('Sansation_Light.eot'); /* IE9 */
}


#loginaccess {
    width:450px;
    height:200px;
    background-color:#F3F3F3;
    float:center;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    text-align:left;
    font-family:"fontFlightboard";
}

谢谢。

Answer 1

首先，您必须将字体转换为所需的格式，如 eot、ttf、svg 等。您可以转到此链接可将字体从一种类型转换为另一种类型:http://www.fontsquirrel.com/fontface/generator

最后，将此代码作为第一件事包含在您的 CSS 文件中:

`@font-face {
    font-family: 'JosefinSlab';
    src: url(../JosefinSlab-SemiBold.eot);
    src: url(../JosefinSlab-SemiBold.ttf) format('truetype'),
         url(../JosefinSlab-SemiBold.svg) format('svg'); 
}`

确保字体文件的路径正确。