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

【问题标题】：Use multiple custom fonts using @font-face?使用@font-face 使用多种自定义字体？
【发布时间】：2014-12-05 05:54:15
【问题描述】：

我确定我错过了一些非常直截了当的东西。一直在使用具有普通字体的单个自定义字体：

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

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

【问题讨论】：

标签： css fonts font-face

【解决方案1】：

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

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

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

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

【讨论】：

谢谢，现在工作，结果我在尝试时犯了一个微小的语法错误。

【解决方案2】：

如果您在使用字体时遇到问题，我过去也遇到过这个问题，我发现问题归结为 font-family: 名称。这必须与实际给出的字体名称相匹配。

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

例如，我在一个项目中使用 Gill Sans，但实际的字体名为 Gill Sans MT。间距和大写也很重要。

希望对您有所帮助。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

您可以很容易地使用多种字体。以下是我过去如何使用它的示例：

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

希望对您有所帮助。

【讨论】：