在 WordPress 块主题中添加流畅的字体支持

流畅字体是一种花哨的方式，“描述根据视窗大小流畅缩放的字体属性，例如大小或行高”。它也以其他名称闻名，如响应式排版、灵活字体、流畅字体、视窗大小排版、流畅排版，甚至响应式显示文本。

这是一个流畅字体的示例，您可以实时播放（由 MDN 文档提供）。CSS-Tricks 也广泛介绍了流畅字体。但这里的重点不是向您介绍流畅字体，而是如何使用它。更具体地说，我想向您展示如何在 WordPress 6.1 中实现流畅字体，WordPress 6.1 最近在 WordPress 块编辑器中直接引入了一项流畅字体功能。

打开您的 style.css 文件，在 font-size 属性上加上一个带有花哨 clamp() 的样式规则，然后就可以了，对吧？当然，这会让您获得流畅的文本，但是要获得使您可以在 WordPress 网站上的任何地方应用流畅字体的块编辑器控件？在这些块化时代，这需要采用不同的方法。

Gutenberg 中的流畅字体支持

一些 WordPress 主题开发者一直在使用 clamp() 函数在他们的 WordPress 主题中定义流畅的 font-size，即使是在更新的“块”主题中，例如 Twenty Twenty-Two、Twenty Twenty-Three 等。

但 Gutenberg 插件——包含用于 WordPress 块和站点编辑器功能的实验性开发的插件——引入了对从版本 13.8 开始的流畅字体的支持。这为在主题级别实现打开了大门，以便可以将流畅字体直接在块编辑器中应用于特定元素和块。CSS-Tricks 甚至在合并请求中获得了认可，该请求合并了该功能。

这项工作成为 WordPress 6.1 中的 WordPress 核心的一部分。Rich Tabor 是早期在块编辑器中倡导流畅字体的支持者之一，他说

[流畅字体] 也是让 WordPress 变得更强大的一个部分，同时不会变得更复杂（我们都知道这是一个不小的挑战）。[...] 流畅字体很管用。实际上，我认为它运行得很好。

这个 Make WordPress 文章重点介绍了在块级别支持该功能的方法，以便默认情况下会将流畅的字体大小动态应用于块。当然，这有一些好处

它为主题作者提供了一种无需担心在代码中实现就能激活流畅字体的方法。
它以可维护且可重复使用的方式将流畅字体应用于特定排版实体，例如元素或块。
它允许灵活地使用字体大小单位（例如 px、rem、em 和 %）。

现在，由于 WordPress 块编辑器中默认提供了这项新功能，主题作者可以应用统一的流畅字体，而无需编写额外的代码。

支持排版和间距设置的块

Gutenberg 14.1 于 2022 年 9 月 16 日发布，并在许多块上引入了排版设置。这意味着这些块的文本设置之前是在 CSS 中设置的，也必须在 CSS 中更改。但这些块现在在块编辑器界面中提供了字体和间距控件。

Illustrated list of WordPress blocks that received font and spacing controls in the Gutenberg plugin. There are 31 total blocks.

这项工作目前计划添加到 WordPress 6.1 中，如这篇 Make WordPress 博客文章中所述。并且随之而来的是更多支持排版的块。

Illustrated list of 60 WordPress blocks gaining typography and font size support in WordPress 6.1. — 即将发布的 WordPress 6.1 版本中将支持排版设置的 WordPress 块。

在 WordPress 块主题中声明流畅字体

那么，我们如何在 WordPress 中使用这种新的流畅字体呢？答案就在 theme.json 中，这是一个特定于块主题的新文件，它包含许多键值对形式的主题配置。

让我们看一下 theme.json 中一个大型字体的规则，其中 contentSize: 768px，我们使用 widesize: 1600px 布局。以下是我们可以使用 clamp() 函数指定 CSS font-size 的方式

"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [ 
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}

从 WordPress 6.1 开始，仅支持 rem、em 和 px 单位。

这很棒，并且有效，但使用新的流畅字体功能，我们实际上会使用不同的方法。首先，我们在 settings.typography 上选择流畅字体，它具有一个新的 fluid 属性

"settings": {
  "typography": {
    "fluid": true
  }
}

然后，我们像以前一样指定 settings.fontSizes，但使用了一个新的 fluidSize 属性，我们可以在其中设置流畅字体范围的 min 和 max 大小值。

"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [ 
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}

就是这样。我们只是向名为“Large”的字体大小添加了流畅字体，其范围从 2.25rem 开始，扩展到 3rem。现在，我们可以将“Large”字体应用于任何具有字体设置的块。

这在幕后是如何运作的？Rich Tabor 提供了一个很好的解释，GitHub 中的这个合并请求也是如此。简而言之，WordPress 会将 theme.json 属性转换为以下 CSS 规则

.has-large-font-size {
  font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}

…它被应用于元素，例如段落块

<p class="has-large-font-size">...</p>

最初，我发现很难理解 CSS clamp() 函数的概念，并且需要在脑海中将其整合起来，同时还需要学习 min()、max() 和 calc() 函数。这个计算器工具对我帮助很大，尤其是在确定在我的主题项目中使用哪些值方面。

为了演示，让我们使用计算器来定义我们的 font-size 范围，以便在 768px 的视窗宽度下大小为 36px，在 1600px 的视窗宽度下大小为 48px。

Entering values into the online calculator for fluid typography.

计算器会自动生成以下 CSS

/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);

计算器提供选项来选择输入单位，如 px、rem 和 em。如果我们选择 rem 单位，计算器会生成以下 clamp() 值

/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);

因此，这些最小值和最大值对应于 theme.json 中的 fluidSize.min 和 fluidSize.max 值。min 值应用于宽度为 768px 及以下的视窗。然后，font-size 会随着视窗宽度的增加而增加。如果视窗宽度大于 1600px，则应用 max，并且 font-size 在此被限制。

示例

在合并的合并请求中，详细的测试说明引入了该功能。来自 Justin Tadlock 在 Make WordPress 上的预发布前文章中还有更多测试说明。

示例 1：设置新的流畅字体设置

让我们从 Justin 的说明集开始。我使用的是正在开发中的默认 Twenty Twenty-Three 主题的修改版。

首先，确保我们运行的是 Gutenberg 插件（13.8 及以上版本）或 WordPress 6.1，然后在 theme.json 文件中选择 settings.typography.fluid 属性上的流畅字体

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
    }
  }
}

现在，让我们将 settings.typography.fontSizes 示例放在那里

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
      "fontSizes": [
        {
          "name": "Normal",
          "size": "1.125rem",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          },
          "slug": "normal"
        }
      ]
    }
  }
}

如果一切正常，我们现在可以进入 WordPress 块编辑器，并将“Normal”字体设置应用于我们的块

The WordPress Block Editor interface showing a paragraph block and the fluid typography settings for it.

不错！如果我们保存并检查前端的元素，这就是标记

Inspecting the WordPress Paragraph block in DevTools.

非常好。现在让我们确保 CSS 确实存在

DevTools showing the font-size custom property for the WordPress Paragraph block's fluid typography.

很好，很好。让我们公开该 CSS 自定义属性，看看它是否真的在限制东西

Revealing the custom property value in DevTools, showing a CSS clamp function.

看起来一切都在按我们想要的方式工作！让我们看看另一个例子...

示例 2：从流体类型中排除字体设置

这次，让我们按照合并的 Pull Request 中的说明，并向 Carolina Nymark 的这个示例致敬，它展示了我们如何在特定字体设置上禁用流体类型。

我按照说明使用了空主题，并打开了theme.json文件进行测试。首先，我们像以前一样选择流体类型

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1000px"
    },
    "typography": {
      "fluid": true
    }
  }
}

这次，我们使用的是1000px而不是1600px的较小的wideSize值。这应该使我们能够看到流体类型在一个精确的范围内工作。

好的，接下来定义settings.typography.fontSizes:下的自定义字体大小

{
  "version": 2,
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        {
          "size": ".875rem",
          "fluid": {
            "min": "0.875rem",
            "max": "1rem"
        },
          "slug": "small",
          "name": "Small"
        },
        {
          "size": "1rem",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          },
          "slug": "normal",
          "name": "Normal"
        },
        {
          "size": "1.5rem",
          "fluid": {
            "min": "1.5rem",
            "max": "2rem"
          },
          "slug": "large",
          "name": "Large"
        },
        {
          "size": "2.25rem",
          "fluid": false,
          "slug": "x-large",
          "name": "Extra large"
        }
      ]
    }
  }
}

请注意，我们只在“普通”、“中等”和“大”字体设置上应用了流体类型功能。“超大”是唯一的例外，其中fluid对象被设置为false。

the WordPress Block Editor interface with four Paragraph blocks, each at a different font size setting.

从这里开始，WordPress 将通过Gutenberg 样式引擎，将我们设置的属性应用到每个已选择流体类型的字体大小设置的 CSS clamp() 函数中，以及超大设置的单个大小值

--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);
--wp--preset--font-size--x-large: 2.25rem;

让我们检查前端的标记

Inspecting the WordPress Paragraph blocks in DevTools.

良好开端！让我们确认.has-x-large-font-size类被排除在流体类型之外

Showing the font-size custom property for the Extra Large font setting in DevTools.

如果我们公开--wp--preset--font-size--x-large变量，我们会看到它被设置为2.25rem。

Revealing the Extra Large font size custom property value, showing 2.25rem.

这正是我们想要的！

支持流体排版的区块主题

许多 WordPress 主题已经在区块主题和经典主题中使用clamp()函数进行流体排版。最近发布的Twenty Twenty-Three 默认主题就是流体排版使用的很好的例子。

我查看了来自WordPress 区块主题目录的所有区块主题，检查了每个主题的theme.json文件，以查看有多少区块主题当前支持流体排版——不是新功能，因为它在撰写本文时仍在 Gutenberg 插件中——使用 CSS clamp()函数。在我查看的 146 个主题中，大多数主题使用clamp()函数来定义间距。超过一半的主题使用clamp()来定义字体大小。只有Alara主题使用clamp()来定义布局容器大小。

可以理解的是，只有少数最近发布的主题包含新的流体排版功能。但以下是我在theme.json中找到的定义它的主题：

Pixl (Automattic) 链接到仓库
Block Canvas (Automattic)
Disco (Automattic)
Rainfall (Automattic)
Wei (Rich Tabor)
Frost (WP Engine) 链接到仓库
Twenty Twenty-Three (WordPress.org)

如果你阅读了我之前在 CSS-Tricks 上的帖子，我用于演示的TT2 Gopher Blocks主题也已更新以支持流体排版功能。

对 WordPress 流体排版功能的一些反应

在 WordPress 的设置级别拥有流体排版非常令人兴奋！我想分享一下 WordPress 开发人员社区中对它发表评论的一些人的想法。

Gutenberg 项目的首席架构师 Matias Ventura

我最喜欢的最新 Gutenberg 功能之一是流体类型，它——希望——“只需工作”。它可在 13.8 中进行测试。pic.twitter.com/9SLUgEg4pF
— Matías Ventura (@matias_ventura) 2022 年 8 月 4 日

Rich Tabor:

作为为 WordPress 构建精美丰富的页面而做出的最大努力之一，流体排版对于使用 WordPress 的人和那些消费内容的人来说都是一个非常大的体验优势。

Automattic 开发人员Ramon Dodd在Pull Request 中评论

将这个想法与响应特定视窗大小的字体大小进行对比，例如由媒体查询定义的字体大小，但在这些大小之间没有执行任何操作。theme.json已经允许作者插入他们自己的流体字体大小值。这不会改变，但这个 PR 为那些不想担心实现细节的人提供了它。

Nick Croft，GenesisWP 的作者

说实话，我认为这是我最兴奋的功能。一直使用 clamp 来做到这一点，但对于普通人来说语法看起来更容易。
— Nick Croft (@Nick_theGeek) 2022 年 9 月 1 日

Brian Garner，WPEngine 的设计师和首席开发者倡导者

流体排版是对#WordPress的巨大改进。FSE 主题可以通过 Gutenberg 插件进行实验性选择，但我们将在今年秋季的 6.1 中看到它得到正式支持。以下是如何查看/使用它：pic.twitter.com/Jc7gHdyz5R
— Brian Gardner (@bgardner) 2022 年 9 月 1 日

一些开发者认为一些功能应该是可选的。Automattic 的Jason Crist说

我喜欢流体排版的强大功能，但我也不相信它应该默认启用。它的用法（以及它的细节）是重要的设计决策，应该谨慎做出。

你也可以在官方的测试说明中找到更多关于此功能的评论。

总结

WordPress 中的流体排版功能在撰写本文时仍在积极开发中。因此，现在，主题作者应该继续使用它，但要谨慎，并在它正式发布之前预期一些可能的更改。Justin 提醒使用此功能的主题作者，并建议关注以下两个 GitHub 问题

在排版和其他与设计相关的 WordPress 工具方面也还有很多正在进行的工作。如果你感兴趣，请关注这个排版跟踪 GitHub 票证和与设计工具相关的 GitHub 问题。

资源

我在研究流体类型以及 WordPress 如何将其作为一项功能实现时，使用了以下文章。

教程和观点

如何在 WordPress 区块主题中添加流体排版 (Rich Tabor)
在 WordPress 区块主题中使用 Theme.json 中的流体类型刻度 (Rich Tabor)
Gutenberg 13.8 引入流体排版支持和改进的引用区块 (WP Tavern)
区块字体大小和流体排版 (Make WordPress Core)
流体排版功能的测试和反馈 (Make WordPress Themes)
使用 Gutenberg 的流体排版 (Full Site Editing)
使用 CSS Clamp 的现代流体排版 (Smashing Magazine)
流体排版选项 #24480 (GitHub)
区块支持：添加流体排版 #39529 (GitHub)

CSS-Tricks

`calc()` 及相关的 CSS 函数

Clamp() 计算器 (Christopher Kirk-Nielsen)
Min-Max-Value 计算器 (9Elements)
流体响应式字体大小计算器 (Web Semantics)
流体排版比例计算器 (Aleksandr Hovhannisyan)
使用 CSS Clamp 创建更灵活的包装器实用程序 (Piccalilli.li)
min()、max() 和 clamp() 是 CSS 魔法！ (CSS-Tricks)
min()、max() 和 clamp() CSS 函数 (Ahmad Shadeed)