版式在网络设计中是一个广泛的主题,没有任何单个文档可以公正。有一些长度的作品,可以介入整个网络上的细节和文章,这些详细信息和文章详细介绍了最佳实践,技巧和技巧。

本指南将特别使您通过可用的可用设置来提高您的速度settings.typographytheme.json

排版也与主题的间距紧密相关,因此您需要熟悉 间距设置 为了充分利用这两个指南。您还将从本文档中获取所学的知识,并将其应用于您的 theme.json样式

启用和禁用排版选项

有几种仅用于在用户界面中启用或禁用元素的设置。这些属性中的每一个都接受布尔值,这意味着您可以将它们设置为任何一个true或者false

并非每个块都会支持每个排版设置。有些是特定于单个块的。例如,dropCap属性仅适用于段落块。其他几乎所有文本的块都广泛使用,例如customFontSize

这些settings.typography属性让您在接口中启用或禁用功能:

  • customFontSize 是否让用户输入自定义字体大小。默认为true
  • dropCap 用户是否可以为段落块的第一个字母启用一个drop-cap。默认为true
  • fontStyle 用户是否可以选择自定义字体样式。默认为true
  • fontWeight: 用户是否可以选择自定义字体重量。重量范围映射到标准 薄的 通过 黑色的 字体重量。默认为true
  • letterSpacing 用户是否可以输入自定义字母间距值。默认为false
  • lineHeight 用户是否可以输入文本自定义行高。无法注册线路高预设,因此此选项启用了完全自定义的输入。默认为false
  • textColumns 是否显示该块文本的列选项。默认为false
  • textDecoration 用户是否可以为块的文本设置文本装饰。可用选项是 没有任何强调,和 罢工。默认为true
  • textTransform 用户是否可以更改块文本的字母案例。可用选项是 没有任何大写小写,和 大写。默认为true
  • writingMode 是否启用文字 方向 在接口中,允许用户在 水平的垂直的 文本。默认为false

这是这些版式设置在默认的WordPress中的样子theme.json

{
	"version": 2,
	"settings": {
		"typography": {
			"customFontSize": true,
			"dropCap": true,
			"fontStyle": true,
			"fontWeight": true,
			"letterSpacing": true,
			"lineHeight": false,
			"textColumns": false,
			"textDecoration": true,
			"textTransform": true,
			"writingMode": false
		}
	}
}

在此屏幕截图中,请注意 排版 段落块的面板,该面板已启用了每个设置:

WordPress post editor with a Heading and multiple Paragraph blocks inserted. In the right sidebar, nearly every typography option is shown.

根据主题的受众的不同,您将只需要启用其用户所需的功能。例如,您可能只需要配置字体大小的客户端即可。如果妨碍他们的工作流程,向他们展示每一个设置是没有意义的。

滴盖的注释:当前的实现功能众所周知,有不同的字体系列,字体尺寸和行高。如果您启用了此功能,请确保测试掉落盖在主题设计中看起来不错。您可能需要添加自定义CSS,以使其与主题匹配。

定制字体家庭

WordPress可让您通过所需的数量来注册。settings.typography.fontFamilies财产中theme.json。您可以添加对这两种系统字体(在访问者的计算机上使用的字体)或Web字体(与主题捆绑的自定义字体)的支持。您将学习如何在本节中注册这两个。

这些作为选项在 版式>字体 检查员面板中的字段用于支持选择字体的块:

WordPress post editor with a Cover block with inner blocks nested. In the sidebar, the Font dropdown is shown.

settings.typography.fontFamilies默认情况下,属性是一个空数组。您可以通过以这些属性传递字体族对象来注册字体:

  • name(必需的)字体家族的人类可读标题,可以翻译。
  • slug(必需的)尺寸的sl,将附加到生成的CSS自定义属性:--wp--preset--font-family--{slug}
  • fontFamily(必需的)将映射到CSS的有效值font-family价值。通常,这将是字体堆栈(浏览器将尝试按顺序使用的家庭列表)。
  • fontFace(选修的)一系列字体面孔映射到@font-faceCSS AT规则。您只需要在将自定义网络字体与主题捆绑在一起时使用。

这是字体系列设置在默认的WordPress中的样子theme.json

{
	"version": 2,
	"settings": {
		"typography": {
			"fontFamilies": []
		}
	}
}

在以下小节中,您将首先学习如何注册系统字体。然后,您将采取下一步并注册自定义的Web字体。

注册系统字体

系统字体比Web字体更简单。您只需要知道要使用的字体即可。对于此练习,让我们假设您要注册两个字体,这些字体将在主题中使用:

  • 基本的: 一个过渡性的衬线字体堆栈,在现代设备中看起来会很好。
  • 次要: 用户的系统UI字体。

