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

Question

我确信我错过了一些非常直接的东西。一直使用带有普通字体的单个自定义字体：

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

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

Answer 1

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

Answer 2

如果您遇到字体工作问题，我过去也遇到过这种情况，我发现的问题是 font-family: 名称。这必须与实际给出的字体名称相匹配。

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

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

希望有帮助。

Answer 3

查看fontsquirrel。他们有一个网络字体生成器，它还会为您的字体生成合适的样式表（查找“@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

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

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

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

如果您的第二种字体仍然无法工作，请确保您正确拼写了它的字体名称和文件名，您的浏览器缓存正常运行，您的操作系统不会乱用同名的字体等。