排版在网页设计中是一个范围广泛的主题，没有一份文档能够做到这一点。网上有很多书籍长度的作品，深入探讨更精细的细节，也有大量文章详细介绍最佳实践、技巧和技巧。
本指南将通过以下途径专门帮助您快速掌握可用设置设置.打印在里面主题.json.
排版也和主题中的间距紧密相关，所以您需要熟悉间距设置以充分利用这两个指南。您还将从本文档中学到的知识应用到您的主题.json样式.
有几种设置仅用于启用或禁用用户界面中的元素。这些属性都接受布尔值，这意味着您可以将它们设置为真实的或假.
并不是每个块都支持每一种排版设置。有些特定于单个块。例如dropCap（下降上限）属性仅适用于段落块。其他的则被几乎所有带有文本的块广泛使用，例如自定义字体大小.
这些设置.打印属性允许您启用或禁用界面中的功能：
自定义字体大小:是否允许用户输入自定义字体大小。默认为真实的.dropCap（下降上限）:用户是否可以为段落块的第一个字母启用下拉卡。默认为真实的.字体样式:用户是否可以选择自定义字体样式。默认为真实的.font重量：用户是否可以选择自定义字体粗细。重量范围符合标准薄通过黑色字体粗细。默认为真实的.字母间距:用户是否可以输入自定义字母间距值。默认为假.线条高度:用户是否可以为文本输入自定义的行高。无法注册线高预设，因此此选项启用完全自定义的输入。默认为假.text列:是否显示块文本的列选项。默认为假.text装饰:用户是否可以为块的文本设置文本装饰。可用选项包括无，下划线、和删除。默认为真实的.text转换:用户是否可以更改块文本的字母大小写。可用选项包括无，大写，小写字母、和资本化。默认为真实的.写入模式:是否启用文本方向在界面中，允许用户在水平和垂直文本。默认为假.
下面是默认WordPress中这些排版设置的外观主题.json:
{“版本”：2，“设置”：{“排版”：{“customFontSize”：true，“dropCap”：true，“fontStyle”：true，“fontWeight”：true，“letterSpacing”：真，“lineHeight”：假，“textColumns”：假，“textDecoration”：true，“textTransform”：真，“writingMode”：false}}}
在这个屏幕截图中，请注意印刷术“段落”块的面板，其中启用了所有设置：
根据主题的受众，您将只希望启用其用户需要的功能。例如，您的客户可能只需要配置字体大小。如果每个设置都妨碍了他们的工作流程，那么向他们展示这些设置是没有意义的。
关于首字母下沉的一点注意：当前的实现功能因不同的字体系列、字体大小和行高而臭名昭著。如果您启用了此功能，请确保在主题的设计中测试drop caps是否好看。您可能需要添加自定义CSS，以便与主题匹配。
WordPress允许您通过设置.typography.fontFamilies中的属性主题.json。您可以添加对系统字体（访客计算机上的字体）或web字体（与主题捆绑的自定义字体）的支持。您将在本节中学习如何注册这两种功能。
这些选项显示在排版>字体支持选择字体的块的检查器面板中的字段：
这个设置.typography.fontFamilies属性默认为空数组。您可以通过传递具有以下属性的字体族对象来注册字体：
名称: （必需）字体家族的可读标题，可以翻译。段塞: （必需）大小的slug将附加到生成的CSS自定义属性中：--wp—预设--font-family—{slug}.字体系列:（必需）将映射到CSS的有效值前家族值。通常，这是一个字体堆栈（浏览器将尝试按顺序使用的系列列表）。字体字体: （可选）映射到@字体-表面CSS规则。您只需要在将自定义web字体与主题绑定时使用此选项。
以下是默认WordPress中的字体系列设置主题.json:
{“版本”：2，“设置”：{“排版”：{“fontFamilies”：[]}}}
在下面的小节中，您将首先学习如何注册系统字体。然后，您将采取下一步，注册自定义web字体。
系统字体比web字体更直观。您只需要知道要使用的字体。在本练习中，假设您要注册两种将在主题中使用的字体：
- 主要用户：一个过渡的衬线字体堆栈，在现代设备上看起来很好。
- 次要：用户的系统UI字体。
将此代码添加到您的主题.json注册每个字体：
{“$schema”：“https://schemas.wp.org/trunk/theme.json",“版本”：2，“设置”：{“排版”：{“fontFamilies”（字体系列）：[{“name”：“Primary”，“slug”：“主”，“fontFamily”：“Charter，‘Bitstream Charter’，‘Sitka Text’，Cambria，serif”},{“name”：“次要”，“slug”：“secondary”，“fontFamily”：“system-ui，sans-serif”}]}}}
这些选项现在将出现在排版>字体支持该功能的任何块的下拉列表。
WordPress还将使用--wp—预设--font-family—{$slug}编辑器和前端的格式：
车身{--wp——preset——font-family——primary:Charter，‘Bitstream Charter’，‘Sitka Text’，Cambria，serif；--wp—预置--font-family—辅助：system-ui，sans-serif；}
您可以将这些引用为var:预设|font-family|$slug当你开始将它们用作中的样式主题.json。您也可以使用引用它们var（--wp-预设--font-family--{$slug}）直接在CSS中。
通常建议对字体系列的slug使用语义命名方案，以便在切换子主题、样式变体，甚至从主题切换到主题时，它们更适合未来使用。这些示例使用初级的和第二的因为这些是广泛使用的术语。最好不要给你的鼻涕虫命名，这样它们就会与当前的字体系列相匹配。
注册自定义web字体的工作方式与系统字体基本相同。最大的区别是您需要添加字体字体属性设置为字体系列对象。
字体字体必须是字体对象数组。每个对象都接受映射到@字体-表面CSS规则:
字体系列:有效的CSS前家族描述符。fontWeight（字体重量）:一系列CSS字体加粗值。字体样式:有效的CSS字体风格值。字体拉伸:有效的CSS字体拉伸值。型钢混凝土:字体文件所在的字体文件URL数组（可用于支持多种格式，但只需要一种格式）。
这个型钢混凝土属性的唯一性在于它允许您引用相对于主题.json在主题中创建文件。使用“文件：./path/to/file.ext”格式引用与主题绑定的字体。
让我们举个例子。在上一节的代码基础上，假设您想用Open Sans web字体替换系统UI字体。
本例还假设您下载了Open Sans字体并将其转换为现代字体.woff2型格式，它被大多数浏览器广泛支持。您还将这些文件放在了主题的/资产/字体文件夹如下：
/资产
/字体
/开放无障碍2/open sans-italic.woff2
将web字体绑定到主题中并准备就绪后，将此代码添加到您的主题.json文件进行注册：
{“$schema”：“https://schemas.wp.org/trunk/theme.json",“版本”：2，“设置”：{“排版”：{“fontFamilies”（字体系列）：[{“name”：“Primary”，“slug”：“主”，“fontFamily”：“Charter，‘Bitstream Charter’，‘Sitka Text’，Cambria，serif”},{“name”：“次要”，“slug”：“secondary”，“fontFamily”：“'Open Sans'，Sans-serif”，“fontFace”：[{“fontFamily”：“Open Sans”，“fontWeight”：“300 800”，“fontStyle”：“正常”，“fontStretch”：“正常”，“src”：[“file:./assets/fonts/open-sans.woff2”]},{“fontFamily”：“Open Sans”，“fontWeight”：“300 800”，“fontStyle”：“italic”，“fontStretch”：“正常”，“src”：[“file:./assets/fonts/open sans italic.woff2”]}]}]}}}
与系统字体一样，WordPress将为web字体生成CSS自定义属性。CSS输出如下所示：
车身{--wp——preset——font-family——primary:Charter，‘Bitstream Charter’，‘Sitka Text’，Cambria，serif；--wp——preset——font-family——secondary:‘Open Sans’，Sans-serif；}
WordPress允许您注册任意数量的预设字体大小，您的主题用户可以从中选择。通过注册自定义尺寸，您可以更轻松地跨主题保持一致的排版。
自定义字体大小显示为排版>大小用于支持该功能的块的检查器控件中的面板：
请注意，如果您有五个以上的自定义大小，UI将显示下拉选择，而不是上面屏幕截图中显示的按钮组。
有两个主题.json设置.typography子属性相关的字体大小：
流体:是否启用在大屏幕上放大、在小屏幕上缩小的流动字体大小。对于单个自定义尺寸，可以覆盖此选项。默认为假.字体大小:字体大小对象的数组，可用于自定义用户可以选择的可用预设。WordPress注册默认大小小的，中等的，大的、和特大.
下面是默认WordPress中这些属性的外观主题.json:
{“版本”：2，“设置”：{“排版”：{“流体”：假，“字体大小”：[{“name”：“小”，“slug”：“小”，“大小”：“13px”},{“name”：“中等”，“slug”：“中等”，“大小”：“20px”},{“name”：“大”，“slug”：“大”，“大小”：“36px”},{“name”：“特大号”，“slug”：“x-large”，“大小”：“42px”}]}}}
如您所见，WordPress默认禁用流体字体大小，并注册自己的四种静态大小。在几乎所有情况下，您都会希望使用与主题设计相匹配的大小覆盖这些内容。
与您可以在中设置的其他预设一样主题.json，WordPress使用--wp—预设--字体大小--{$slug}格式。对于默认大小，此CSS在编辑器和前端输出：
车身{--wp—预设--字体大小--小：13px；--wp——预设——字体大小——中等：20px；--wp——预设——字体大小——大号：36px；--wp——预设——字体大小——x-large:42px；}
WordPress还使用.has-{$slug}-font-size命名方案。默认大小生成这些类：
.has-small-font大小{font-size:var（--wp--preset--font-size--small）！重要；}.has-medium-font-size型{font-size:var（--wp-预设--font-size-中等）！重要；}.has大尺寸{font-size:var（--wp--preset--font-size--large）！重要；}.has-x-大尺寸{font-size:var（--wp-预设--font-size--x-large）！重要；}
在现代网页设计中，你几乎总是会使用流畅的排版。这允许字体大小随视口或容器的大小而增大或减小。
WordPress使用基于viewport的系统进行流畅的排版。但如果您喜欢使用不同的系统，例如基于容器的系统，并且可以将其禁用，则不必依赖于此。
假设您想使用默认的核心大小，但希望它们都是流体而不是静态值。您可以通过设置设置.打印.流体到真实的在您的主题.json文件：
{“版本”：2，“设置”：{“排版”：{“流体”：真}}}
WordPress现在将为注册字体大小生成流体大小：
车身{--wp—预设--字体大小--小：13px；--wp——预设——字体大小——中等：夹钳（14px，0.875rem+（（1vw-3.2px）*0.852），20px）；--wp--预设--字体大小--大：clamp（22.041px，1.378rem+（（1vw-3.2px）*1.983），36px）；--wp——预设——字体大小——x大：夹钳（25.014px，1.563rem+（（1vw-3.2px）*2.413），42px）；}
14像素是默认的最小字体大小限制。因为小的大小低于该限制，它保持在静态大小为13像素.
毫无疑问，您会希望注册与主题设计相匹配的字体大小，而不是坚持使用默认值。为此，必须将字体大小对象数组传递给设置.typography.fontSizes中的属性主题.json.
每个对象都接受几个属性：
名称:尺寸的人类可读标题，可以翻译。大小:有效的CSS大小。这可以是一个数字和单位，也可以是使用夹子（），或对另一个自定义CSS属性的引用。段塞:大小的slug将附加到生成的CSS自定义属性中：--wp--预设--间距--{slug}.流体:一个布尔值，用于启用或禁用此特定大小的流体排版，覆盖全局属性。或者，它可以是包含以下内容的对象：
最小值:字体大小可以缩小到的最小值。必须是有效的CSS大小。最大值:字体大小可以缩放到的最大值。必须是有效的CSS大小。
让我们先用静态值注册一组简单的自定义大小。将此代码添加到您的主题.json文件：
{“$schema”：“https://schemas.wp.org/trunk/theme.json",“版本”：2，“设置”：{“排版”：{“字体大小”：[{“name”：“小”，“大小”：“1rem”，“slug”：“sm”},{“name”：“中等”，“尺寸”：“1.25rem”，“slug”：“md”},{“name”：“大”，“大小”：“1.5rem”，“slug”：“lg”}]}}}
与默认大小预设一样，WordPress将在编辑器和前端自动生成每个CSS：
车身{--wp——预设——字体大小——sm:1rem；--wp——预置——字体大小——md:1.25rem；--wp——预置——字体大小——lg:1.5rem；}
现在，让我们更进一步。在上一个示例中，您注册了Small、Medium和Large尺寸。假设您希望“小尺寸”保持其值，而不考虑浏览器的视口宽度。但您希望“中”和“大”尺寸随视口一起缩放。
使用流体属性，让我们按大小配置它们。将此代码添加到您的主题.json:
{“$schema”：“https://schemas.wp.org/trunk/theme.json",“版本”：2，“设置”：{“排版”：{“流体”：正确，“字体大小”：[{“name”：“小”，“大小”：“1rem”，“slug”：“sm”，“流体”：假},{“name”：“中等”，“尺寸”：“1.25rem”，“鼻涕虫”：“md”，“流体”：{“最小”：“1rem”，“最大”：“1.5rem”}},{“name”：“大”，“大小”：“1.5rem”，“slug”：“lg”，“流体”：{“最小”：“1.25rem”，“最大”：“2rem”}}]}}}
WordPress将生成以下CSS自定义属性：
车身{--wp——预设——字体大小——sm:1rem；--wp——预设——字体大小——md:clamp（1rem，1rem+（（1vw-0.2rem）*1.136），1.5rem）；--wp——预设——字体大小——lg：夹钳（1.25rem，1.25rem+（（1vw-0.2rem）*1.705），2rem）；}
对于如何为主题自定义它，没有太多限制。上面介绍了如何注册自定义字体大小，但您可以完全控制这对主题的作用。
要深入了解流畅的字体大小，请阅读内在设计、主题化和重新思考如何使用WordPress进行设计在开发者博客上。
