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

Ofcourse替换你的字体名称。

CSS3中的@ font-face无效

2 个答案: