Twine 2指南-改变字体、颜色和外观 汉化版
翻译/钢笔千月
原网址：https://twinery.org/wiki/twine2:change_the_font_colors_or_appearance
2016.9.16 15:33
如果你在寻找如何是文字做出简单的格式变化，如粗体或斜体。那么如何格式化文本能帮到你。但是如果你想改变改变你所发表故事的字体或颜色方案呢？最好的实现方式是编辑你的故事的样式表（未汉化，原网页：https://twinery.org/wiki/twine2:adding_custom_javascript_and_css）。这里使用了CSS这个标准的Wed技术。如果你从来没有编写过CSS，那么这个和这个两个站点都有相对完善的教程（因为原网页的站点链接至国外站点，故此处换成了两个不错的国内站点）。
也就是说，熟练使用CSS需要大量的学习。但幸运的是，基本的变化还是不算复杂的。接下来让我们来讲下两个常见的场景。
改变字体
你可以用一个宣言就像在你的故事样式表一样轻松地改变整个故事的字体：
body
{
font-family: Palatino;
font-size: 18px;
}
不过有件很重要的事要记住！字体文件不会自动打包进你的故事里，所以如果有人没有安装这个字体阅读你的故事时，你的故事不会用你所想得字体呈现。此时有两种方法可以用到。
你可以选择一个几乎所有人都安装的字体。CSS字体栈上有Windows和Mac系统常见的字体。（这上面只有英文字体的统计……不汉化）
你也可以使用嵌入字体，当读取你的故事时浏览器会下载字体文件。创建嵌入字体有点复杂，但是如果你感兴趣的话可以在这个网页（不列入汉化计划）看看它是如何工作的。使用谷歌字体（需要梯），你可以用CSS的一个额外行来嵌入字体，这可要容易得多。这里展示了如何使用Lora字体作为你故事的字体：（因为谷歌在天朝的尴尬事……所以不推荐使用谷歌字体）
@importurl(https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic);
body
{
font-family: Lora, serif;
font-size: 18px;
}
更改配色方案
颜色以各种形式记录在CSS上，不过最常用的是十六进制。每两个数字为一组分别记录这个颜色有多少的红、绿、蓝。因此，纯红色会被写为：#ff0000（你可以在CSS里用“red”来获得相同的颜色，这个有个完整的列表（不列入汉化计划，但是通过范例颜色可以很容易地理解）让你了解可用的颜色词，不过用十六进制更容易指定一个确切的颜色）你也可以使用在线工具比如Adobe颜色或paletton（推荐用Adobe颜色，有中文，不过有没有中文也无碍），获取相应颜色的十六进制码。
接下来让我们开始更改页面的背景颜色。这很容易添加在你的[story styleheet]中：
body
{
background-color: #f5fff0;
}
这会把背景颜色改为浅绿色。同样，你可以像在Snowman和SugarCube故事格式里改变文字颜色一样改变它：
body
{
background-color: #f5fff0;
color: #22301a;
}
如果你用的是Harlowe，那么就得用稍微有所不同的代码：
body
{
background-color: #f5fff0;
}
tw-passage
{
color: #22301a;
}
在Snowman和SugarCube中像这样改变网页上链接的颜色：
a
{
color: #422424;
}
在Harlowe，你得这样写：
tw-link
{
color: #422424;
}
你可以结合这些代码来建立一个完整的配色方案，比如：
body
{
background-color: #f5fff0;
color: #22301a;
}
a
{
color: #422424;
}
外部资源：（此部分链接指向网址均不列入汉化计划）
Furkle已经写了一个Harlowe格式改变故事外观的教程，说明了不同页面的元素。
SugarCube的文档有一个如何在这个故事格式中进行页面元素设置的 示意图。不过它需要你对HTML有一点了解。
评论