可适应的字体

过去，字体的重量和样式被分成不同的字体文件，设计师必须为每种样式上传单独的文件 — 直到现在。通过可适应字体，单一字体的所有变体都合并到一个文件中，从而提高了网站性能，并使设计师能够以更高的权威性和适应性个性化字体样式。

在此教学课程中，您将了解：

1. 自适应字体的概念 
2. 利用自适应字体和字体修改
3. 使用字体变化生成动画过渡
4. 通过字体修改开发交互 
5. 常见问题及解决方法

自适应字体的概念 

自适应字体是一种涵盖整个字体系列（例如 Open Sans、Roboto Flex 等）的字体，而不仅仅是一种样式或实例。以前，设计师需要多个字体文件才能访问各种字体粗细（例如 Light 100、Bold 700 等），这种方法只能在设计中实现有限的粒度，并且可能会影响网站性能。自适应字体涵盖字体系列范围内的所有粗细，使设计师能够以更高的复杂性和精度定制字体样式。 

小建议： 您可以通过以下平台查找自适应字体： Google 字体, V 字体， 和 丰特斯克. 

此外，自适应字体提供了沿多个轴（即字体属性）的控制，而这些轴以前是设计师无法访问的。有 5 个常用轴用于管理字体的已知、可预见的属性 - 重量、宽度、视觉大小、倾斜度和斜体 - 但自适应字体还可以包含自定义轴，用于指示字体设计师选择的字体的其他设计元素 - 例如，字体的柔软度、笔画粗细度、上升部的高度等。 

利用自适应字体和字体变化

开始之前： 确保您已在 站点设置 > 字体 选项卡。可以通过以下平台找到可适应的字体： Google 字体, V 字体， 和 丰特斯克. 了解有关上传自定义字体的更多信息。 

至关重要的： Webflow 支持 TTF、OTF、WOFF 和 WOFF2 格式的自适应字体。不支持 EOT 和 SVG 格式。 

要使用可适应的字体并编写字体变体： 

1. 选择您想要在设计器画布上进行样式化的排版组件（例如标题、文本链接等）
2. 导航至 样式面板 > 排版 > 字体 下拉菜单中指定您的自适应字体 自定义字体 
3. 单击旁边的文本框 变化 显示字体变化菜单
4. 通过移动滑块或手动输入每个变体旁边的值来调整您喜欢的字体变体（例如，粗细、宽度等）

通过识别“点” 显示在字体选择器中。将鼠标悬停在“点”。

记住： 如果你设置字体粗细 样式面板 > 排版 部分，然后在重量轴上添加字体变化，字体变化将取代之前指定的字体重量。 

至关重要的： 如果您调整字体变体并切换到另一种字体，则之前对原始字体所做的任何字体修改都将被删除。

有用的提示： 您可以在不同的媒体查询（“断点”）或上级元素上定义不同的字体变体，以将字体变体应用于所有子文本元素。与其他排版特征（例如字体系列、字体大小、颜色等）一样，字体变体是一种可继承的属性。

您可以通过启动字体变体菜单，将鼠标悬停在要消除的变体上（例如粗细、宽度等），然后点击“垃圾“ 图标。

如何通过字体变体创建动画过渡

您还可以为不同的元素情况（例如，浮动、聚焦等）设计字体变体，并在基本情况（“无”）和替代情况之间组成生动的过渡。

提醒： 设计动画过渡时，请谨慎考虑可访问性，避免突然、不可预见或过度的动作。深入了解如何利用周到的动作和动画。

针对特定情况开发字体变体：

1. 指出您想要格式化的元素
2. 打开 样式面板 > 选择器 场地
3. 如果尚未应用任何类别或标签，则为元素指定类型或选择其 HTML 标签
4. 点击 向下箭头 展开 状态 下拉菜单并选择您想要设计的情况（例如，悬停、按下、聚焦等）
5. 导航 样式面板 > 排版 并选择您的可变字体（如果之前没有为所选元素设置字体，或者您希望在所选情况下改变整个字体系列）
6. 按下旁边的文本框 变体 打开字体变体菜单
7. 通过滑动控制器或手动输入每个修饰符旁边的值来选择您喜欢的字体更改（例如粗细、宽度等）

