css - 是否可以为 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 预处理器中使用变量不是一个选项。

score 4 · Accepted Answer

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

它的名称设置为“Akronim”，我认为您不能使用任何其他名称来引用它。

score 3 · Accepted Answer

是的，非常容易。一旦你在谷歌找到了字体，例如。

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

只需将您的浏览器定向到指定的 url：

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

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

score -2 · Accepted Answer

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

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

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

3 回答 3