如何用Divi 5的字体设计变量替换字体

字体更新可能是头痛。更改标题字体，突然之间，您正在跟踪它出现的每个位置。错过了一两个标题，您的设计立即感到沮丧。手动更新字体会引起不一致。

Divi 5用字体变量和预设解决了此问题。您可以设置一个字体一次，让系统处理其余部分，而不是追逐每个实例。排版保持干净和统一，无论您使用多少个模块。看看它的简单。

为什么静态字体可以创建问题

静态字体设置创建了一个并发症的网络，随着时间的流逝而变得更糟。当您将字体直接添加到每个元素中时，您会在数百个不同的地方散布排版选择。

您可以使用Playfair显示器建立一个网站，用于标题和Poppins进行身体文本。几个月后，您想切换到更现代的字体堆栈。现在，您可以浏览每个模块，每个预设，每个自定义设置，以查找这些字体居住的位置。甚至想念一个埋葬在证明部分深处的标题，您的设计看起来可能会破碎。

当您手动更新字体一一时，您可能会意外使用不同的尺寸或权重。您将大多数标题更新为32px，但错过了一些保持28px的标题。现在，您曾经的粘合剂设计感觉不平衡。

这种分散的方法将简单的字体变化为主要项目。需要花费几分钟的时间才能进行繁琐的狩猎和更新。您花费的时间更多的时间管理排版，而不是实际设计。

您应该使用的是：Divi 5的设计变量和预设

设计变量存储您的设计设置，您可以在任何地方重复使用。设置一个字体一次，将其保存为设计变量，然后在您的网站上使用它。稍后更改变量，以及使用IT的所有元素自动更新。

Divi提供六种变量类型：数字，文本，图像，链接，颜色和字体。两个默认字体变量已准备就绪：一个用于标题，一个用于身体文本。变量管理器位于数据库图标下的左侧栏中。

这些变量在不支持它们的字段中起作用，例如数字字段，字体字段和间距设置。单击任何受支持字段旁边的变量图标以查看您的选项。

哪个选项组预设会做

选项组预设保存特定样式组，例如排版，边界或间距，而不是整个模块。例如，您可以创建一个仅用于标题字体和尺寸的预设。

当您应用选项组预设时，仅更改该样式区域。其余的模块保持不变。您可以在一个元素上结合不同的预设，而不会出现问题。将设计变量与选项组预设混合，以提高灵活性。创建使用变量的预设。当您更新变量时，所有使用它的预设也更新。

分步指南，以创建Divi 5的动态字体系统

设置字体变量大约需要二十分钟。一旦工作，字体更改就会立即在您的整个网站上发生。这是到达那里的方法：

1。为新系统创建字体变量

通过单击左侧栏上的数据库图标打开变量管理器。转到“字体”选项卡。您会看到两个默认变量：一个用于标题，一个用于身体文本。

• 设置主字体：单击标题变量。选择您的字体家庭和重量，然后节省。对于身体文本，请执行同样的操作，但请选择简洁且易于阅读的内容。
• 如果需要，请添加更多字体：有些设计需要额外的字体来引号，推荐或特殊文本。单击“添加新变量”，并给它一个清晰的名称。
• 填写所有详细信息：每个变量都可以容纳您的字体系列，重量，样式和其他设置。当您想增加重点时，请使用大胆的重量来成为头条新闻，定期重量的身体文本和斜体。
• 保持您的名字简单：而不是混淆标签，而是称其为“引用字体”或“突出显示字体”。
• 请记住要保存：您的更改不会粘住，直到您点击“保存”按钮。

大多数网站只需要标题和身体字体。仅添加满足特殊设计需求的额外变量，而不是小型文本调整。更少的变量使创建新内容变得更加容易。

2。添加字体大小的数字变量

切换到变量管理器中的数字选项卡。在这里，您可以创建与字体一起使用的尺寸变量。将这些视为您的排版量表。

从标题尺寸开始。创建名为H1，H2，H3等的变量。将每个设置为不同的尺寸，对您的设计有意义。您可以使用适应其他屏幕的尺寸（例如Clamp（）等常规像素值或响应式单元（例如Clamp（））。

身体文本也需要其大小变量。将其称为“体型”之类的东西，并将其设置为舒适的阅读尺寸，通常在16px至18px左右。

您还可以为特殊文本需求创建变量。也许您需要标题的“小文本”变量，或者需要一个用于证明的“大文本”变量。清楚地命名它们，以便您记住它们以后的用途。

