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

Posted 2023-03-15

【中文标题】谷歌字体：在 CSS 中定义自定义名称

【英文标题】：Google fonts: Define custom name in CSS

【发布时间】：2015-03-26 05:08:44

【问题描述】：

是否可以为 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 作为回答here 是不可能的，因为我没有url 到源文件（ttf、eot、woff、...）。

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

【问题讨论】：

如果您转到您要链接到的 url，您可以获得源文件的链接：fonts.googleapis.com/css?family=Open+Sans，不幸的是它并没有给您所有的 url...它只提供最适合您自己的浏览器的那些

那个网址对font-face无效，所以帮不了我

【参考方案1】：

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

使用a font converter转换字体。

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

@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;

【讨论】：

这是最好的选择，但 OP 提到他不想下载文件。他想直接从 Google CDN 下载字体。另一方面，您提供的在线字体转换器不适用于受版权保护的字体。唯一的免费字体转换器（不关心版权）是：onlinefontconverter.com您对转换的字体数量没有限制......它是完全免费的。

来源：typographyforlawyers.com/… 来源：google.com/fonts/attribution 虽然可以免费下载使用，但有些是不能修改的，所以不能自行转换。来源：developers.google.com/fonts/faq#Any_Page_OK

好吧，好吧...这对我来说是个新闻。标记评论。

【参考方案2】：

此代码适用于您的情况：

<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。

编辑：

IE9+、Firefox、Chrome等支持WOFF格式。 来源：http://caniuse.com/#feat=woff

较少支持 WOFF2 格式： http://caniuse.com/#search=woff2

【讨论】：

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

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

我试图找到一种方法来异步下载文件并为字体应用自定义名称，但这需要将字体文件存储在某处，因为src url 需要external url 或relative url。所以你可以正确解决这个问题，除非你下载字体，转换字体（onlinefontconverter.com——它是免费的，即使是受版权保护的材料）并使用@font-face将它链接到你的html文档。

你不需要存储文件，远程 url 工作正常。

是的，您可以使用任何 URL，无论是 relative url 还是 absolute url。上面使用的绝对 URL（在我提供的答案中）可能会改变。如果改变了，字体就不会在网站上显示了，所以唯一的decent，proper的解决方法就是下载字体文件，如果我们要设置字体系列的自定义名称（OP 请求）。否则，您可以使用<link> 或 JS 代码在您的 HTML DOM 中不断加载最新的字体文件，但您不能更改其字体系列名称。