html - CSS3 中的@font-face 不起作用

Question

我正在尝试为我的网站做@font-face，但不幸的是它不起作用。我试过了：

@font-face {
    font-family: BN Shirly; /*Adding a custom font*/
    src: url('Fonts/BN Shirly.ttf');  /*Source of font*/
}

然后在跨度中我想使用文本到：

#categories span {
    color: white;
    font-family: 'BN Shirly';
    font-size: 30px; 
}

我该如何解决这个问题，以便我的自定义字体可以工作？

Answer 1

@font-face {
   font-family: BN-Shirly; /*Adding a custom font*/
   src: url('Fonts/BN-Shirly.ttf');  /*Source of font*/
}


#categories span {
    color: white;
    font-family: BN-Shirly;
    font-size: 30px; 
}

我只是在字体系列中看到一个空格，只需删除空格并尝试一下。并删除声明类中的引号。

更新

@font-face {
    font-family: 'BN-Shirly';
    src:    url('Fonts/BN-Shirly.ttf') format('truetype');
}

Answer 2

首先转到此服务并转换您的字体： http ://www.font2web.com/

然后执行以下 CSS：

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

当然替换你的字体名称。