Skip to content

字体

字体配置包含字体、字号、字重和行高多个部分,下面分别进行介绍。

字体风格

字体用于设置文本呈现的风格,在 ZUI 中预设了三种字体风格,包括无衬线字体、衬线字体和等宽字体。下面为三种字体的直观展示:

font-sans
.font-sans
无衬线字体 默认字体,易于阅读,通常用于正文
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
font-serif
.font-serif
衬线字体 更美观,通常用于标题或装饰性文本
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
font-mono
.font-mono
等宽字体 每个字符宽度一致,便于对齐,辨识度高,通常用于代码和编号等
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。

在 ZUI 中,以上三种字体风格所使用的 CSS font-family 属性值如下:

无衬线字体 font-sans

font-family

衬线字体 font-serif

font-family

等宽字体 font-mono

font-family

修改字体

通常不建议修改字体,如需修改可以通过定制主题实现,具体参见 主题 文档。

在 ZUI 中可以通过 CSS 工具类来设置字体,详细用法参加 CSS 工具类 / 排版 / 字体 文档。

字号

字号用于设置文本呈现的大小,在 ZUI 中预设了多种字号。详情参见下表:

text-root
.text-root
根节点字号设置在 <html> 元素上的字号
font-size: font-size
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
text-sm
.text-sm
小号文本
font-size: font-size
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
text-base
.text-base
基准字号文本通常与页面默认字号一致
font-size: font-size
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
text-md
.text-md
中号文本
font-size: font-size
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
text-lg
.text-lg
大号文本
font-size: font-size
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
text-xl
.text-xl
超大号文本
font-size: font-size
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
text-2xl
.text-2xl
2x 超大号文本
font-size: font-size
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
text-3xl
.text-3xl
3x 超大号文本
font-size: font-size
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
text-4xl
.text-4xl
4x 超大号文本
font-size: font-size
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。

修改字号

通常不建议修改字号,如需修改可以通过定制主题实现,具体参见 主题 文档。

在 ZUI 中可以通过 CSS 工具类来设置字号,详细用法参加 CSS 工具类 / 排版 / 字号 文档。

字重

在 ZUI 中预设了 6 种常见字重,详情参见下表:

font-thin
.font-thin
超细文本
font-weight: font-weight
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
font-light
.font-light
细文本
font-weight: font-weight
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
font-normal
.font-normal
正常粗细文本
font-weight: font-weight
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
font-medium
.font-medium
中等粗细文本
font-weight: font-weight
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
font-bold
.font-bold
加粗文本
font-weight: font-weight
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
font-black
.font-black
超粗文本
font-weight: font-weight
The quick brown fox jumps over the lazy dog.
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。

修改字重

通常不建议修改字重,如需修改可以通过定制主题实现,具体参见 主题 文档。

在 ZUI 中可以通过 CSS 工具类来设置字重,详细用法参加 CSS 工具类 / 排版 / 字重 文档。

行高

ZUI 中预设了多种常见行高,下面为几种常见行高的示例:

leading-tight
.leading-tight
紧密
line-height: line-height
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
月光如流水一般,静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。
leading-snug
.leading-snug
紧凑
line-height: line-height
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
月光如流水一般,静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。
leading-normal
.leading-normal
正常
line-height: line-height
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
月光如流水一般,静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。
leading-relaxed
.leading-relaxed
宽松
line-height: line-height
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
月光如流水一般,静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。
leading-loose
.leading-loose
松散
line-height: line-height
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
月光如流水一般,静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。

在 ZUI 中可以通过 CSS 工具类来设置行高,详细用法参加 CSS 工具类 / 排版 / 行高 文档。