迁移到可变字体

1. 简介

上次更新日期：2022 年 4 月 4 日

269e1597309e5d7a.png

通过可变字体适应界面上的动态可变性，从而加快布局、主题和无障碍功能的响应速度，同时提升应用运行速度！

学习内容

  • 什么是可变字体。
  • 如何使用可变字体自定义字体。
  • 如何将可变字体应用于您的设计。
  • 如何使用 Google Fonts API 和 CSS 实现可变字体。

前提条件

在本实验中，我们将在一些基础设计概念的基础上进行构建。

  • 具备有关字体比例的知识。
  • 了解 Figma。
  • 具备 HTML 和 CSS 方面的基础知识。

所需条件

2. 开始

设置

首先，您需要访问 Designlab Figma 文件。此实验所需的一切资源都在 Figma 文件中。您可以下载并导入该文件，也可以从 Figma 社区复制该文件。

首先，登录 Figma 或创建一个帐号。

从 Figma 社区复制

转到 Migrating to Variable fonts 文件，或在 Figma 社区中搜索“Migrating to Variable fonts”（迁移到可变字体）。点击右上角的 Duplicate（复制），将该文件复制到您的文件中。

2cb1a5f77aab6012.png

文件版式

浏览文件时，请注意该文件是独立的，开头是一个简介。每个部分被划分为一行链接在一起的画板，其中包含一些核心概念，然后是练习。这些部分和练习相辅相成，应依序完成。

本 Codelab 将详细介绍这些概念并引导您完成练习。请继续阅读本 Codelab，详细了解新的 Material You 功能。

从介绍性画板开始，系统提供了一些按钮，用于按顺序将画板链接到一起。如需访问链接，请点击按钮。

289defd9d067d2f0.png

检查可变字体

在开始之前，我们需要确保有一个可变字体！此文件使用 Figma 中已有的 Roboto Flex，您也可以从 fonts.google.com 下载该字体

3.什么是可变字体？

可变字体是一种全新的创新型字体格式，可让用户控制其字体和图标。Roboto Serif 和 Roboto Flex 是为可变字体技术而打造的全新字体，每个字体都有各种各样的轴。64c74a7d7844423.png

审美表达和轴

设计人员不再局限于旧的硬设置样式，例如常规、粗体、斜体等。可变字体中的变量由轴或实例控制。如果由字体设计人员选择，字体设计中的任何变量都可以分配给用户可控制的轴。常用轴包括斜体、光学尺寸、斜度、粗细、宽度。这五项是 CSS 中的注册轴。

优势

可变字体可让您在单个字体文件中提供多种样式，使网站更具可持续性、更小、速度更快，并且使设计人员能够更好地控制表现力。

77346d3812d79acc.png

4.在设计中使用可变字体

更改轴

我们来了解一下所有可用的参数（或轴）及其影响。选择右侧的字体，打开“Type Details”模态（更多图标），打开轴滑块，然后浏览各个参数。

  1. Weight 用于定义字母的粗细，可提供完整且连续的笔画粗细范围。

5f18f2f50f6dc4da.gif

  1. Width 是字体的字符占用了多少水平空间的结果。

dddc87cccfcb47f9.gif

  1. 将样式从直立调整为倾斜（也被排版人员称为“倾斜”样式）。Slant 也可朝向另一个方向（尽管很少见），称为“反斜”或“反向倾斜”样式。

1b7fbf03fcbf16dc.gif

  1. Grade 是字体光学粗细的辅助修饰符，与 Weight 轴无关。Weight 和 Grade 都会影响字母的粗细，但使用 Grade 进行的调整会更加精细。

35705cb05c8df559.gif

  1. Optical Size。将样式调整为以点为单位的特定文本大小。如果字体较小，系统通常会对字母进行优化，以提高可辨度，同时采用宽松的间距/字距，以及细节更少的较粗笔画。如果字体较大，系统通常会针对笔画较细、形式更详细、粗细和宽度更极端的大标题优化字母。

ed569d469ebd40d6.gif

请查看可变字体演示，了解如何使用 Figma 之外的可变字体轴。

5. 逐步提升样式

如果您遵循品牌风格指南，则可能有一个既定的字体比例来告知排版限制条件。使用可变字体并不意味着舍弃这种一致性。这样可在单个文件中进一步提高字体比例的灵活性（用于在深色背景上增加粗细和坡度等用例）。

ecb7c0b0056fc315.png

虽然一个字体比例可以包含多个字体系列，但我们在这里仅使用其中一个来自定义 Material 默认字体比例的精简版本。

  1. 下面我们开始使用正文副本自定义字体比例。这样，我们就可以首先设置网站的基本字体大小，并进行光学调整。默认选择 Body Large is 18pt（正文大号为 18pt），并将其设置为 Roboto Flex。过去，为了提高可辨度，我们需要调整字体大小和字体粗细（这意味着需要再创建一个字体文件），但现在我们可以对一些轴进行微调。调整光学尺寸、坡度和粗细。
  2. 继续设置标签。标签更加实用，用于更短小的上下文，例如按钮。以光学方式调整坡度，使标签能够正确显示在按钮容器和条状标签上。
  3. 持续优化标题、大标题和大号字。这三种字体均用于强调效果为中等到突出的较短文本，例如网页标题和版块。由于大标题和大号字的尺寸和强调效果比较突出，因此它们可能会更具表现力。您可以随意使用此处的所有轴！
  4. 选择字体后，点击 4 个点并添加 (+) 以设置文本样式，从而使可重用的字体设置保持一致。

