ZUI 3字体
字体配置包含字体、字号、字重和行高多个部分，下面分别进行介绍。
字体风格
字体用于设置文本呈现的风格，在 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 工具类 / 排版 / 行高 文档。