Google Fonts——web 设计中的免费字体之选

一、入门使用 Google Fonts

Google Fonts 是一项可以免费使用的字体服务，网站设计人员可以通过它，为其网站选择适合的字体。在 Google Fonts 中有超过 800 种字体，你可以浏览、选择并在网页中应用。我们可以在 HTML 文件中通过以下方法使用 Google Fonts：

    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style>
      body {
        font-family: 'Open Sans', sans-serif;
      }
    </style>

首先，我们从 Google Fonts 中的链接获取所需字体。该链接包含了我们所使用字体的信息。可以在 HTML 的’shead’ 中将该链接文件导入。在’style’ 字段中，我们将字体应用到网页正文 body 的样式上。这段代码中的’sans-serif’ 意味着，如果指定的字体没有被找到，浏览器将默认采用无衬线字体。

二、Google Fonts 中的分类

Google Fonts 中的各个字体被分为六大类别： Serif、 Sans-serif、 Display、 Handwriting、 Monospace、 System fonts。主要分类如下：

1.Sans-serif

Sans-serif 字体适用于任何网站和设计项目。它的主要特点是没有衬线，因此易于阅读，非常常用，包括了以下字体：

    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style>
      body {
        font-family: 'Open Sans', sans-serif;
      }
    </style>

2.Serif

Serif 字体通常更具有艺术性和设计风格。它的特点是有衬线，可以更好地突出文字的重点，包括了以下字体：

    <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
    <style>
      body {
        font-family: 'Merriweather', serif;
      }
    </style>

3.Display

Display 字体非常适合作标题使用，因为它们会引起人们的注意并且非常容易辨认，包括了以下字体：

    <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <style>
      h1 {
        font-family: 'Lobster', cursive;
      }
    </style>

4.Handwriting

Handwriting 字体看起来像手写，很漂亮，非常适合作为个人博客的标题或者商业宣传品的设计。包括了以下字体：

    <link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
    <style>
      h1 {
        font-family: 'Shadows Into Light', cursive;
      }
    </style>

5.Monospace

Monospace 字体是一种等宽字体，可以使代码变得更具有可读性。在编写代码的时候非常实用，包括了以下字体：

    <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
    <style>
      pre {
        font-family: 'Inconsolata', monospace;
      }
    </style>

6.System fonts

System fonts 是最新发布的特性，它可以在不引用 Google Fonts 的情况下使用计算机里已经存在的字体。这对于节省页面加载时间非常有帮助，因为不需要再加载与 Google Fonts 相关的链接文件。以下是代码示例：

    <style>
      .system-font {
        font-family: system-ui;
      }
    </style>

三、复合字体的使用

如果你想在同一篇文章中同时使用两种及以上的字体，你可以通过以下两种方法实现：

1、HTML 代码的应用

    <div style="font-family: 'Montserrat', sans-serif;">
      <p>这是一个 Montserrat 字体</p>
      <p style="font-family: 'Lobster', cursive;">这是个 Lobster 字体</p>
    </div>

2、CSS @font-face 的应用

‘Montserrat-Medium’字体的CSS代码如下：

    @font-face {
    font-family: 'Montserrat-Medium';
    src: url('Fonts/Montserrat-Medium.ttf');
}

通过以下 CSS 将该 Montserrat-Medium 字体应用到某一元素中：

    .class-name {
        font-family: 'Montserrat-Medium', sans-serif;
    }

四、高级用法

1、谷歌字体 JavaScript API

谷歌字体 JavaScript API 是一个用于更简单使用 Google Fonts 的工具。

    <!DOCTYPE html>
    <html>
    <head>
      <title>Tooltip example</title>
      <link href='https://fonts.googleapis.com/css?family=Cherry+Swash' rel='stylesheet'>
      <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
      <script src='https://cdn.rawgit.com/mattmezza/googlefontpicker/1.1/googlefontpicker.min.js'></script>
      <script>
        $(function () {
          $('.font-selector').googleFontPicker();
        });
      </script>
      <style>
        body {
          font-family: 'Cherry Swash', cursive;
        }
      </style>
    </head>
    <body>
      <select class='font-selector'>
        <option value='Open+Sans'>
          Open Sans
        </option>
        <option value='Lobster'>
          Lobster
        </option>
      </select>
    </body>
    </html>

2、Font Data API

Font Data API 是一个 W3C 正在开发的规范，它允许允许浏览器动态下载 Web 字体。这一规范目前仍在调试，但是在未来它可能会让 Google Fonts 更高效地技能名字。

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css" media="all"><!--Optional-->
    <style>
      @font-face {
        font-family: "My Custom Font";
        src: url(fonts/my-custom-font.woff) format("woff2");
        font-weight: normal;
        font-style: normal;
      }
      p {
        font-family: "Open Sans", "My Custom Font", sans-serif;
      }
    </style>

五、总结

Google Fonts 的使用非常方便，可以通过其提供的各种分类和字体，满足不同场景的需求。而其代码示例也非常实用，方便了源代码使用者更快速地了解 Google Fonts 的使用方式。

原创文章，作者：NOBKP，如若转载，请注明出处：https://www.506064.com/n/334503.html