Font字体和字号

2025-02-05 10:57:40首发，2周前更新

使用了4种字体和两组字号，满足一般网页对于正文和标题的显示需求

字体

本框架一共提供了4种字体，各自的使用场景不同。

类名	用途说明	字体特征
`_ff-body`	主正文字体，适用于文章内容、段落、导航、说明文本等	兼容英文、法语、德语、俄语、中文（简/繁）、日语、韩语、阿拉伯语
`_ff-icon`	图标字体专用，例如 UI 图标库、图形字体	使用框架内嵌的图标字体
`_ff-alt`	显目数字、大写字母、统计信息、替代用字体等	优先西文优化，兼顾多语种，字体风格更具表现力
`_ff-code`	等宽字体，用于显示代码片段、脚本、终端输出、注释等	包括拉丁、俄语、中文注释支持

输出
HTML

正文字体

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。
```
                
                
            
```

输出
HTML

图标字体(使用图标字体时，不需要使用`_icon-`前缀。)
```
                
                
            
```

输出
HTML

西文装饰字体

(一段关于古希腊历史的文字，开始)Ancient Greece is often regarded as the cradle of Western civilization, influencing countless aspects of culture, politics, philosophy, and art. The history of Ancient Greece spans several centuries, from the early Minoan and Mycenaean civilizations (around 2000 BCE to 1100 BCE) to the rise of classical Greek city-states such as Athens and Sparta.(结束)
```
                
                
            
```

输出
HTML

代码字体

#include <stdio.h>
#include <stdlib.h>
#include <time.h>
int main() {
//初始化
int i;
int rotationSpeed = 1000;
srand(time(NULL));
for (i = 0; i < 10; i++) {
printf("running...\n");
usleep(rotationSpeed * 1000);
}
//返回值
return 0;
}
```
                
                
            
```

字重

字重即font-weight属性的可选值比较多，但是并不是所有字体都支持完整的字重，这依赖于字体本身的设计。

比如中文仅支持normal和bold，英文则可能支持normal、bold、100~900；我们按照通行的办法设计了两组字重样式类：

第一类，具名的字重样式类：

类名	字重范围	用途说明
`_fw-normal`	400~500	正常字重，默认值，适用于正文、说明文本等
`_fw-bold`	600~700	中等粗体，适用于长标题或需要强调的段落文字
`_fw-bolder`	800~900	非常粗，适用于短标题、强调词、Hero 标题等
`_fw-lighter`	100~300	极细字重，适合小标题、展示风格、科技感页面等

第二类，数值字重样式类：

类名	字重值	范围说明	用途建议
`_fw-100`	100	lighter 范围	极细字重，适合展示风格、英文标题、装饰文本
`_fw-200`	200	lighter 范围	比较细，适合科技感或现代风格页面中的副标题
`_fw-300`	300	lighter 范围	常用于较弱强调，或者轻量级 UI 元素文本
`_fw-400`	400	normal 范围	常规字重，正文字体默认值
`_fw-500`	500	normal 范围	稍加强调的正文字体，适合 UI 元素说明、按钮文字等
`_fw-600`	600	bold 范围	用于中等粗体标题、导航栏、区块标题等
`_fw-700`	700	bold 范围	经典粗体标题字重，适用于突出文本
`_fw-800`	800	bolder 范围	非常粗，用于短标题、Logo、视觉重锤
`_fw-900`	900	bolder 范围	极粗，适合极短文本或需最大视觉冲击的场景

可以访问谷歌开源字体网站，搜索`Roboto`字体，该字体支持所有字重。

输出
HTML

_fw-normal

_fw-bold
```
                
                
            
```

字号

本框架提供两类字号，第一类是正文常用的具名字号；第二类是标题字号。

两种字号有关联，但又不相同。

注意，_fs-display=_fs-h1，_fs-title=_fs-h2，_fs-subtitle=_fs-h4，_fs-lead=_fs-h5，_fs-body=_fs-h6

具名字号

具名字号可通过名称可判断其大小，与基本尺寸名称一致。

字号和行高的值基本上是2或4的倍数，可以方便与其他固定尺寸的节点对齐。

类名	字号px	字号px	用途说明
`_fs-caption`	12px	1.2rem	小型字号，用于说明/标签等
`_fs-body`	14px	1.4rem	正文字号，基础阅读字号
`_fs-lead`	16px	1.6rem	标题字号或引导段
`_fs-subtitle`	18px	1.8rem	更大的小标题
`_fs-title`	28px	2.8rem	新闻/文章主标题（_fs-body ×2）
`_fs-display`	32px	3.2rem	大标题（_fs-lead ×2）
`_fs-hero`	48px	4.8rem	超大标题，用于首页 Hero 区

