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

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: name.这必须匹配实际给出的字体名称.

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

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

希望有所帮助.

Answer 3

查看fontsquirrel.他们有一个Web字体生成器,它还会为你的字体吐出合适的样式表(查找"@ font-face kit").此样式表可以包含在您自己的样式中,也可以将其用作模板.

Answer 4

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