Google Font API基础

最新推荐文章于 2022-05-16 18:06:17 发布

cunqu9743

最新推荐文章于 2022-05-16 18:06:17 发布

阅读量503

点赞数

文章标签： css java html linux python

链接到CSS文件

您实际上是直接直接链接到Google.com上CSS文件。通过URL参数，可以确定所需的字体以及这些字体的哪些变体。

<head>
  
   ...

   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans">
</head>

想法：打开样式表并将@ font-face内容复制粘贴到主样式表中，可以避免额外的网络请求。但请注意：Google会做一些用户代理嗅探工作，有时会根据需要为不同的设备提供不同的服务。如果这样做，您将不会从中受益。

CSS

然后，您可以在CSS中按名称在希望使用它们的任何元素上指定这些新字体。

body { 
  font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; 
  font-size: 48px; 
}

字体加载器

您可以使用FontLoader JavaScript而不是链接到CSS。它有很多优点，例如，控制无样式文本的Flash（FOUT），也有缺点，例如，禁用JavaScript的用户无法加载字体。

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
  WebFont.load({
    google: {
      families: ['Cantarell']
    }
  });
</script>
<style type="text/css">
  .wf-loading h1 { visibility: hidden; }
  .wf-active h1, .wf-inactive h1 { 
    visibility: visible; font-family: 'Cantarell'; 
  }
</style>

这些类名，例如.wf-loading应用于<html>元素。因此请注意，当字体“正在加载”时，您可以使用该类名称来隐藏文本。然后在显示它们时，再次使它们可见。这就是FOUT的控制方式。