一篇佳作——四步打造最佳正文排版
这是六部分系列文章的第三部分：让您网站的排版彰显个性。
让您网站的排版彰显个性：六篇系列文章
- 字体的视觉语言：基本字体术语，以便我们开始讨论
- 字形的剖析。 字形的各个部分如何赋予字体其声音？是什么让一个字体家族适合汽车或时尚、科技或消费品？
- 本文：一篇佳作：四步打造最佳正文排版 从裸 HTML 到格式良好的段落和副标题的演进
- 为网站选择字体，以建立品牌：一个简单的公式（经过40年持续使用的实战检验！），您可以每次都遵循，从而获得看起来像是从网站本身性质中自然产生的、截然不同的外观。
- 超越 Google Fonts：在哪里可以找到优秀的字体家族？ 有些网站充斥着据称免费的字体，其中满是学生实验品和知名品牌的仿制品。有些大型网站提供构建我们日常所见字体的铸字厂的完整库。然后还有我去寻找捆绑包、订阅和优惠的地方。
- 让字体发挥作用： 跨浏览器。在区块主题中。 在 theme.json 中（但主要是在编辑器中）。并且，借助一点 PHP 和 CSS，您就可以使用当今在线销售的所有字体。
如果您曾花过哪怕一小时尝试推销任何东西，您一定听过一场长期争论的两个方面：
观点 1： “谁在乎文案？根本没人读。”
观点 2： “如果他们对该产品感兴趣，就会读。”
但您可能不知道还有观点 3。自万维网诞生以来，以及在那之前大约15年，我一直持此观点。
观点 3： 没有人会读看起来像这样的东西。
这基本上就是1995年网页字体的样子。
那是在样式表之前。在表格之前。早于我们几乎任何可以称之为网页标准的东西。读它让我感觉像是坐在网边看网球比赛。
如果您禁用了主题中的所有样式，如果开发者一切都做对了，您得到的仍然是这个。
趣闻：裸 HTML 是可访问的。需要大量的 JavaScript、CSS 和其他所谓的高级技术工作才能让这种可访问性消失。
那么，让我们把那堵灰色的墙变成一篇人们真正想读的引人入胜的文章吧！只需四步：
第一步：注意行长
在本系列的前两部分（链接在上面的蓝色框中），我们应该提到过一行字的长度。它被称为行长。
在过去一百多年里，学者们试图为长篇阅读的舒适度建立一个完美的行长。他们未能找到一个。
广告公司的创意总监和直邮文案撰稿人可能永远不会在很多事情上达成一致，但他们通常对55到75个字符之间的任何长度都感到满意。
您可以取个中间值，将段落的宽度设置为66个字符，然后根据实际视口宽度进行调整。在区块主题中，您将在 theme.json 中编写绝大部分样式，只在 style.css 中编写少数样式，这里也是如此。您过去在 CSS 重置中设置的大多数默认值现在都放在 `theme.json` 设置块的顶部。您可以像这样全局限制列宽：
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"layout": {
"contentSize": "66ch"
}
}
}但在那里使用 `ch` 单位很可能会给您带来一些意想不到的结果。因此，当您沉浸在字符宽度的秘密知识中时，为了省去一些麻烦，请使用像素或 rem，或者vw 单位来设置宽度。
注意：vw 是一个数字，而不是物理单位。该数字等于视口宽度的1%，但您绝对可以让某个东西的尺寸超过 100vw。
在水平方向上，120vw 将比视口宽120%。在垂直方向上，120vw 将是视口宽度120%的高度——但如果您的视口高度比这长，整个元素将适合屏幕。
这个选择可以让您像这样编写布局设置：
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"layout": {
"contentSize": "65vw"
}
}
}现在我们有了边距！
第二步：设置行距
行不再长得没完没了。我们可以看到它们从哪里开始和结束。但如果行之间有更多空间，我们就能更容易地看到现在正在读的是哪一行。
在本系列的第一部分，您看到行之间的空间称为行距。您会希望段落中的行距比标题和副标题中的大，原因如下：
- 您需要为段落字体的上升部和下降部留出空间，使其在不接触的情况下清晰显示。
- 更宽的行距将帮助您的读者在阅读多行段落时跟踪他们正在读哪一行。
- 通常，标题和副标题更大、更短。如果行距太大——以及它们与所引出的正文之间的空间太大——它们看起来会像是飘走了。
以下是如何为段落设置行距：
"styles": {
"blocks": {
"core/paragraph": {
"typography": {
"lineHeight": "1.5"
}
}
}
}
喘口气！现在那些行之间有了更多空气。
目前，所有单元周围的空间是相同的，因为您还将使用 theme.json 中的 blockGap 设置块之间的统一间距，像这样：
"spacing": {
"blockGap": "1.5rem"
}您将在下一步中添加一些设置来改变这一点。
第三步：调整间距
您在上面设置了块之间的最小间距，但您可能希望改变某些元素内部和一些其他元素周围的间距。
在一个跨两行或更多行的章节标题内部，您会希望缩小行距，以便多行作为一个单元紧密相连。
然后我喜欢在该标题的顶部添加空间，使其与它引出的任何文案统一起来，并将该单元作为一个整体与前面的单元分开。
以下是您到目前为止为达到此处效果所编写的所有代码的总结：
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"layout": {
"contentSize": "66ch"
}
},
"styles": {
"spacing": {
"blockGap": "2rem"
},
"typography": {
"lineHeight": "1.5"
},
"elements": {
"heading": {
"typography": {
"lineHeight": "0.9"
}
}
},
"blocks": {
"core/list": {
"spacing": {
"padding": {
"left": "2.5rem"
}
}
}
}
}
}第四步：最终润色！
当您改变文章中字体的颜色、大小、粗细和样式时，文案会变得更具吸引力。
我知道很多设计教程会说您永远不能使用超过两种字体——再多就糟糕了。我设计学院的教授们也这么说。
四十年后，我开始相信并非如此（并将在本排版系列的下一部分中详述）。
现在，让我们就此打住：如果您设置了一堵灰色的文字墙，您的读者必须非常迫切地想要您的信息，他们才会费力读到结尾。
如果您将文案分解成易于处理的小块，每个副标题都有机会说服您的读者继续读下去。