谷歌字体：在CSS中定义自定义名称

Question

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

例如：<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

如何使用自定义名称的“Open Sans”字体？

div {
   font-family: 'custom'; // to be same as 'Open Sans'
}

如此处所答，使用@font-face不可能指定自定义名称，因为我没有源文件的url（ttf、eot、woff等）。

链接到Google cdn上的源文件可以解决这个问题。

- lima_fil

---

如果您访问链接http://fonts.googleapis.com/css?family=Open+Sans，您可以获取源文件链接。不幸的是，它并不能给您所有的链接，它只会提供适合您自己浏览器的“最佳”链接。 - Chiri Vulpes

那个URL对于font-face无效，所以它对我没有帮助。 - lima_fil

Answer 1

这段代码适用于您的情况：

<style type="text/css">
@font-face {
    font-family: 'MyCustomOpenSans';
    font-style: normal;
    font-weight: 400;
    src: 
        local('Open Sans'), 
        local('OpenSans'), 
        url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), 
        url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
p {font-family: "MyCustomOpenSans", sans-serif;}
</style>

我不确定它是否足够稳定，因为如果字体有新的更新，URL 将会更改，我也不确定 Google 是否会禁止访问其他 URL。

编辑：

WOFF 格式支持 IE9+、Firefox、Chrome 等浏览器。 来源：http://caniuse.com/#feat=woff WOFF2 格式支持较少： http://caniuse.com/#search=woff2

- Wissam El-Kik

---

谢谢，我可以从响应中获取URL以保持最新。 - lima_fil

我编辑了答案。我添加了WOFF和WOFF2格式的浏览器支持链接。 - Wissam El-Kik

我正在尝试找到一种异步下载文件并为字体应用自定义名称的方法，但这需要将字体文件存储在某个地方，因为src url需要一个external url或relative url。因此，除非您下载字体、转换字体（http://onlinefontconverter.com-即使是受版权保护的材料也是免费的）并使用`@font-face`将其链接到您的HTML文档中，否则无法正确解决此问题。 - Wissam El-Kik

您不需要存储文件，远程URL可以正常工作。 - lima_fil

是的，您可以使用任何URL，无论是“相对URL”还是“绝对URL”。上面使用的绝对URL（在我提供的答案中）可能会更改。如果更改，字体将不会显示在网站上，因此唯一合适，正确解决问题的方法是下载字体文件，如果我们想为字体系列设置自定义名称（OP请求）。否则，您可以使用<link>或JS代码在HTML DOM中不断加载最新的字体文件，但无法更改其字体系列名称。 - Wissam El-Kik

Answer 2

你可以使用@font-face {}下载字体并为其提供自己的名称。

使用字体转换器转换字体。

然后像这样更改字体名称...

@font-face {
  font-family: 'super-wicked-font-yeahhh'; /* CHANGE HERE */
  src: url('fontawesome/fontawesome-webfont.eot');
  src: url('fontawesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fontawesome/fontawesome-webfont.svg#svgFontName') format('svg'),
     url('fontawesome/fontawesome-webfont.woff') format('woff'), 
     url('fontawesome/fontawesome-webfont.ttf')  format('truetype');
}

然后使用以下代码调用字体：

p {
  font-family: super-wicked-font-yeahhh;
}

- Aaron

---

这是最佳选择，但OP提到他不想下载文件。他想直接从Google CDN下载字体。另外，您提供的在线字体转换器无法处理受版权保护的字体。唯一免费的字体转换器（不关心版权）是：http://onlinefontconverter.com/。您可以无限制地转换字体... 完全免费。 - Wissam El-Kik

源： http://typographyforlawyers.com/why-google-web-fonts-arent-really-open-source.html Google Web Fonts虽然可以免费下载和使用，但其中一些字体无法修改，因此您无法自己转换它们。源：https://www.google.com/fonts/attribution 尽管您可以免费下载并使用它们，但其中一些字体不能修改，因此您不能自行转换它们。源：https://developers.google.com/fonts/faq#Any_Page_OK - Wissam El-Kik

哦，哦...这对我来说是个新闻。标记评论。 - Aaron