0

我在使用@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 黑色字体时。它不会改变，这意味着自定义字体仍然没有被删除。所以...我很困惑，我做得对吗？好吧，我猜不是。

4

2 回答 2

2

您的语法是正确的，但它非常基本。首先，使用这个推荐的@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 开头使用 / 会将浏览器定向到域的根目录。因此，将其粘贴到域名后的地址栏中，看看它是否下载了字体文件，如果是，则您的链接是正确的。

于 2012-04-22T03:59:24.447 回答
0

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

@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 文件和正确的路径。

于 2012-04-22T05:52:31.807 回答