Font字体和字号
使用了4种字体和两组字号，满足一般网页对于正文和标题的显示需求
字体
本框架一共提供了4种字体，各自的使用场景不同。
- _ff-body：正文字体，中文环境为雅黑字体
- _ff-icon：图标字体，默认为本框架图标字体
- _ff-alt：替代的正文字体，优先使用英文，用来做数字和英文特写
- _ff-code：代码字体，代码和源码标签所使用的字体
- 输出
- HTML
-
正文字体
中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。 -
- 输出
- HTML
-
图标字体(使用图标字体时，不需要使用`_icon-`前缀。)
search global add phone eye -
- 输出
- 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，用于标题，最粗，一般用于短小的大标题
- _fw-lighter：100~300，用于标题，最细，一般用于简短标题
第二类，数值字重样式类：
- _fw-100：100，lighter范围
- _fw-200：200
- _fw-300：300
- _fw-400：400，normal范围
- _fw-500：500
- _fw-600：600
- _fw-700：700，bold范围
- _fw-800：800
- _fw-900：900，bolder范围
有条件的可以访问谷歌开源字体网站（https://fonts.google.com/），搜索Roboto字体，该字体支持所有字重。
- 输出
- HTML
-
_fw-normal_fw-bold
-
字号
本框架提供两类字号，第一类是正文常用的具名字号：
- _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-huge：48px/4.8rem，超大标题字号
第二类是标题类型字号，与h1~h6标题相对应：
- _fs-h1：1级标题字号，32px/3.2rem（_fs-lead*2）
- _fs-h2：2级标题字号，28px/2.8rem（_fs-body*2）
- _fs-h3：3级标题字号，24px/2.4rem
- _fs-h4：4级标题字号，18px/1.8rem
- _fs-h5：5级标题字号，16px/1.6rem
- _fs-h6：6级标题字号，14px/1.4rem
注意，_fs-display=_fs-h1，_fs-title=_fs-h2，_fs-subtitle=_fs-h4，_fs-lead=_fs-h5，_fs-body=_fs-h6
与字号相对应的是他们的行高：
- _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：48px/4.8rem，固定行高
- _lh-huge：72px/7.2rem，固定行高
- _lh-h1：1.5（48/32），相对行高
- _lh-h2：1.429（40/28），相对行高
- _lh-h3：1.333（32/24），相对行高
- _lh-h4：1.333（24/18），相对行高
- _lh-h5：1.5（24/16），相对行高
- _lh-h6：1.286（18/14），相对行高
- 输出
- HTML
-
_fs-caption中国是以汉族为主体民族的多民族国家_fs-body中国是以汉族为主体民族的多民族国家_fs-lead中国是以汉族为主体民族的多民族国家_fs-subtitle中国是以汉族为主体民族的多民族国家_fs-title中国是以汉族为主体民族的多民族国家_fs-title中国是以汉族为主体民族的多民族国家_fs-huge中国是以汉族为主体民族的多民族国家
-
- 输出
- 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股上市公司作为行业样本，计算每个行业中符合“看好条件”的公司占比。然后，按照这个占比给各个行业排序，选出前十名，即为“前景最被看好的十大行业”。财经杂志 昨天
-
