跳转至

文本样式

从这一步开始，我们需要修改一下 message 的内容格式：

1
2
3
4
5
{
    "message": {
        "text": "我们所经历的每个平凡的日常，也许就是连续发生的奇迹。"
    }
}

其中，text 表示文本内容。在开始为其添加样式参数之前，这么做实际上等效于基本格式中的效果。

现在，我们要在 message 字段中写入 style 字段，这是定义文本样式的字段。

1
2
3
4
5
6
{
    "message": {
        "text": "我们所经历的每个平凡的日常，也许就是连续发生的奇迹。",
        "style": {}
    }
}

接下来，我们将围绕 style 字段展示其独特功能。

开发者注意事项

Echo 本身并不具备解析样式的功能，也并未规定如何定义样式，样式的解析是由下游脚本实现的，是 Echo-Live 承担了这一工作。

粗体、斜体、下划线和删除线

style 字段可以定义粗体 bold、斜体 italic、下划线 underline 和删除线 strikethrough，这些值都是布尔值，把他们一股脑加进去是这样的：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
    "message": {
        "text": "我们所经历的每个平凡的日常，也许就是连续发生的奇迹。",
        "style": {
            "bold": true,
            "italic": true,
            "underline": true,
            "strikethrough": true
        }
    }
}

我们所经历的每个平凡的日常，也许就是连续发生的奇迹。

当然一般情况下不需要加这么多，除非你在搞什么抽象艺术。

文本颜色

文本颜色可以通过 color 字段定义，这是一个字符串，可以接受：

  • red、green 等颜色关键字；
  • 十六进制（如 #66CCFF）；
  • RGB（如 rgb(128, 128, 128)）；
  • HSL（如 hsl(150, 30%, 60%)）等。

当然还有 HWB、LAB、LCH、Oklab、Oklch 等一切能在网页上使用的颜色值表达，我不建议您玩这么花。

关于颜色值的格式详见：<color> - CSS：层叠样式表 | MDN

1
2
3
4
5
6
7
8
{
    "message": {
        "text": "我们所经历的每个平凡的日常，也许就是连续发生的奇迹。",
        "style": {
            "color": "#66CCFF"
        }
    }
}

我们所经历的每个平凡的日常，也许就是连续发生的奇迹。

背景颜色

1.3.0

文本颜色可以通过 backgroundColor 字段定义，格式同上。

1
2
3
4
5
6
7
8
{
    "message": {
        "text": "我们所经历的每个平凡的日常，也许就是连续发生的奇迹。",
        "style": {
            "backgroundColor": "#4287ff44"
        }
    }
}

我们所经历的每个平凡的日常，也许就是连续发生的奇迹。

字号

1.3.0

字号可以通过 size 字段定义，这是一个字符串，可以接受以下值：

值 描述
extra-small 特小号，0.5 倍大小。
small 小号，0.75 倍大小。
middle 中号，原始大小。
large 大号，1.5 倍大小。
extra-large 特大号，2 倍大小。

注意

在有多个文本段落的情况下，文本打印过程中出现更大字号的文本会使整行文本的基线突然向下移动，这个效果不太好看，这也是 Echo-Live 直到 1.3.0 版本才加入此功能的原因。

1
2
3
4
5
6
7
8
{
    "message": {
        "text": "我们所经历的每个平凡的日常，也许就是连续发生的奇迹。",
        "style": {
            "size": "large"
        }
    }
}

我们所经历的每个平凡的日常，也许就是连续发生的奇迹。

字重

1.3.0

字重是指字体的粗细字形，字重会覆盖粗体设置。

一些字体不一定支持所有字重，在指定字重缺失的情况下会就近选择可用字重。

字重可以通过 weight 字段定义，这是一个字符串，可以接受以下值：

