是否可以为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

我认为你不能说实话。当您查看Google字体时，Google字体具有预定义的名称。请参阅此示例：http://fonts.googleapis.com/css?family=Akronim

它的名字设置为'Akronim'，我不认为你可以用任何其他名称来引用它。

Answer 2

是的，很容易。在Google上找到字体后，例如

@import url('https://fonts.googleapis.com/css?family=Lato:400&subset=latin-ext');

只需将浏览器指向指定的网址：

https://fonts.googleapis.com/css?family=Lato:400&subset=latin-ext

你得到的是字体（或字体）的@font-face CSS项目。只需在CSS中使用此详细版本而不是原始@import规范。您可以在任何这些描述中自由重命名font-family项。是的，您必须确保与其他字体没有冲突，但命名完全取决于您。

Answer 3

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

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

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