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/zh-hk/n/334503.html