使用@font-face问题

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

现在的问题是艺术帖子黑色作品，但当我删除艺术帖子黑色字体时，SimplyDelicious也不能工作。它不会改变，这意味着自定义字体仍然不会被删除。所以..。我很困惑，我做得对吗？好吧，我想不是。

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

字体更新:如果字体名称中包含空格，则在@-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文件和正确的路径。