是否可以为Google字体指定自定义名称？

Question

这是一个示例CSS

h1 {
   font-family: 'header-font', arial, sans-serif;
}

p {
   font-family: 'paragraph-font', arial, serif;
}

是否可以加载任何远程Google字体(比如'Lato'),以便CSS中的系列名称为'header-font'？

编辑:这背后的想法是能够轻松交换WP主题中的字体.不幸的是,在我的情况下,在CSS预处理器中使用变量不是一个选项.

Answer 1

是的，当您在 @font-face 样式声明中定义字体系列时，您可以指定任何您想要的名称，并使用该名称稍后在样式表中引用它。

@font-face
{
  font-family: whateverYouWant;
  src: url('example.ttf'),
       url('example.eot');
       ... /* and so on */
}

无论您在 font-family 属性中如何命名样式，文档的其余部分都会引用它。但是我不知道它如何与本地字体文件竞争（因此，如果您尝试将自定义字体命名为 Arial，我不确定您会得到什么 - 自定义字体还是真正的 Arial）。无论如何，我不知道你为什么要这样做。