将此代码添加到您的theme.json注册每个字体:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"name": "Primary",
					"slug": "primary",
					"fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
				},
				{
					"name": "Secondary",
					"slug": "secondary",
					"fontFamily": "system-ui, sans-serif"
				}
			]
		}
	}
}

这些选项现在将出现在 版式>字体 支持该功能的任何块的下拉块。

WordPress还将生成两个CSS自定义属性--wp--preset--font-family--{$slug}编辑器和前端的格式:

body {
	--wp--preset--font-family--primary: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--wp--preset--font-family--secondary: system-ui, sans-serif;
}

您可以将这些称为var:preset|font-family|$slug当您开始使用它们 样式theme.json。您也可以使用它们var( --wp--preset--font-family--{$slug} )直接在CSS中。

通常建议将语义命名方案用于您的字体家庭slugs,以便在儿童主题,样式变化以及从主题到主题之间切换时,它们是更未来的证明。这些示例使用primarysecondary由于这些是广泛使用的术语。最好避免命名您的sl,以便它们与当前的字体系列相匹配。

注册Web字体(字体面)

注册自定义Web字体的工作方式与系统字体几乎相同。最大的不同是您需要添加fontFace属性到您的字体家庭对象。

fontFace必须是一系列字体面对对象。每个对象都接受这些属性,这些属性将其映射到描述符 @font-faceCSS AT规则

  • fontFamily 有效的CSSfont-family描述符。
  • fontWeight 一系列CSSfont-weight值。
  • fontStyle 有效的CSSfont-style价值。
  • fontStretch 有效的CSS字体拉伸值。
  • src 字体文件所在的一个字体文件URL数组(这可以用于支持多种格式,但只需要一个格式)。

src属性是唯一的,因为它允许您引用相对于theme.json在您的主题中文件。使用"file:./path/to/file.ext"格式引用与您的主题捆绑的字体。

让我们尝试一个例子。从上一节中构建代码,假设您想用打开的sans Web字体替换系统UI字体。

此示例还将假设您已经下载并将开放式字体转换为现代字体.woff2格式,大多数浏览器都广泛支持。您还将这些文件放在主题的/assets/fonts这样的文件夹:

  • /assets
    • /fonts
      • /open-sans.woff2
      • /open-sans-italic.woff2

将您的网络字体捆绑在您的主题中并准备就绪,将此代码添加到您的theme.json文件注册:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"name": "Primary",
					"slug": "primary",
					"fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
				},
				{
					"name": "Secondary",
					"slug": "secondary",
					"fontFamily": "'Open Sans', sans-serif",
					"fontFace": [
						{
							"fontFamily": "Open Sans",
							"fontWeight": "300 800",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/open-sans.woff2" ]
						},
						{
							"fontFamily": "Open Sans",
							"fontWeight": "300 800",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/open-sans-italic.woff2" ]
						}
					]
				}
			]
		}
	}
}

与系统字体一样,WordPress将为Web字体生成CSS自定义属性。这是CSS输出的样子:

body {
	--wp--preset--font-family--primary: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--wp--preset--font-family--secondary: 'Open Sans', sans-serif;
}

自定义字体尺寸

WordPress可让您注册主题用户可以选择的任意数量的预设字体尺寸。通过注册自定义尺寸,您可以更轻松地保持整个主题的一致版式。
自定义字体尺寸以选项的形式出现 版式>大小 检查员控件中的面板支持支持该功能的块:

WordPress post editor showing multiple paragraphs with different font sizes.

请注意,如果您的自定义尺寸超过五个,则UI将显示下拉式选择,而不是上面屏幕截图中显示的按钮组。

那里有两个theme.json.settings.typography相关字体大小:

  • fluid 是否启用在大屏幕上扩大规模并在较小的屏幕上向下扩展的流体字体大小。这可以覆盖单个自定义尺寸。默认为false
  • fontSizes 您可以使用一系列字体大小对象来自定义用户可以选择的可用预设。WordPress注册默认大小smallmediumlarge,和x-large

这是默认WordPress中这些属性的样子theme.json

{
	"version": 2,
	"settings": {
		"typography": {
			"fluid": false,
			"fontSizes": [
				{
					"name": "Small",
					"slug": "small",
					"size": "13px"
				},
				{
					"name": "Medium",
					"slug": "medium",
					"size": "20px"
				},
				{
					"name": "Large",
					"slug": "large",
					"size": "36px"
				},
				{
					"name": "Extra Large",
					"slug": "x-large",
					"size": "42px"
				}
			]
		}
	}
}

如您所见,默认情况下,WordPress会禁用流体字体大小,并注册其四个静态尺寸。在几乎所有情况下,您都需要用符合您主题设计的尺寸来覆盖它们。

就像您可以设置的其他预设一样theme.json,WordPress会使用该字体自动生成CSS自定义属性--wp--preset--font-size--{$slug}格式。对于默认尺寸,此CSS在编辑器中和前端输出:

body {
	--wp--preset--font-size--small: 13px;
	--wp--preset--font-size--medium: 20px;
	--wp--preset--font-size--large: 36px;
	--wp--preset--font-size--x-large: 42px;
}

WordPress还使用该字体大小为每个字体大小预设生成自定义CSS类.has-{$slug}-font-size命名计划。默认大小会产生以下类:

.has-small-font-size{
	font-size: var(--wp--preset--font-size--small) !important;
}

.has-medium-font-size{
	font-size: var(--wp--preset--font-size--medium) !important;
}

.has-large-font-size{
	font-size: var(--wp--preset--font-size--large) !important;
}

.has-x-large-font-size{
	font-size: var(--wp--preset--font-size--x-large) !important;
}

启用流体版式

在现代网络设计中,您几乎总是会使用流体版式。这使您的字体尺寸可以通过视口或容器向上或向下扩展。

WordPress使用基于视口的系统进行流体版式。但是,如果您喜欢使用不同的东西,例如基于容器的系统,并且可以使其禁用,则不必依靠这一点。

假设您想使用默认的核心大小,但希望它们全部都是流体而不是静态值。您可以通过设置启用此功能settings.typography.fluidtrue在你的theme.json文件:

{
	"version": 2,
	"settings": {
		"typography": {
			"fluid": true
		}
	}
}

WordPress现在将生成注册字体尺寸的流体尺寸:

body {
	--wp--preset--font-size--small: 13px;
	--wp--preset--font-size--medium: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.852), 20px);
	--wp--preset--font-size--large: clamp(22.041px, 1.378rem + ((1vw - 3.2px) * 1.983), 36px);
	--wp--preset--font-size--x-large: clamp(25.014px, 1.563rem + ((1vw - 3.2px) * 2.413), 42px);
}

14px是默认的最小字体大小限制。因为small大小低于该极限,它保持其静态大小13px

注册自定义字体尺寸预设

毫无疑问,您将要注册与主题设计相匹配的字体大小,而不是坚持使用默认值。为此,您必须将字体大小对象的数组传递给settings.typography.fontSizes财产中theme.json

这些对象中的每一个都接受多个属性:

  • name 大小的人类可读标题,可以翻译。
  • size 有效的CSS尺寸。这可以是数字和单位,使用自定义的流体尺寸clamp(),或引用另一个自定义CSS属性。
  • slug 尺寸的sl,将附加到生成的CSS自定义属性:--wp--preset--spacing--{slug}
  • fluid 启用或禁用该特定尺寸的流体版式的布尔值,覆盖全球属性。或者,它可以是一个包含:
    • min 字体尺寸可以扩展到最小值。必须是有效的CSS大小。
    • max 字体大小可以扩展到最大值。必须是有效的CSS大小。

让我们首先注册一组具有静态值的简单自定义大小。将此代码添加到您的theme.json文件:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"name": "Small",
					"size": "1rem",
					"slug": "sm"
				},
				{
					"name": "Medium",
					"size": "1.25rem",
					"slug": "md"
				},
				{
					"name": "Large",
					"size": "1.5rem",
					"slug": "lg"
				}
			]
		}
	}
}

就像默认大小预设一样,WordPress将在编辑器和前端自动生成每个CSS:

body {
	--wp--preset--font-size--sm: 1rem;
	--wp--preset--font-size--md: 1.25rem;
	--wp--preset--font-size--lg: 1.5rem;
}

现在,让我们进一步迈出一步。在上一个示例中,您注册了小型,中和大尺寸。假设无论浏览器的视口宽度如何,您都希望小尺寸保持其值。但是您希望中等大小与视口一起扩展。

使用fluid属性,让我们以尺寸的规模进行配置。将此代码添加到您的theme.json

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
			"fluid": true,
			"fontSizes": [
				{
					"name": "Small",
					"size": "1rem",
					"slug": "sm",
					"fluid": false
				},
				{
					"name": "Medium",
					"size": "1.25rem",
					"slug": "md",
					"fluid": {
						"min": "1rem",
						"max": "1.5rem"
					}
				},
				{
					"name": "Large",
					"size": "1.5rem",
					"slug": "lg",
					"fluid": {
						"min": "1.25rem",
						"max": "2rem"
					}
				}
			]
		}
	}
}

WordPress将生成这些CSS自定义属性:

body {
	--wp--preset--font-size--sm: 1rem;
	--wp--preset--font-size--md: clamp(1rem, 1rem + ((1vw - 0.2rem) * 1.136), 1.5rem);
	--wp--preset--font-size--lg: clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 1.705), 2rem);
}

如何为主题自定义这个问题没有太多限制。以上提供了注册自定义字体尺寸的介绍,但是您可以完全控制其对主题的工作方式。

要深入了解流体字体大小,请阅读 内在设计,主题和重新思考如何使用WordPress设计 在开发人员博客上。

By zhuon

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注