Question

我在使用@ font-face时遇到了一些麻烦，这让我很困惑。我想我做对与否。

所以我发了声明

@font-face{
    font-family: Art Post black; 
    src: url('/fonts/ArtPostblack.ttf');
    }
@font-face{
    font-family: SimplyDelicious; 
    src: url('/fonts/SimplyDeliciousFont3.ttf');
    }

然后拨打电话

#blah{font-family:Art Post black; } #blah2{font-family:SimplyDelicious;}

现在问题是Art Post黑色作品，但SimplyDelicious不起作用当我删除Art Post黑色字体时。它没有改变意味着仍然没有删除自定义字体。所以...我很困惑，我做得对吗？好吧，我猜不是。

Answer 1

你的语法是正确的，但它是非常基本的。首先，使用这种推荐的@ font-face语法：

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
}

更新：如果字体名称中包含空格，则需要在@ font-face语法和css选择中围绕字体名称“”。如果您的代码显示没有单引号或双引号，则无法正确选择。这可能是你的问题。使用这种新的防弹语法也可以使其更具跨浏览性。

来源：http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

然后确保您的链接正确无误。请记住，在URL的开头使用/将浏览器定向到域的根目录。然后将其粘贴到域名后的地址栏中，看看是否下载了字体文件，如果是，则链接正确无误。

Answer 2

这种调用不同字体的方式可能会有所帮助：

@font-face {
    font-family: 'myriadproregular';
    src: local('myriadproregular'), url('myriadproregular.ttf') format("truetype");
}
@font-face {
    font-family: 'myriadprocond';
    src: local('myriadprocond'), url('myriadprocond.ttf') format("truetype");
}
@font-face {
    font-family: 'myriadprosemibold';
    src: local('myriadprosemibold'), url('myriadprosemibold.ttf') format("truetype");
}

and in your case 



@font-face{
    font-family: Art Post black; (why this font name have space? it was supposed to be like ArtPostblack )

    src: url('/fonts/ArtPostblack.ttf');
    }
@font-face{
    font-family: SimplyDelicious; 
    src: url('/fonts/SimplyDeliciousFont3.ttf');
    }

并确保它们靠近css文件和正确的路径。

使用@ font-face问题

2 个答案: