尽管媒体数量激增，但文字仍是互联网的支柱。这意味着您为网站选择的字体将是布局和设计的一个重要方面。
WordPress 字体设计可以唤起人们的情绪，有助于品牌塑造等。WordPress 中的全站编辑（FSE）功能可以让用户自定义排版，而 theme.json 文件则可以帮助开发人员构建能够利用这一功能的 WordPress 主题。
本文探讨了 WordPress 中 FSE 和 theme.json 的排版。不过，讨论还包括一些关键背景，例如您使用的技术、需要牢记的技术注意事项，以及我们在设计中使用字体的演变过程。
网页字体设计：简史
如果回顾一下早期的网页设计，就会发现尽管布局多种多样，但字体的表现形式却始终如一。这一方面是可用性，另一方面是必要性。简而言之，如果没有现在的技术，网络上的文字只能使用电脑上的字体。
对于 90 年代中后期的网络冲浪者来说，只有少数几种可预见的字体： Times New Roman、Arial、Helvetica、Georgia 和 Verdana。后两种字体是微软委托设计的，无论在什么时代都能很好地呈现在网络上。
Verdana 和 Georgia 字体的样本
这种原始的字体选择具有一致性和可靠性，但缺乏灵活性。Google Fonts 和 Adobe Fonts 等服务使用 WOFF 文件格式，让您可以访问数以千计的字体库，而且嵌入过程简单明了。
Google 字体主界面
这为您提供了更大的空间来提高可读性、创建独特的设计以及为您的网站量身定制用户体验（UX）。缺点包括潜在的性能影响（如内容布局变化）、依赖第三方服务来显示网站上最重要的元素以及隐私问题。
这导致许多网页设计师放弃字体库，重新考虑使用系统字体。在应用 “系统字体堆栈”时，您可以更快地处理和控制，优先使用本地字体，同时使用后备选项，这是一种可靠的方法。
WordPress和排版
WordPress 非常重视排版，以帮助您创建具有吸引力和可读性的内容。纵观其历史，WordPress 的默认主题都使用在美观和功能之间取得平衡的字体搭配。
当前的默认主题使用系统字体堆栈，呈现出简洁、现代和高性能的效果。旧版默认主题则使用 Noto Sans 和 Noto Serif（用于二〇一五）以及 Montserrat 和 Merriweather（用于二〇一六）等字体搭配。
为了展示这种字体设计的 “生命轮回”，Twenty Sixteen 使用 Helvetica 和 Georgia 作为备用选项。Twenty Ten 默认主题只使用 Helvetica、Arial 和 Georgia：
来自 WordPress.org 的 Twenty Ten 演示页面
虽然这些选择为每个主题中的 WordPress 设计定下了基调，但它们也能启发您密切关注如何使用排版，而这正是 WordPress FSE 可以帮助您做到的。
全站编辑和theme.json简要介绍
FSE 和theme.json是您在 WordPress 中管理排版的核心，因此了解这两者至关重要。FSE 利用块编辑器并添加更多功能，成为站点编辑器。
WordPress 网站编辑器界面与区块编辑器非常相似，但具有更多自定义范围。
这在很多方面统一了网站设计选项：
- 您可以对整个网站而不仅仅是内容使用块编辑器的编辑方法。
- 模板库是设置的一部分，因此您可以使用与内容相同的工具来编辑模板库。
- 网站编辑器中也有样式设置，并提供全局设置方案。
- 网站编辑不需要任何代码就能实现任何可用选项。这就缩小了开发与最终用户设计之间的差距。
您可以将 theme.json 文件视为 FSE 的开发版本。您需要掌握 JavaScript Object Notation（JSON）知识才能使用该文件，但这是大多数网站所有者都能做到的。它是一个中央配置文件，用于管理全局样式和设置。
在代码编辑器中展示的 theme.json 文件
每个设置都使用 option:value 的键/值对，可以通过多种方式实现：
- 定义全局调色板。
- 设置字体家族和大小。
- 配置特定块的样式
- 管理间距和布局偏好。
利用 theme.json，您可以创建更一致、更可定制的主题，而无需使用自定义 CSS（尽管这也是可能的）。theme.json 的适应性和灵活性意味着它是为 WordPress 开发主题的关键组成部分。最佳方法是在所有主题设计中以不同方式使用这两种方法，排版也不例外。
在WordPress网站编辑器中设置排版
如果您知道如何使用区块编辑器，也可以使用网站编辑器。在 WordPress 中，导航到外观 > 编辑器界面。这将显示网站编辑器的主屏幕：
网站编辑器主屏幕
左侧导航栏中的样式屏幕提供了一些全局设计选项，其中包括排版更改：
WordPress 网站编辑器中的不同样式预设选项
在大多数情况下，针对不同排版方面的单独设置会给你带来更大的价值。样式屏幕顶部有两个小图标，可以打开更多选项：样式手册和编辑样式铅笔图标。
网站编辑器中的样式编辑图标
此外，你还可以在元素级别和每个区块设置排版选项。
字体库
编辑样式>排版屏幕会显示字体库，不过在站点编辑器中并没有这个明确的名称。您可以通过几种方式处理字体和排版：
- 可以上传和管理自定义字体。
- 可以在 WordPress 中直接使用 Google 字体。
- 使用 PHP 创建字体库。
要从网站编辑器侧边栏的排版部分访问字体库，请单击管理字体图标：
WordPress 网站编辑器中的管理字体图标
在这里，库选项卡会显示当前为主题注册的字体，并显示哪些字体处于活动状态：
WordPress 字体库界面
点击其中任何一个，即可激活或停用个别字体：
网站编辑器字体库中当前激活的字体
在上传选项卡上，你可以使用拖放式上传对话框来安装自己的 TTF、WOFF、WOFF2 和 OTF 格式字体。
安装字体选项卡会连接到 Google 字体，因此你可以在主题中使用该库。请注意，这种方法是从你的网站而不是 Google CDN 下载和提供字体：
WordPress 网站编辑器中的 Google 字体库
在这里，从综合列表中选择要安装的字体，然后点击安装按钮。一旦显示成功通知，这些字体就会显示在库选项卡上：
WordPress 实例的已安装字体
这样，您就可以像在网站上使用其他字体一样使用这些字体了。现在，您需要对它们进行自定义，以满足您的需求。
样式手册
选择和设置字体的危险之一是，你不知道它与配色方案、布局和格式化的组合效果如何。样式手册非常有价值，它可以让你预览不同元素的排版设置。
网站编辑器样式手册
选择眼睛图标将打开样式手册，这里有五个选项卡：
- 文本：在这里可以处理段落、标题、列表和其他以文字为主的元素。
- 媒体：在这里，你可以调整图片、视频和音频设计演示。
- 设计：该部分整理了结构设计方面的内容，如列、分隔符和按钮。
- 小工具：该界面有两个元素：动态生成，如存档和评论列表。你还可以在这里使用搜索栏、社交媒体图标和标签云。
- 主题：这里主要是网站标题元素，如标题、标语、导航和徽标。
如果点击风格手册中的某个元素，侧边栏中就会出现各种选项。在这里，你要处理的是每个区块的排版设置，而不是专门的元素：
您可以直接在样式表中编辑排版
您也可以从网站编辑器主页的样式>区块部分进入相同的界面。无论如何，你所看到的选项都能让你详细定制每个区块的排版（以及更多内容）。
在网站编辑器中调整排版选项
对于所有区块和元素，你都可以使用相同的核心选项。下面是面板中每个选项的概述。
字体类型和大小
字体下拉菜单非常简单：选择要应用到特定元素或区块的字体：
从排版选项卡中的可用选项中选择字体
在网站编辑器中，字体大小预设的自定义功能最少。您可以从小到特大之间的范围内选择字体大小：
WordPress 在网站编辑器中提供了字体大小预设
如果编辑 theme.json，你可以更改这些预设值，但不能在网站编辑器中更改。设置自定义字体大小按钮提供了一种使用大小单位阵列设置自定义字体大小的方法：
选择自定义字体大小和单位
在网站编辑器中还有更多调整排版的方法，包括通常使用 CSS 的方法。
外观、行高和字间距
外观下拉菜单看起来很简单：从一个庞大的列表中选择一种字体重量，它就会应用到你的文本中。不过，你通常不会拥有每个权重的所有可用字体。
WordPress 网站编辑器中的外观下拉菜单
我们的测试表明，WordPress 不会过滤这个列表，只显示可用的字体权重。此外，如果您选择的权重没有匹配的字体，它还会应用 “最近匹配”。例如，我们在示例网站中使用了 Cardo Normal、Cardo Bold 和 Cardo Bold。选择 Semi Bold、Bold、Extra Bold 或 Black 时，只使用 Cardo Bold：
在 WordPress 网站编辑器中更改文本外观
行高不使用预设值，可平衡字体选择、外观和大小。 该值会在每行之间留出更多空间，当文本看起来很拥挤时，它通常是一种实用的方法：
在 WordPress 网站编辑器中更改行高
字母间距与此类似，它遵循 CSS 的习惯，在自然间距的基础上自行增加：
你可以将字母间距拉得太大，使其无法使用
与自定义字体大小一样，你可以选择不同的测量单位。在这里，选择一个相对值通常是更好的方法。WordPress 将字母间距设置为 CSS 默认的 “正常”。这可以让浏览器选择数值，根据我们的经验，这是最理想的方法。
通常的做法是使用较小的正字母间距值（通常不超过 0.12rem/em ），而几乎不使用负间距。
最后一组选择–字母大小写–可让您选择文本的大写、小写或句子大小写。您还可以删除大小写。这非常有利于保持字体的一致性，因为在创建内容时，你不需要特别使用特定的大小写。
如何使用theme.json定义WordPress主题的排版
网站编辑器非常适合没有技术知识的网站用户。 theme.json 文件可以确保网站编辑器为用户提供定制网站所需的内容。该配置文件是主题的开发基础。
我们不会深入研究整个 theme.json 文件的结构和格式，但我们会研究如何在其中定义、设置和应用排版。
了解theme.json结构和定义全局设置
我们使用 JSON 来定义 theme.json 中的所有元素，其中包括排版。typography 元素嵌套在该文件的 settings 对象下。在此基础上，你可以嵌套更多元素、属性和对象来构建网站的排版：
{
"version": 3,
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"slug": "system-font",
"name": "System Font"
}
],
"fontSizes": [
{
"slug": "small",
"size": "13px",
"name": "Small"
},
{
"slug": "medium",
"size": "20px",
"name": "Medium"
}
]
}
}
}
所有这些元素都遵循类似的模式。最容易理解的默认设置是全局设置。这些设置可以直接嵌套，但也可以为单个块定义排版设置：
"styles": {
"blocks": {
"core/paragraph": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--primary)",
"fontSize": "var(--wp--preset--font-size--medium)",
"lineHeight": "1.5"
}
},
"core/heading": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--secondary)",
"fontWeight": "700"
}
}
}
}
这种方法使用了 block 属性，并为每个目标 Block 设置了特定的命名空间。虽然增加了两个嵌套层，但这种方法别无选择。无论如何，你都有很多属性可以使用。
注册字体
在网站编辑器界面中，你可以对排版进行相同程度的自定义，在某些情况下甚至更多。在核心层面上，你可以将字体堆栈嵌套到 fontFamilies 属性中，然后为其命名：
fontFamily映射到font-familyCSS值，是你希望在主题中使用的字体堆栈。name是你在网站编辑器中选择字体时看到的内容，因此它将是可读的。slug添加到自定义 CSS 属性中，以便进一步使用。
对于系统字体来说，这很简单：
…
"typography": {
"fontFamilies": [
{
"name": "Primary",
"slug": "primary",
"fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
},
{
"name": "Secondary",
"slug": "secondary",
"fontFamily": "system-ui, sans-serif"
}
注册自定义网络字体需要使用 fontFace 属性并定义一些属性：
…
"name": "Secondary",
"slug": "secondary",
"fontFamily": "'Open Sans', sans-serif",
"fontFace": [
{
"fontFamily": "Open Sans",
"fontWeight": "300 800", // This is a range of font weight values.
"fontStyle": "normal", // This has to be a valid CSS font-style value.
"fontStretch": "normal", // This also needs to be a valid CSS font-stretch value.
"src": [ "file:./assets/fonts/open-sans.woff2" ] // This is an array of URLs for custom fonts, and can support multiple formats.
},
…
注册字体后，您可以从网站编辑器的各种下拉菜单中选择字体。
请注意，有几种方法可以为主题注册字体。有网站编辑器界面中的字体库、典型的 PHP 查询和 Create Block Theme 插件：
来自 WordPress.org 的 Create Block Theme 插件的头图
这是一个用于创建主题的模板，也可以让你注册和定义排版。一旦你以合适的方式注册了字体（我们推荐使用字体库），你就可以开始研究字体大小了。
在theme.json中设置字体大小和预设值
字体设计的另一个核心任务是设置字体大小。这需要使用 fontSizes 属性，并为网站编辑器定义预设值：
"settings": {
"typography": {
"fontSizes": [
{
"slug": "small",
"size": "12px",
"name": "Small"
},
{
"slug": "x-large",
"size": "32px",
"name": "Extra Large"
}
]
}
}
与其他排版设置一样，WordPress 会使用您提供的标题为每个预设生成自定义 CSS 属性：
body {
--wp--preset--font-size--small: 12px;
--wp--preset--font-size--x-large: 32px;
}
WordPress 默认禁用流体排版，但您可以使用布尔值将其打开。这是一个可以在全局级别设置的选项…
{
"version": 2,
"settings": {
"typography": {
"fluid": true
}
}
}
……或您定义的每个预设和尺寸：
{
"name": "Medium",
"size": "1.25rem",
"slug": "md",
"fluid": {
"min": "1rem",
"max": "1.5rem"
}
},
通过 min 和 max，您可以确定所定义的每种流体字体大小的可缩放范围。
实现高级排版功能
theme.json 提供了与网站编辑器相同的全套选项。您可以根据自己主题的默认设置自定义网站的排版：
"styles": {
"typography": {
"letterSpacing": "0.02em",
"textTransform": "uppercase",
"textDecoration": "underline",
"lineHeight": "1.55rem",
"fontStyle": "normal"
}
}
您可以选择启用或禁用这些选项。每个选项都有一个布尔值，这意味着网站编辑器也有一些自定义选项。除了网站编辑器提供的功能外，你还可以进行一些定制：
customFontSize默认打开，用户可以输入自定义字体大小，但如果想严格控制可用选项，也可以禁用它。dropCap默认为假，但如果启用，用户就可以选择为任何段落块的首字母启用大写。textColumns可以为块中的任何文本启用列选项，默认情况下是关闭的。writingMode启用了在站点编辑器中更改文本方向的选项。用户可以在水平和垂直文本之间进行选择。
theme.json 的范围意味着你应该首先在这里工作，尤其是在创建主题时。网站编辑器中的选项可以让您或您的用户完善 WordPress 的排版。
如何使用 theme.json 实现排版：一个实用示例
FSE 使 WordPress 的设计和开发变得前所未有的简单。更重要的是，选择和实现这些字体的一些一般过程更加简单明了。这其中有些是由于设计趋势的影响，但也有一些工具可以填补您没有平面设计师可以提供帮助的空白。
我们可以从您选择的核心字体开始。
1. 配对互补字体
在如何选择字体和排版方面写了这么多文章是有原因的。因为这可能是一项棘手的任务。例如，你必须考虑网站的品牌、目的以及想要传达的信息。
不过，由于当前的设计趋势，这方面的工作要少得多。这是因为正文可以使用系统字体，特别是主要的操作系统（OS）字体。你唯一的任务就是选择与之搭配的字体。
这并不是一本关于如何搭配字体的教程，但我们有一些技巧可以传授给大家：
- 用于正文的操作系统字体通常是无衬线字体。这就意味着要寻找一种衬线字体或另一种无衬线字体，它们看起来与众不同、独一无二、引人注目。
- 保持简洁，如果操作系统字体与设计相匹配，可以考虑只使用操作系统字体。
- 测试不同的组合，因为你可以感受到哪些字体可以搭配使用（哪些不可以）。
Playfair Display 是系统字体堆栈的一对好搭档，它是一种衬线谷歌字体：
Playfair Display 的 Google 字体样本页
使用一对字体时，不仅要考虑它们在页面上的大小，还要考虑它们之间的相互关系。
2. 找到正确的绝对大小和相对大小
选择字体大小也很关键，因为错误的绝对大小会破坏用户体验/用户界面。这也是您可能希望坚持使用默认值的一个方面。不过，我们鼓励您在此进行尝试，因为每种配对都有自己的字体空间。
Typescale 是一款出色的工具，无论您需要什么，它都能帮助您创建合适的 WordPress 排版：
Typescale 网站
该工具最出色的地方之一就是比例选择。它基本上可以帮你完成很多选择字体大小的工作。我们在这里选择的是大三度字体，系数为 1.2，基本尺寸为 16px：
Typeface 中的字体缩放选项
在中间的面板中，你可以看到每个标题和段落的字体大小，并可以选择多种计量单位。请注意，Typescale 还允许你更改字母间距、行高、字体重量等：所有这些都可以在theme.json 中自定义。
3. 在 theme.json 中应用默认值
一旦有了合适的字体和大小，就可以在 theme.json 文件中实现它们。下面是一个典型 theme.json 文件的示例：
{
"version": 3,
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
"slug": "ubuntu-sans",
"name": "Ubuntu Sans"
},
{
"fontFamily": "\"Playfair Display\", serif",
"slug": "playfair",
"name": "Playfair Display"
}
],
"fontSizes": [
{
"slug": "small",
"size": "13px",
"name": "Small"
},
{
"slug": "medium",
"size": "16px",
"name": "Medium"
},
{
"slug": "large",
"size": "20px",
"name": "Large"
},
{
"slug": "x-large",
"size": "25px",
"name": "Extra Large"
},
{
"slug": "huge",
"size": "31px",
"name": "Huge"
}
]
}
},
"styles": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--system)",
"fontSize": "var(--wp--preset--font-size--medium)",
"lineHeight": "1.8"
},
"blocks": {
"core/paragraph": {
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
}
},
"core/heading": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--playfair)",
"fontWeight": "700"
}
},
"core/post-title": {
"typography": {
"fontSize": "var(--wp--preset--font-size--huge)"
}
}
}
}
}
您也可以将这些字体应用于任何区块，甚至可以考虑以独特的方式为每个标题设计样式。创建一个一致的、层次分明的 WordPress 排版系统，它将成为主题设计的基础。这将确保整个网站的外观协调一致，而网站编辑器将为您提供更好的灵活性和自定义功能。
小结
FSE 日渐成熟，而 theme.json 是整个 WordPress 编辑方法的核心。排版是一个关键因素，WordPress 提供了开发人员级别的工具，可以访问以前需要掌握 CSS 和 PHP 才能访问的元素。
有了网站编辑器的直观界面和 theme.json 的适应性，您就可以创建能增强网站美感、与您的品牌产生共鸣并提升整体用户体验的排版。
我们很想听听您在 WordPress 排版方面的经验，以及 FSE 是否是您成功的关键。请在下面的评论中与我们分享您的想法。
评论留言