CSS 使用@font-face 使用多种自定义字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7018535/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use multiple custom fonts using @font-face?
提问by James MV
I'm sure I'm missing something really straight forward. Been using a single custom font with normal font face:
我确定我错过了一些非常直接的东西。一直在使用具有普通字体的单个自定义字体：
@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
All works fine when I use it but if I want to add another custom font what do I do? I've tried separating by comma the next one or adding a whole other font face but can't get the second font working.
当我使用它时一切正常，但如果我想添加另一种自定义字体，我该怎么办？我试过用逗号分隔下一个或添加一个完整的其他字体，但无法让第二个字体工作。
回答by BoltClock
You simply add another @font-facerule:
您只需添加另一个@font-face规则：
@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
@font-face {
font-family: CustomFont2;
src: url('CustomFont2.ttf');
}
If your second font still doesn't work, make sure you're spelling its typeface name and its file name correctly, your browser caches are behaving, your OS isn't messing around with a font of the same name, etc.
如果您的第二个字体仍然不起作用，请确保您正确拼写了其字体名称和文件名，您的浏览器缓存正常运行，您的操作系统没有乱用同名字体等。
回答by Adam Stacey
If you are having a problem with the font working I have also had this in the past and the issue I found was down to the font-family:name. This had to match what font name was actually given.
如果您在使用字体时遇到问题，我过去也遇到过这个问题，我发现的问题归结为字体系列：名称。这必须与实际给出的字体名称相匹配。
The easiest way I found to find this out was to install the font and see what display name is given.
我找到的最简单的方法是安装字体并查看给出的显示名称。
For example, I was using Gill Sans on one project, but the actual font was called Gill Sans MT. Spacing and capitlisation was also important to get right.
例如，我在一个项目中使用 Gill Sans，但实际的字体称为 Gill Sans MT。间距和大写也很重要。
Hope that helps.
希望有帮助。
回答by tdammers
Check out fontsquirrel. They have a web font generator, which will also spit out a suitable stylesheet for your font (look for "@font-face kit"). This stylesheet can be included in your own, or you can use it as a template.
查看fontsquirrel。他们有一个网络字体生成器，它还会为您的字体生成合适的样式表（查找“@font-face kit”）。此样式表可以包含在您自己的中，也可以用作模板。
回答by Adam Stacey
You can use multiple font faces quite easily. Below is an example of how I used it in the past:
您可以很容易地使用多种字体。以下是我过去如何使用它的示例：
<!--[if (IE)]><!-->
<style type="text/css" media="screen">
@font-face {
font-family: "Century Schoolbook";
src: url(/fonts/century-schoolbook.eot);
}
@font-face {
font-family: "Chalkduster";
src: url(/fonts/chalkduster.eot);
}
</style>
<!--<![endif]-->
<!--[if !(IE)]><!-->
<style type="text/css" media="screen">
@font-face {
font-family: "Century Schoolbook";
src: url(/fonts/century-schoolbook.ttf);
}
@font-face {
font-family: "Chalkduster";
src: url(/fonts/chalkduster.ttf);
}
</style>
<!--<![endif]-->
It is worth noting that fonts can be funny across different Browsers. Font face on earlier browsers works, but you need to use eot files instead of ttf.
值得注意的是，字体在不同的浏览器中可能很有趣。早期浏览器上的字体可以使用，但您需要使用 eot 文件而不是 ttf。
That is why I include my fonts in the head of the html file as I can then use conditional IE tags to use eot or ttf files accordingly.
这就是为什么我将我的字体包含在 html 文件的头部，因为我可以使用条件 IE 标签相应地使用 eot 或 ttf 文件。
If you need to convert ttf to eot for this purpose there is a brilliant website you can do this for free online, which can be found at http://ttf2eot.sebastiankippe.com/.
如果您需要为此目的将 ttf 转换为 eot，有一个很棒的网站，您可以免费在线执行此操作，可以在http://ttf2eot.sebastiankippe.com/上找到。
Hope that helps.
希望有帮助。
回答by 5ulo
I use this method in my css file
我在我的 css 文件中使用这个方法
@font-face {
font-family: FontName1;
src: url("fontname1.eot"); /* IE */
src: local('FontName1'), url('fontname1.ttf') format('truetype'); /* others */
}
@font-face {
font-family: FontName2;
src: url("fontname1.eot"); /* IE */
src: local('FontName2'), url('fontname2.ttf') format('truetype'); /* others */
}
@font-face {
font-family: FontName3;
src: url("fontname1.eot"); /* IE */
src: local('FontName3'), url('fontname3.ttf') format('truetype'); /* others */
}
