使用Divi 5管理字体和字体尺寸

字体和版式为您的网站定下了基调。正确地将其帮助可以帮助您的品牌并提高可读性。 Divi 5使使用字体快速轻松地工作。借助Divi的新功能，例如设计变量和选项组预设，设置字体变得容易。

这篇文章会教您如何管理Divi 5中的字体和字体大小，从而创建响应式排版，从而在跨设备上缩放出精美的缩放。

Divi 5已准备好用于新的网站构建，但我们正在对向后兼容系统进行完成。同时，请坚持更新在D4上构建的网站。当改变发生时，我们会告诉您。

考虑新网站的字体思考时的考虑

启动新站点时，字体选择会影响用户的第一印象。考虑以下要点以确保您的版式支持您的内容：

• 可读性：选择清晰的字体，尤其是针对身体文本。
• 一致性：限制您的字体 - 两个或三个功能最佳，至少一个用于标题，一个用于身体文本。
• 响应性：确保字体适应不同的屏幕尺寸（理想情况下，从320px到1440px）。
• 兼容性：选择网络安全或流行字体以避免显示问题。

如何管理Divi 5中的字体和字体尺寸

让我们使用Divi库中的预制布局。我们将从“ Business CV”包中选择着陆页布局，并使用Divi 5的新功能对版式进行修改。如果您有现有的Divi 5网站，但想改进其版式，则可以在不使用此布局的情况下遵循以下步骤。

步骤1：选择字体配对

好的字体配对融合样式和可读性。 Google字体也是一个安全的选择，因为它们内置在Divi中并且易于使用。

在下面的示例中，我们将坚持布局包在标题和身体文本中使用Poppins。您也可以尝试配对Lora和Roboto。

步骤2：设置主标头和身体字体

现在您已经选择了字体，我们可以使用Divi将它们添加到网站上。在视觉编辑器中，在左上方打开变量管理器。 Divi的设计变量可让您在网站上全球控制字体。

主题和车身字体有两个默认字体变量。转到字体部分，并将“ Poppins ”设置为标题字体，并将“ Roboto ”作为身体字体。

将您的字体设置为与您的设计和品牌要求的任何匹配

在这一点上，确保您的品牌颜色也设置为设计变量可能也是一个好主意，尤其是如果您打算在文本中使用其中的某些颜色。

输入后，请确保保存变量

步骤3：创建字体尺寸

现在有更多参与的部分。最好考虑如何在每个设备尺寸上使您的版式看起来都很好。使用Divi 5，您有两个选择。第一个也是首选的选项是使用clamp（），第二个是在各种断点上多次设置字体。

您如何在每个标题级别，身体文本和其他文本情况下构建字体尺寸完全取决于您。

用夹具的流体打字（）

clamp（）可让您设置最小值，首选值和最大值。在另一篇文章中，我们深入介绍了夹具（），并提供了一种简便的方法来找出这些值。但这是一个例子：

该布局在第一部分中具有默认的H1大小和该人名称的唯一（更大）的H1大小。我们在上述尺寸图表中延续了相同的原理，并添加了较小的身体字体变化。

您可以在简单的HTML文档中测试字体尺寸，以孤立地查看事物（这也可以在Divi内部完成）。这是上述字体尺寸与字体配对的样子。

一旦您对字体尺寸感到满意，就可以将它们添加为设计变量。给每个人一个可辨别的名称，并在右边粘贴值。

固定有断点的单位

clamp（）是字体尺寸最通用的选项，但是许多用户仍然使用固定值（例如像素或REM）。您可以将它们与Divi的可自定义断点一起使用，以根据需要上下缩放字体。

由于使用这种方式时的相似效果的值数量（而不是上面的10个夹具（）值，这将是30个单独的值）。不一定建议用这些值填充变量管理器，但是如果您愿意，可以，

您可以为每个断点构建尺寸结构，并将其运送到下一步。您可以将它们直接应用于选项组和元素预设，而不是将它们放置为设计变量。

步骤5：将变量管理器的字体大小添加到预设

将您的数字变量设置（或至少配制），是时候将它们应用于预设了。选项组预设的最佳用例之一是排版。您可以创建七（7）个标题/标题选项组预设，您可以用于使用标题/标题字段的任何模块（例如，标题，Blurb，手风琴和人员模块）。

文本选项组也是如此。我可以设置两个（2）个预设（一个用于我的正常情况，一个用于我的小正文），任何使用文本选项组的模块都可以使用这些样式。对于标题和文字样式，这要比将这些样式作为元素预设应用于整个网站可能使用的所有模块要高得多。

将固定值分配给断点

下面的视频显示了基本步骤，如果您在多个断点处选择了固定值。单击文本模块，转到“设计”选项卡，悬停在文本选项组上，单击OG图标，创建新的预设，然后在每个断点处应用您的样式。滚动到右侧栏的底部并保存预设（非常重要）。重复您想到的文本变化（例如小，常规和大的选择）。

分配您期望最多使用该选项组的OG预设作为默认预设。如果您在旁边看到一颗星星，那就是您当前的默认值（假设整个模块样式或元素预设都没有应用）。

分配clamp（）函数（更容易）

当将设计变量与clamp（）函数一起使用时，该过程相似，但要容易得多。在下面的示例视频中，我们将两个标题尺寸设置在选项组级别上。与上述内容的唯一区别在于，我们不是在粘贴值，而是使用之前设置的变量。在设置OG预设时，请确保选择默认字体并根据需要设置颜色。有些人喜欢将颜色设置为模块级别，但取决于您。

您将将每个H1-H6标题级别设置为一个新的自定义选项组预设。

使用您创建的选项组预设将这些预设应用于布局标题。选项组预设的优点在于，它们跨该选项组中的模块（例如文本，盘问和标头模块）工作。

Divi 5中字体的最佳实践

为了最大程度地发挥印刷作品，请记住这些技巧：

• 始终尽早设置全局字体变量。
• 使用一致的间距和尺寸（是的，您也可以将字母间距和行高度设置为设计变量）。
• 定期跨屏幕尺寸预览响应视图。
• 避免过多的字体或字体重量。

Divi 5中的版式是新鲜空气的呼吸

由于Divi的最新功能，您现在拥有完整的排版系统。

字体以设计变量的形式使用。使用夹具（）时的字体尺寸相同。或者，如果您想锻炼所有这些可自定义的断点，也可以采取该路线。

期权组预设在整个网站上毫不费力地应用这些选择。在整个构建中调整字体尺寸非常容易，因为它们被设置为设计变量。无论如何，您的设计都会保持敏锐，并且您的构建时间都会缩小。

Divi 5推出了许多新功能，可以升级您的设计系统。立即开始在Divi 5中建立新站点，以利用所有最新功能。我们建议等待更长的时间将现有网站迁移到Divi 5。