@ font-face不起作用

Question

我下载了一个字体inlove-light-wf.ttf,以便使用该规则@font-face.

我在我的文件夹中:home.html和inlove-light-wf.ttf.

在我的CSS我有:

@font-face {
    font-family: 'Inlove';
    src: url('inlove-light-wf.ttf');
    font-weight: normal;
    font-style: normal;
}

#definicao{
    text-align:center;
    color:#0080C0;
    font-family:'Inlove';
    font-size:24px;
    margin-top:20px;
    border-top:solid #999 thin;
    padding: 20px 40px 3px 40px;
    height:290px;
    background-color:#EFEFEF;
}

#definicao{
    text-align:center;
    color:#0080C0;
    font-family:'Inlove';
    font-size:24px;
    margin-top:20px;
    border-top:solid #999 thin;
    padding: 20px 40px 3px 40px;
    height:290px;
    background-color:#EFEFEF;
}

但它不起作用.

Answer 1

问题的一个原因可能是您的css位于不在根文件夹中的单独文件中.例如,如果将所有css文件保存在"css"文件夹中,则需要将字体URL修改为相对于该文件而不是根文件夹.在这个例子中它将是src: url('../inlove-light-wf.ttf');

此外,并非所有浏览器都可以使用.ttf字体文件.您必须在@font-facecss中声明其他字体格式.

这是一个修改过的@font-face声明,可以帮助您入门.我还建议在这里和这里阅读更多内容.

@font-face {
    font-family: 'Inlove';
    src: url('inlove-light-wf.eot'); /* IE9 Compat Modes */
    src: url('inlove-light-wf.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('inlove-light-wf.woff') format('woff'), /* Modern Browsers */
         url('inlove-light-wf.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('inlove-light-wf.svg#svgFontName') format('svg'); /* Legacy iOS */
}