这些数字变量在您需要一致的尺寸的任何地方都可以使用。使用它们进行线路高度，间距或任何在您网站上多次出现的测量值。当您更新一个数字变量时，使用它的所有内容会自动更改。

大多数网站只需要标题和身体字体。仅添加满足特殊设计需求的额外变量，而不是小型文本调整。更少的变量使创建新内容变得更加容易。

3。使用查找并替换以交换静态字体

右键单击模块设置中的任何字体字段，以查看查找和替换选项。这打开了一个面板，Divi会自动加载当前字体设置。现在，您可以将该静态字体与您的设计变量之一交换。

源元素字段显示您从哪个模块开始。您可以将其更改为您的页面上的任何其他元素作为起点。

查找值显示要替换的任何字体。与其选择另一个静态字体，不如将您的替换值设置为一个字体设计变量之一。

查找并更换字体尺寸的作品。右键单击任何字体大小字段以访问相同的替换面板。这使您可以将元素级别尺寸（例如24px）与数字变量交换。

查找手动设置字体大小的文本模块。这些零散的尺寸设置会产生与静态字体相同的问题。当您想调整排版刻度时，您最终会通过每个模块寻找每个尺寸。用您的H1，H2，体型或其他数字变量替换这些静态尺寸。

设置您的替换边界

查找并替换发生更改的位置控件。选择“整个页面”以更新整个布局的字体。选择“当前元素和儿童”以限制对该特定部分以及嵌套在其中的任何内容的变化。

您还可以针对父容器或特定页面区域。

查找并更换元素类型可帮助您专注于特定模块。选择“所有元素”以进行完整的字体交换，或选择“模块”以跳过容器和结构元素。通过仅针对某些模块类型，您可以获得更具体的特定内容。

避免意外更换

“唯一替换相同的字段”选项可防止不必要的更改。当您想替换字体时，请打开此操作，而不会影响可能共享相同值的其他设置。

即使您替换恰好称为“ 10px”或类似的字体，这将使边界半径保持在10px。

如果没有此设置，请查找并更换各处的目标值。启用了IT，系统仅更改实际的字体字段，而将其他设计设置单独使用。

4。通过您的字体系统工作

您需要单独的查找和更换不同字体重量和样式的操作。您的网站可能会以常规和大胆的重量使用相同的字体系列。单独处理每个变化，用您之前创建的适当的设计变量代替它们。

每次过程都相同：右键单击字体字段，将替换值设置为设计变量，选择范围并应用更改。重复需要更新的每个静态字体。

5。用变量创建预设

访问任何文本模块并导航到“设计”选项卡。找到字体，然后单击预设图标。从下拉菜单中选择标题字体变量。将您的H1号变量应用于尺寸。

配置线高和间距值。将预设命名为“主要标题”并保存。单击星图将其设置为默认值。新的文本模块将自动采用这些设置。所有具有相同标签和任何样式的现有模块也将继承这些设置。

您可以在每个标题级别重复此过程。每个预设都保持一致性，同时服用不同的目的。

这些版式预设与任何包含文本字段的模块一起使用。 Blurb模块，手风琴内容，证明和联系表都接受相同的预设。此跨模块兼容性消除了重复的样式任务。

选项组预设目标特定样式类别。将标题预设应用于按钮文本，同时保持按钮的背景和边框设置完整。

6。将新变量扩展到所有元素

右键单击使用新变量的任何元素。从菜单中选择“扩展属性”。将源元素配置为您最近更新的模块。

将位置设置为“整页”以进行完整的更新。在属性类型下，选择“样式”以专注于设计元素。

启用“仅替换相同的字段”，以防止对填充，边距或其他可能与您的字体大小相匹配的数字值的更改。选择“所有元素”以更新模块和容器，或者选择“模块”以专门针对内容元素。

处理较小部分而不是范围内更新的复杂页面。选择“当前部分”以限制一次更改对一个区域。从您的标题部分开始。应用可变扩展，审查结果，然后继续前往主要内容领域。最后完成页脚部分。

这种有条理的方法可以及早确定格式冲突并控制更新过程。

Divi 5使版式更容易

您曾经从Playfair显示屏切换到现代的内容并更新大多数标题，但是错过了第三页的证明。您的网站看上去不平衡了数周。

Divi 5的变量简化了您网站的排版。从侧边栏中的数据库图标更改标题变量，每个文本模块都会立即更新。包括该接触形式的页脚。

下次重新品牌时，您将更新两个变量，而不是单击五十个模块。查找和更换工具会抓住您通常会错过的东西。您的排版保持紧密，您的周末保持了您的状态。