添加字体

本页说明如何向 UI 添加新字体。这些说明假设您已经创建了默认 UI 的分支，并且能够自定义它。

涉及三个步骤：

  1. 将字体添加到您的 UI 项目

  2. 在您的样式表中添加 font-face 声明

  3. 在样式表中使用新字体

您如何在 font-face 声明中引用字体文件取决于您决定如何管理它。您可以使用 NPM 管理字体或手动下载并将其直接添加到 UI 项目中。以下各节依次描述每种方法。

npm管理

你可以使用 npm (或 Yarn )来管理字体。这种方法使您不必将字体文件直接存储在 UI 项目中。以下是所涉及的步骤。

  1. 使用 npm (或 Yarn )从包中安装字体文件(例如: typeface-open-sans )

    npm install --save typeface-open-sans

  2. 在 src/css 中，添加一个相应的 CSS 文件（例如 Typeface-open-sans.css ）

  3. 在该文件中，声明字体：

    @font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src:
    local("Open Sans"),
    local("Open Sans-Regular"),
    url(~typeface-open-sans/files/open-sans-latin-400.woff) format("woff")
}

    Gulp 构建会识别 ~ URL 前缀，并将字体从 npm 包中复制到构建文件夹(以及 bundle )中。

    您必须为每种字重和样式组合(例如，font-weight:500 + font-style: italic )定义一个 @font-face ，从您想要在样式表中使用的字体中定义。

  4. 将刚创建的 typeface CSS 文件导入到主样式表中，src/css/site.css 中（与其他 typeface 导入相邻）

    @import "typeface-open-sans.css";

  5. 对于要在该包中使用的每种字体样式和粗细，重复前面的步骤。

  6. 更改 CSS 以使用新导入的字体

    html {
  font-family: "Open Sans", sans;
}
    TIP

    如果您正在使用默认的 UI ，则可能希望使用 src/css/vars.css 中定义的变量来定义或更新字体系列。

    1. 通过预览 UI 来测试新字体：

      gulp preview

    如果看到新的字体，就说明您已经成功地将其添加到 UI 中。如果不确定，请在浏览器的开发人员工具中查找页面上的 所有字体 部分，以查看字体是否已加载。

手册

添加字体的一种更简单的方法是将它们直接存储在项目中。以下是所涉及的步骤。

  1. 下载字体文件并将它们添加到 src/font 文件夹中。如果不存在该文件夹，请创建它。

  2. 在 src/css 文件夹中，添加一个相应的 CSS 文件（例如，typeface-open-sans.css ）

  3. 在该文件中，声明字体：

    @font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src:
    local("Open Sans"),
    local("Open Sans-Regular"),
    url(../font/open-sans-latin-400.woff) format("woff")
}

    请注意，路径是从 src/css 文件夹开始到 src/font 文件夹的相对路径。

    你必须为你想在样式表中使用的字体的每个字体粗细和样式组合(例如，font-weight: 500 + font-style: italic )定义一个 @font-face 。

  4. 将刚创建的 typeface CSS 文件导入到主样式表中，src/css/site.css 中（与其他 typeface 导入相邻）：

    @import "typeface-open-sans.css";

  5. 对你想要使用的字体样式和粗细重复上述步骤。

  6. 更改 CSS 以使用新导入的字体：

    html {
  font-family: "Open Sans", sans;
}
    TIP

    如果您正在使用默认的 UI ，您可以使用在 src/css/vars.css 中定义的变量来定义或更新字体系列。

  7. 通过预览 UI 来测试新字体

    gulp preview

如果看到新的字体，就说明您已经成功地将其添加到 UI 中。如果不确定，请在浏览器的开发人员工具中查找页面上的 所有字体 部分，以查看字体是否已加载。