使用@ font-face使用多个自定义字体？

我确定我错过了一些非常简单的事情。 一直使用正常字体的单个自定义字体：

@font-face { font-family: CustomFont; src: url('CustomFont.ttf'); } 

所有工作正常，当我使用它，但如果我想添加另一个自定义字体，我该怎么办？ 我试着用逗号分隔下一个或添加一个完整的其他字体，但不能得到第二个字体的工作。

Answer 1

您只需添加另一个@font-face规则：

 @font-face { font-family: CustomFont; src: url('CustomFont.ttf'); } @font-face { font-family: CustomFont2; src: url('CustomFont2.ttf'); } 

如果第二种字体仍然不起作用，请确保正确拼写其字体名称和文件名，浏览器caching正在运行，操作系统不会混淆同名字体等。

Answer 2

如果你的字体工作出现问题，我也曾经遇到这个问题，而我发现的问题是字体名称。 这必须匹配实际给出的字体名称。

我发现最简单的方法是安装字体，并查看显示名称。

例如，我在一个项目上使用Gill Sans，但实际的字体被称为Gill Sans MT。 间隔和capitlisation也是重要的是得到正确的。

希望有所帮助。

Answer 3

检查字体松鼠 。 他们有一个networking字体生成器，它也会为您的字体吐出一个合适的样式表（查找“@ font-face kit”）。 这个样式表可以包含在你自己的中，也可以用它作为模板。

Answer 4

你可以很容易地使用多个字体。 以下是我过去如何使用它的一个例子：

 <!--[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]--> 

值得注意的是字体在不同的浏览器中可以很有趣。 早期的浏览器的字体工作，但你需要使用eot文件，而不是ttf。

这就是为什么我包括我的字体在HTML文件的头部，因为我可以使用条件IE标签相应地使用eot或ttf文件。

如果您需要将ttf转换为eot用于此目的，您可以在http://ttf2eot.sebastiankippe.com/网站上免费下载这个网站。;

希望有所帮助。

Answer 5

我在我的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 */ }