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*/
}

然后在 span 中我想将文本用于:

#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');
}