与之对应的行高：

类名	行高px	行高值	用途说明
`_lh-caption`	18px	1.8rem	小型字号的固定行高
`_lh-body`	24px	2.4rem	正文字号的固定行高
`_lh-lead`	24px	2.4rem	引导段或小标题的固定行高
`_lh-subtitle`	28px	2.8rem	更大的小标题固定行高
`_lh-title`	40px	4rem	主标题固定行高
`_lh-display`	44px	4.4rem	大标题的固定行高
`_lh-hero`	60px	6.0rem	超大标题的固定行高（Hero 区）

字号和行高的关系：

字号类名	行高类名	行高/字号
`_fs-caption`	`_lh-caption`	1.5
`_fs-body`	`_lh-body`	1.714
`_fs-lead`	`_lh-lead`	1.5
`_fs-subtitle`	`_lh-subtitle`	1.56
`_fs-title`	`_lh-title`	1.43
`_fs-display`	`_lh-display`	1.375
`_fs-hero`	`_lh-hero`	1.25

输出
HTML

_fs-caption中国是以汉族为主体民族的多民族国家

_fs-body中国是以汉族为主体民族的多民族国家

_fs-lead中国是以汉族为主体民族的多民族国家

_fs-subtitle中国是以汉族为主体民族的多民族国家

_fs-title中国是以汉族为主体民族的多民族国家

_fs-title中国是以汉族为主体民族的多民族国家

_fs-hero中国是以汉族为主体民族的多民族国家
```
                
                
            
```

标题字号

标题字号与h1~h6标题相对应：

类名	字号px	字号rem	备注说明
`_fs-h1`	32px	3.2rem	1级标题，通常用于页面主标题（_fs-lead*2）
`_fs-h2`	28px	2.8rem	2级标题，适合文章标题或分区标题（_fs-body*2）
`_fs-h3`	24px	2.4rem	3级标题，适合小区块或小节标题
`_fs-h4`	18px	1.8rem	4级标题，适合注释性副标题
`_fs-h5`	16px	1.6rem	5级标题，接近正文大小，可用于引导
`_fs-h6`	14px	1.4rem	6级标题，通常用于最小的分组标题

对应的行高：

类名	相对行高	用途说明
`_lh-h1`	1.25	用于 1级标题，紧凑视觉效果，常见于首页主标题
`_lh-h2`	1.357	用于 2级标题，略放松，增强可读性
`_lh-h3`	1.417	用于 3级标题，适用于较长的子标题段落
`_lh-h4`	1.444	用于 4级标题，适中行高，兼顾紧凑与清晰
`_lh-h5`	1.5	用于 5级标题，接近正文风格，清晰舒适
`_lh-h6`	1.57	用于 6级标题，适用于细节注释、小节名等

标题的行高是相对行高，是从密到疏排列，可以用于任何段落文字。

输出
HTML

_fs-h1中国是以汉族为主体民族的多民族国家

_fs-h2中国是以汉族为主体民族的多民族国家

_fs-h3中国是以汉族为主体民族的多民族国家

_fs-h4中国是以汉族为主体民族的多民族国家

_fs-h5中国是以汉族为主体民族的多民族国家

_fs-h6中国是以汉族为主体民族的多民族国家
```
                
                
            
```

通用行高

上文已经展示与字号匹配的行高，匹配的行高可以对其像素；同时我们提供了另外一组行高样式类用于纯文本布局，支持使用任意字号，但是不一定能对齐像素。

类名	相对行高	用途说明
`_lh-sm`	1.268	适用于较小、不突出的文本；也适合用于多行大标题，制造紧凑视觉感
`_lh-md`	1.5	适合短小段落、小标题，常用于显眼的两行以内标题文本
`_lh-lg`	1.78	适合大段正文内容，行距较宽松，提升可读性，尤其适合长文阅读体验

输出
HTML

2025年，前景最被看好的十大行业

在一个行业中，认为前途光明的公司越多，说明行业的前景越被看好。我们以A股上市公司作为行业样本，计算每个行业中符合“看好条件”的公司占比。然后，按照这个占比给各个行业排序，选出前十名，即为“前景最被看好的十大行业”。

财经杂志昨天
```
                
                
            
```

Font字体和字号

字体

正文字体

图标字体(使用图标字体时，不需要使用`_icon-`前缀。)

西文装饰字体

代码字体

字重

字号

具名字号

标题字号

通用行高