您可以使用 Material Theme Builder 或通过复制 M3 设计套件来生成 Figma 样式的默认 Material 字体比例。

6.应用于界面

设置好字体比例后，我们便可将其应用于界面元素，以在代码中实现！考虑如何使用可变字体来提高表现力和可辨度。如果您在上一个练习中设置了 Figma 样式，则可以应用这些样式，然后更新样式的轴。

18efaa2c7bc6ecac.png

  1. 查看左侧的界面元素。第一张卡片包含植物类型、说明和一些类别标记，其余卡片则介绍了植物养护说明。植物类型很适合突出强调，因此请使用“大标题”样式。将其设为我们之前设为大标题的内容。养护卡片也有标题，但强调效果不尽相同，因此请将它们设置为“标题”。
  2. 可以为植物详细信息和说明文案分配“正文大号”，而为类别标签分配“标签大号”。
  3. 您可以实验不同的角色，并调整界面元素和字体比例以找到适当的平衡点。

f646755b99db0161.png

7. 在代码中实现

789408aab925944f.png

可在代码中使用 CSS 实现可变字体，这一方法与使用字体交付服务加载字体并使用 CSS 属性进行自定义的任何网页字体类似。

我们将使用基本的 HTML 和 CSS（而不是 MWC 或任何框架）来实现。

Google Fonts 中的可变字体

将 Google Fonts 用作字体交付服务，以便在您的网站上轻松实现多种字体（包括可变字体）！

访问 fonts.google.com，浏览有哪些可变字体。在“Search”（搜索）下方，选中Show only variable fonts（仅显示可变字体）进行过滤。可变字体包含一个靠近页面底部的园地，您可以在其中为系列中提供的每个轴设置滑块。

9ecb4721afd8faa2.png

使用 CSS 设置样式

并非所有字体都有相同数量的可自定义的轴。目前，最常见的参数为 Weight、Width、Slant, Italic 和 Optical Size。

您可以使用在可变字体之前存在的基本 CSS 字体属性来设置这些参数。虽然我们尚未广泛支持所有属性（自 2022 年 5 月起），但您可以使用新属性 font-variation-settings 可靠地设置所有轴。

Axes

Abbreviation

CSS property

Weight

wght

font-weight

Width

wdth

font-stretch

Slant

slnt

font-style*

Italic

ital

font-style*

Optical Size

opsz

font-optical-sizing

*字体样式中的斜度 (slnt) 和斜体 (ital) 并不可靠。

8. 使用 Google Fonts API 导入

一直以来，我们只使用 Roboto，但现在可以在 fonts.google.com 上查看所有可用的字体。

在本 Codelab 的剩余部分中，我们将继续使用 Roboto，并根据我们之前的练习自定义以下卡片中的字体。

  1. 将此包含卡片示例界面的代码复制到您选择的 Web IDE 中。
<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */

/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>
  1. 请记下我们在上个练习中为大标题、标题、正文和标签设置的样式规范。考虑到这一点，请转到 Roboto Flex 对应的页面。对滑块进行设置，使其符合您在 Figma 中设置的规范，然后为每个要添加到侧面抽屉式导航栏中的滑块选择此样式。
  2. 在抽屉式导航栏中的所选样式下方，找到“Use on the Web”（在 Web 上使用）。将字体添加到代码中的方法有两种：按 <link> 添加，或通过 @import 添加。您只需要使用其中一种方法，让我们选择 @import。
  3. 从 @import 复制到分号中，并将其粘贴到导入注释后的样式标记中。
  4. 由于 Roboto Flex 是唯一使用的字体，因此请通过添加导入代码中包含的“CSS rules to specify families”来将正文设置为调用字体系列。
body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

这将会导入所选的字体和样式集，但使用轴范围时，您可以使用连续的样式范围，而不是个体样式。要创建范围，请使用 .. 联接两个值（例如 100..900）。请确保您添加的仅是字体滑块中存在的范围，否则将无法正确加载。

这最适合用于实现平滑动画切换以及在浏览器中进行实验，因为此操作会加载整个范围并导致下载请求较大。

9. CSS 可变字体属性

导入字体后，让我们返回到 Figma，提取一些 CSS 属性来设置样式，并查看 font-variation-settings CSS 属性。

  1. 从右侧面板中选择的大标题的 h1 开始，选择顶部的检查标签页。这会将面板切换到代码检查模式以进行开发者移交。代码是最后一部分。
  2. 如果您尚未执行此操作，请将格式下拉菜单更改为 CSS。系统会列出使用的标准属性 (font-weight, font-stretch, font-style, font-optical-sizing)，后跟包含未注册的自定义轴的低级别 font-variation-settings。请先使用标准属性，然后再使用 font-variation-settings。

Figma 使用 font-variation-settings（而不是 font-stretch）设置宽度 (wdth)。

62fbb715711beb75.png

  1. 复制与字体相关的以下 CSS 代码，以设置 h1 选择器的样式。
h1 {
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}
  1. 可以将养护卡片标题的样式复制到 h2 中。对正文副本执行相同操作，即复制到 p。可以将标签样式复制到 .label 中

73252104c94e2053.png

10. 恭喜

62930ad88ed65971.png

太棒了，您已经开始使用可变字体、学习如何在设计中使用这些字体，以及在网络中实现这些字体。

如果您有任何疑问，请随时通过 Twitter 上的 @MaterialDesign 向我们咨询。

敬请关注 youtube.com/MaterialDesign，了解更多设计内容和教程