# 迁移到可变字体 By [brucewu.eth](https://paragraph.com/@brucewu) · 2022-05-16 --- 什么是可变字体？ -------- 可变字体是一种新的创新字体格式，可让用户控制其类型和图标。 **丰富的审美表现和轴** 这里说的轴（Axes）是：字体审计师将字体设计中的任何变量更改都分配给用户进行调整的轴。在字体选择上，设计师将不再局限于旧的硬设置样式，例如常规、粗体、斜体等。可变字体中的变量由轴或实例控制。 常用轴包括：斜体（italic）、光学尺寸（optical size）、倾斜度（slant）、重量（weight）和宽度（width），这五个是 CSS 中的注册轴。 ![可调整的轴](https://storage.googleapis.com/papyrus_images/c64a5d5c8d64054cfbca233939c0e663ba847ce314a51e680df25c34d63366f5.png) 可调整的轴 **好处** 可变字体支持在单个字体文件中调整多种样式，使网站变得更加可持续、更小、更快，同时也提升了产品的表现力。 ![Roboto Flex fonts](https://storage.googleapis.com/papyrus_images/6ce3afd22dc6b5fa101852466744d48ce76045baec8a946d8b4d78f437ff7f38.png) Roboto Flex fonts 迁移到可变字体 ------- 优势：可变字体使产品中的字体具有动态的可变性，可以提升产品页面布局、主题和可访问性的响应能力，同时让您的应用程序更快！ 准备：需要有一个可变字体，比如 [Roboto Flex](https://fonts.google.com/specimen/Roboto+Flex)、Recursive 和 Changa 等。 改变可变字体的轴 -------- 我们可以看看，了解下可变字体可用的所有参数（或轴）及其效果： ![同一个字体，单独调整其某个轴的样式，也可以多个轴来控制。](https://storage.googleapis.com/papyrus_images/1fb1ed9425f701cb6715e77366b3319fb893c3e786620686a84c041c27531e4d.png) 同一个字体，单独调整其某个轴的样式，也可以多个轴来控制。 * **Weight 重量**：定义了字母的粗细。它提供完整且连续的无级厚度变化范围。 * **Width 宽度**：是字体字符占用多少水平空间的结果。 * **Slant 斜度**：将样式从直立调整为倾斜，也被印刷者称为“倾斜”样式。虽然很少见，但 Slant 可以朝另一个方向工作，这被称为“后倾斜”或“反向倾斜”风格。 * **Grade 等级**：是字体光学重量的次要修饰符，与重量轴无关。重量和等级都会影响字母的粗细，但等级的调整要细化得多。 * **Optical Size 光学尺寸**：使样式适应特定的文本大小，以磅为单位。在较小的尺寸下，字母通常会变得更易读，间距/字距较松，笔画较粗，细节较少。在较大尺寸的情况下，字母通常针对具有更细笔画和更详细形式以及更极端的重量和宽度的标题进行优化。 提升风格 ---- 如果你使用本产品的风格指南（Style Guide），将会有个特定类型和比例来确定印刷和网页排版的限制。使用可变字体并不是要放弃风格指南的一致性，可变字体在单个文件中可进一步改进字体类型的灵活性，比如在深色模式上可适当增加字体重量。 虽然字体比例可以包含多个字体体系，我们需要控制变量，下面是只使用一个来定义默认字体比例的精简版本： ![使用 Figma 将调整后的可变字体设置为字体样式](https://storage.googleapis.com/papyrus_images/ccd588cb3ddbb72745d1d80c12c034202b546597f40b5a0b94d35845a9577c25.png) 使用 Figma 将调整后的可变字体设置为字体样式 设置每个字体的类型和比例后，将其应用于 UI 元素并在代码中实现！设置过程中要考虑如何使用可变字体来增加表现力和易读性。如果您在上一个练习中设置了 Figma 样式，则可以应用这些样式，然后更新样式的轴。 在代码中实施 ------ 我们可以使用 CSS 在代码中实现可变字体或使用字体交付服务来加载字体。 Google 字体上的可变字体：推荐使用 [Google Fonts](https://fonts.google.com/) 作为字体交付服务，可以轻松地在您的网站上实现无数字体，包括可变字体！ 并非所有字体都具有相同数量的可自定义轴。目前最常见的css属性有重量、宽度、倾斜、斜体和光学尺寸。 ![](https://storage.googleapis.com/papyrus_images/df40c79b48d7394e01f78125e8bc7493f15a576e508f242974fca4e964c57718.png) 在 Google Fonts 上开启可变字体之旅： [https://material-foundation.github.io/material-symbols-and-variable-fonts/#/start](https://material-foundation.github.io/material-symbols-and-variable-fonts/#/start) --- *Originally published on [brucewu.eth](https://paragraph.com/@brucewu/Ix5Xt3r7jtg5ber22cqe)*