提醒： 您将无法访问 情况 如果您选择的元素没有分配类或 HTML 标签，则会出现下拉列表。

接下来，您可能希望设计一个动画过渡，用于基本状态和替代状态之间的转换。要制定动画过渡，请执行以下操作：

1. 按照上述步骤创建替代状态的字体变体
2. 展开 样式面板 > 选择器 场地
3. 点击 向下箭头 揭开 情况 下拉列表并选择“无”
4. 前往 样式面板 > 效果 并点击“加”图标旁边 过渡
5. 融入您想要的任何过渡效果（例如字体颜色、字体变化等）
6. 指定 期间 你的过渡效果
7. 点击“打开缓动编辑器”图标来个性化 缓和（如果需要）

如何通过字体变化产生交互

交互还支持可变字体，允许您使用字体变体制定不同的动画。

提醒： 在设计动画时，请考虑可访问性，并避免突然、急促或过度的动作。了解有关使用刻意动作和动画的更多信息。

要构建与字体变化的交互：

1. 发起 交互面板
2. 点击 ”加”图标附加 元素触发器 （例如，鼠标悬停、滚动到视图中等）或 页面触发器 （例如，页面加载、页面滚动等）
3. 展开 行动 从开始操作部分下拉菜单（即，如果您选择鼠标悬停元素触发器，则可以展开 行动 下拉菜单 悬停时 部分）
4. 选择下面的动画 自定义动画
5. 设计您的定制动画并选择 字体变化 在下面过程 部分 > 看 向上 格式变化 部分
6. 导航至 字体变化 并选择 变体 显示字体变化设置
7. 通过移动控件或输入每个变体旁边的值来调整首选的字体调整（例如，粗细、宽度等）

常见问题和解决问题的提示 

哪里可以找到适合我的设计的字体？ 

您可以通过以下平台发现自适应字体 Google 字体, V 字体， 和 丰特斯克.

哪些字体文件格式与适应性字体兼容？ 

Webflow 可适应 TTF、OTF、WOFF 和 WOFF2 格式的字体。不支持 EOT 和 SVG 格式。 

自定义字体的最大尺寸是多少？ 

您可上传每个字体文件的最大大小为 4MB。

在推出此功能之前，我之前上传过一种灵活字体，但无法添加变体。我该如何添加字体变体？ 

继续 站点设置 > 字体 选项卡，删除自适应字体，然后重新上传自适应字体文件。之后，当您在设计器中访问您的网站时，您应该能够添加字体变化！ 

我通过 Google Fonts 或 Adobe Fonts 集成选择了可适应字体，但无法访问字体变体。如何添加字体变体？ 

目前无法通过 Google 字体或 Adobe Fonts 集成使用字体变体。您可以从字体集成中下载或获取字体，然后将其作为自定义字体上传到 站点设置 > 字体 选项卡以利用字体变化。了解有关自定义字体的更多信息。

我在字体升级为新的字体变体轴之前上传了自适应字体。如何在新轴上添加字体变体？

您需要重新上传字体才能使用新的字体变体轴。前往 站点设置 > 字体 选项卡，删除适配字体，重新上传适配字体文件。

为什么某些轴标签未按预期显示？ 

设计器中显示的字体变体轴的标签取决于上传的自适应字体文件。如果自适应字体的字体设计器未包含人性化标签，则 Webflow 默认使用轴标签。

字体变体如何排序？多个字体变体可以共享同一轴吗？ 

字体变体可以在同一轴上进行多种修改，因为这种做法符合 CSS 规范。层次结构中最低的轴在应用的 CSS 中优先。例如，如果您设计了以下字体变体： 

倾斜：0

重量：146

宽度：300

光学尺寸：18

重量：1000 

最终应用于字体的“重量”为 1000。 

“倾斜”轴和“斜体”轴有何区别？ 

尽管斜体和倾斜轴紧密相关，但倾斜轴管理字体文件的倾斜属性，以实现倾斜或直立样式，而斜体表现出与受草书影响的倾斜样式不同的框架。 了解有关斜轴的更多信息.