值 描述
thin、hairline 淡体，字重 100。
extra-light、ultra-light 特细，字重 200。
light 细体，字重 300。
semi-light、demi-light 次细，字重 350。
regular、normal、book、plain 标准，字重 400，默认字重。
medium 适中，字重 500。
semi-bold、demi-bold 次粗，字重 600。
bold 粗体，字重 700，与上文的粗体等价。
extra-bold、ultra-bold 特粗，字重 800。
black、heavy 浓体，字重 900。
extra-black、ultra-black、extra-heavy、ultra-heavy 特浓，字重 950。 
1
2
3
4
5
6
7
8
{
    "message": {
        "text": "我们所经历的每个平凡的日常，也许就是连续发生的奇迹。",
        "style": {
            "weight": "thin"
        }
    }
}

我们所经历的每个平凡的日常，也许就是连续发生的奇迹。

着重号

1.5.0

着重号可以通过 emphasis 字段定义，这是一个布尔值，可以在文本下方添加着重号。

1
2
3
4
5
6
7
8
{
    "message": {
        "text": "我们所经历的每个平凡的日常，也许就是连续发生的奇迹。",
        "style": {
            "emphasis": true
        }
    }
}

我们所经历的每个平凡的日常，也许就是连续发生的奇迹。

字间距

1.3.0

字间距可以通过 letterSpacing 字段定义，这是一个字符串，可以接受以下值：

值 描述
compact 紧凑的间距，文字略微相互靠拢。
normal 默认间距。
four-per-width 四分之一字符宽度间距。
half-width 半角字符宽度间距。
full-width 全角字符宽度间距。 
1
2
3
4
5
6
7
8
{
    "message": {
        "text": "你说话带空格。",
        "style": {
            "letterSpacing": "half-width"
        }
    }
}

你说话带空格。

字形伸缩

1.3.0

字形伸缩可以通过 stretch 字段定义，这是一个字符串，可以接受以下值：

值 描述
ultra-condensed 伸缩 50%。
extra-condensed 伸缩 62.5%。
condensed 伸缩 75%。
semi-condensed 伸缩 87.5%。
normal 伸缩 100%，原始字形。
semi-expanded 伸缩 112.5%。
expanded 伸缩 125%。
extra-expanded 伸缩 150%。
ultra-expanded 伸缩 200%。

注意

绝大多数字体都不支持伸缩调整，包括 Echo-Live 默认使用的思源黑体。您需要自行选用支持伸缩调整的字体才能正常使用此功能。

代码
1
2
3
4
5
6
7
8
{
    "message": {
        "text": "Only my RAILGUN can shoot it.",
        "style": {
            "stretch": "condensed"
        }
    }
}

文本投影

文本投影可以通过 shadow 字段定义，包含以下字段：

字段名 默认值 描述
x、y 0 偏移量，需要指定长度单位，可以是负数。
blur 0.25em 模糊规模，需要指定长度单位。
color #000000 投影颜色。 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
    "message": {
        "text": "我们所经历的每个平凡的日常，也许就是连续发生的奇迹。",
        "style": {
            "shadow": {
                "x": "0.25em",
                "y": "0.25em",
                "blur": "0.35em",
                "color": "#66CCFF"
            }
        }
    }
}

我们所经历的每个平凡的日常，也许就是连续发生的奇迹。

自定义样式

如何您想尝试自定义样式，请先学习 CSS。

您可以通过 style 字段为文本段落写入自定义样式。是的，你没看错，是 style 中的 style...... 好吧这个套娃确实有点奇怪。

如果您已经掌握了 CSS，那我们直接上示例，这不难理解：

1
2
3
4
5
6
7
8
{
    "message": {
        "text": "我们所经历的每个平凡的日常，也许就是连续发生的奇迹。",
        "style": {
            "style": "font-size: 0.75em; color: #66CCFF;"
        }
    }
}

我们所经历的每个平凡的日常，也许就是连续发生的奇迹。

另外，如果您预先准备好了一些样式，您也可以通过为文本添加类（Class）属性来为其赋予样式，请注意该字段并不在 style 字段内：

1
2
3
4
5
6
{
    "message": {
        "text": "我们所经历的每个平凡的日常，也许就是连续发生的奇迹。",
        "class": "example-text example-text-2"
    }
}

1
2
3
4
5
6
7
.example-text {
    font-size: 0.75em;
    color: #66CCFF;
}
.example-text-2 {
    font-weight: bold;
}

我们所经历的每个平凡的日常，也许就是连续发生的奇迹。