字体和颜色｜Fonts and Colors

自定义故事字体与颜色的最简便方法是使用样式后台选项卡¹，该选项卡会为您自动设置 config.style 对象中的值。当您在该选项卡中进行调整时，故事外观将实时更新，方便您轻松尝试不同风格以匹配故事基调。但请注意，此处所做的更改不会永久保存。下次测试或运行故事时，界面将恢复至先前的外观状态。

若要使样式选项卡中的更改永久生效，必须将选项卡顶部配置面板中的代码复制到起始段落的变量部分。（该段落在 Twine 故事地图中显示为火箭图标。）点击代码所在框内的任意位置将自动全选所有内容，便于复制粘贴。

这样做会在故事开始时设置相应的变量——但这并不意味着这是故事唯一的呈现方式。你可以在后续段落的变量部分更改 config.style 对象中的变量，当访问该段落时，故事的外观就会改变。例如，你可以利用这一点来表示梦境序列或闪回。

样式选项卡中的其他面板，页面、页眉和页脚，都包含相同的字段。正如你可能猜到的，页面设置故事的基础样式，而页眉和页脚则控制主文本上方和下方的区域。默认情况下，Chapbook 故事没有页眉。

您为页面、页眉和页脚样式设置的值会相互继承。 这意味着如果页眉或页脚样式值未设置，则会使用对应的页面值。如果页面值也未设置，则会使用 Chapbook 的默认样式。

设置文本样式｜Setting Text Style

Chapbook 使用一种简洁的符号来指定文本样式。下面是一个简单的例子：

Palatino 18

这将设置一个 18 像素高的 Palatino 字体。²但在实际使用中，你应该使用类似这样的方式：

Palatino/serif 18

斜杠分隔了所谓的字体栈中的备用字体。在网络字体出现之前，字体栈是网页设计的关键组成部分。那时，网页浏览器只能显示操作系统中已安装的字体，因此设计师必须指定备用字体，以确保在不同操作系统上呈现一致的外观。

在我们当前的时代，字体栈更多影响的是页面第一眼的外观——通常，文本会先以系统字体立即显示，然后在网络字体加载完成后切换。（关于如何在Chapbook中使用网络字体的详细信息，请参阅外部网络字体。）但有些用户可能会出于个人偏好或节省网络带宽的需要而禁用网络字体，因此将你的故事设计成能适应这种情况是一种良好的实践。

上面的例子表明，如果玩家的网页浏览器没有名为 Palatino 的字体，serif 这个信号会指示其回退到通用的衬线字体。³如果你想将故事文本设置为 Helvetica 字体，可以使用：

Helvetica/Arial/sans-serif 14

许多使用 Windows 电脑查看你故事的读者可能没有 Helvetica 字体，但他们几乎肯定会有 Arial——这是微软开发的 Helvetica 竞品字体。如果出于某种原因两者都没有，故事将使用任何可用的无衬线字体。

当指定名称中包含空格的字体时，你无需进行任何特殊处理：

Times/Times New Roman/serif 20

你还可以使用单词 bold（加粗），italic（斜体），underline（下划线）或 small caps（小型大写字母）来修改字体样式。如果想同时使用多种样式，请在它们之间用空格分隔：

Palatino 18 bold italic

有一种特殊的字体样式名为 regular（常规），它会移除字体通常会继承的任何粗体、斜体、下划线或小型大写字母样式。

字体样式必须全部以小写字母输入。这是因为你可以省略声明的部分内容。以下所有都是有效的字体表示法：

• Palatino
• 18
• bold italic
• Palatino bold
• 18 small caps

省略的部分将按照上述描述进行继承。

颜色｜Colors

虽然并非必须使用，但 Chapbook 包含一个名为”合理色彩“的调色板，由 Matthew Howell 创建。合理色彩旨在让设计既易于查看又美观的色彩组合变得简单。

共有 25 种色调，每种色调有 6 种深浅：

要使用特定色调，请在对应框中输入名称，例如 yellow-6。为确保文本具有足够的色彩对比度，请选择数值差异至少为 3 的两种色调。也就是说，yellow-6 在 yellow-3 背景上具有足够的对比度，但 red-5 在 red-3 背景上则不然。“合理色彩”网站还提供了关于如何搭配特定色调的色彩建议——选择一种色调即可查看详细信息——当然，您r是否遵循这些建议只取决于您。

您也可以使用任何其他网络浏览器支持的[颜色注释法][color-notation]，从传统的十六进制三元组表示法（例如 #0b7285）到更现代的表示法，例如 hsla(0%, 65%, 48%, 0.75)。

在 config（配置）中设置颜色时，通常可以同时指定背景色和前景色。例如，您可以将 config.style.page.color 设置为 'orange-4 on orange-1'。然而，在指定边框颜色时，例如 config.style.page.link.lineColor，则仅使用前景色。

与字体一样，您可以省略颜色声明的部分内容。将 config.style.page.link.color 设置为 'on blue-3' 会使链接使用页面的前景色（无论其具体颜色如何），但使用中等蓝色作为背景。

Open Color（已弃用）｜Open Color (deprecated)

Chapbook 版本 1 包含一个名为开放色彩的不同调色板。您可以继续使用它，但此调色板将在 Chapbook 版本 3 中被移除。若要继续使用这些颜色，请在它们的名称前添加 oc-，例如：oc-red-6 或 oc-gray。

Open Color 中可用的完整色调和色度列表可在其项目网站上找到。

¹: 回顾一下，使用 Twine 的测试按钮启动你的故事可以让后台视图出现，其中包括样式选项卡。

²: 如果你熟悉 CSS 单位，也可以使用它们，例如 Palatino 1rem 或 Palatino 25%。

³: 什么是衬线字体？维基百科给出了恰当的回答。

[color-notation]: https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color#How_to_describe_a_color [helvetica-vs-arial]: https://ilovetypography.com/2007/10/06/arial-versus-helvetica/