Font 字体

CSS样式

全部 font 样式代码：

查看代码

:root{
  --bs-font-display: "D-DIN","DIN Alternate",Arial,sans-serif;
  --bs-font-title-cn: "三画追光体","YouSheBiaoTiHei",system-ui;
  --bs-font-body-cn: "思源黑体","Source Han Sans SC","Noto Sans SC",system-ui;
}

/* 28 / 16 / 14 / 12 体系 */
.bs-font-h1{ font-family: var(--bs-font-title-cn); font-size:28px; font-weight:400; }
.bs-font-title{ font-family: var(--bs-font-body-cn); font-size:16px; font-weight:700; }
.bs-font-subtitle{ font-family: var(--bs-font-body-cn); font-size:14px; font-weight:700; }
.bs-font-body{ font-family: var(--bs-font-body-cn); font-size:14px; font-weight:500; }
.bs-font-help{ font-family: var(--bs-font-body-cn); font-size:12px; font-weight:400; }

/* 数值/英文 */
.bs-font-number{ font-family: var(--bs-font-display); font-size:32px; font-weight:800; }

示例

拆解明细

以下为「数据大屏 / 04 字体」页面的拆解明细。

结构

• 页头：左侧「设计规范 / Design Code」+ 顶部横线 + 右上角页码「04」。
• 章节标题：英文淡字 FONT + 中文「字体」+ 左侧菱形点。
• 分组 A：字号：表格 4 列（Size / Font weight / Type / 适用范围）。
• 分组 B：数值英文字号：表格 4 列（Size / Font weight / Type / 适用范围）。

关键样式 Token

• --bs-font-title-cn：中文标题字体（示例：三画追光体 / YouSheBiaoTiHei）。
• --bs-font-body-cn：中文正文字体（示例：思源黑体）。
• --bs-font-display：数值/英文展示字体（示例：D-DIN）。
• .bs-font-h1：28px Regular（头部标题栏）。
• .bs-font-title：16px Bold（标题）。
• .bs-font-subtitle：14px Bold（小标题/按钮文字）。
• .bs-font-body：14px Medium（正文）。
• .bs-font-help：12px Regular（辅助文字）。
• .bs-font-number：32px Bold（数值/英文）。

布局对照

• 顶部横线：width: 1594px; height: 2px（以 1920×1080 设计稿为基准）。
• 表格行强调条：背景色 #EFF6FF，用于示例中「Size」栏的浅色条效果。