Question

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

@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');
}

如果您的第二个字体仍无法正常工作，请确保您正确拼写其字体名称及其文件名，您的浏览器缓存正在运行，您的操作系统没有使用相同名称的字体，等等

Answer 2

如果您在使用字体时遇到问题，我过去也会遇到此问题，而我发现的问题是 font-family：名称。这必须与实际给出的字体名称相匹配。

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

例如，我在一个项目上使用Gill Sans，但实际的字体叫做Gill Sans MT。为了做到正确，间距和资本化也很重要。

希望有所帮助。

Answer 3

结帐fontsquirrel。他们有一个Web字体生成器，它还会为你的字体吐出合适的样式表（查找“@ 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 */
}

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

5 个答案: