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

我确定我确实缺少一些直接的东西。正在使用具有常规字体的单个自定义字体：

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

使用时一切正常，但是如果要添加其他自定义字体，该怎么办？我尝试用逗号分隔下一个字体或添加其他字体，但是无法使第二种字体起作用。

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

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

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

如果第二种字体仍然无法使用，请确保正确拼写了其字体名称和文件名，浏览器缓存行为正常，操作系统没有弄乱相同名称的字体等。

如果您在使用字体方面遇到问题，我过去也曾遇到过这种问题，而我发现的问题则归结为font-family： name。这必须与实际提供的字体名称匹配。

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

例如，我在一个项目上使用Gill Sans，但实际的字体称为Gill Sans MT。间距和首字母缩略对于正确行事也很重要。

希望能有所帮助。

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

您可以轻松使用多个字体。以下是我过去如何使用它的示例：

<!--[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/上找到。

希望能有所帮助。

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