字体
字体配置包含字体、字号、字重和行高多个部分,下面分别进行介绍。
字体风格
字体用于设置文本呈现的风格,在 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
—2x 超大号文本.text-2xl
font-size: font-size
The quick brown fox jumps over the lazy dog. 白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
text-3xl
—3x 超大号文本.text-3xl
font-size: font-size
The quick brown fox jumps over the lazy dog. 白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
text-4xl
—4x 超大号文本.text-4xl
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 工具类 / 排版 / 行高 文档。