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

- Vilius Paulauskas

---

为什么你想要这样做呢？如果用户有一个与你的自定义字体名称匹配的本地字体，这不会导致问题吗？ - drmonkeyninja

可能是Google字体：在CSS中定义自定义名称的重复问题。 - Gajus

Answer 1

是的，非常容易。一旦你在Google上找到了字体，例如：

@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项目的名称。是的，您必须确保没有与其他字体冲突，但命名完全由您决定。

- Gábor

---

这是一个不错的起点，但请注意，Google字体返回的CSS取决于浏览器。 - Métoule

Answer 2

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

它的名称被设置为“ Akronim”，我认为你不能使用其他名称引用它。

- azzy81

Answer 3

是的，在@font-face样式声明中定义字体系列时，您可以随意命名，并在样式表中稍后使用该名称进行引用。

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

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

- Ennui

---

只有当你本地存储字体时，这才能起作用。谷歌字体有一个预定义的名称。 - azzy81

不，这一定会成功。只需要小心地给 font-family 命名为保证唯一的名称，比如像这样加上网站标识符：font-family: 'abcweb-header-font;'。http://codepen.io/anon/pen/hAvcp - Jen

谷歌字体集成在哪里？ - Richard

这并没有回答问题。例如，你如何调用 GoogleFont 并给它一个自定义名称为“我的网站通用”。 - rottitime