3.3 文本、颜色与背景：涂料与墙纸

3.3 文本、颜色与背景：涂料与墙纸

本节摘要：排印三参数（字族、字号、行高）决定文字的可读性，颜色有四种写法与透明度通道，背景可以铺色、贴图、刷渐变。本节为看板定下完整的视觉基调：字体栈的稳健写法、字号与行高的配比经验、状态色三件套的扩展，以及页头深色底与卡片浅色底的层次策略。

一、排印三参数：字族、字号、行高

装修先刷墙，刷墙先调漆。文字是页面的主体材料，排印三参数就是漆的配方。字族给出一串候选名单，浏览器从前往后挑第一个装了的；字号建议用相对单位，随用户浏览器设置缩放；行高控制行间距，中文正文的经验区间是一点五到一点八倍字号——行距太密读着憋闷，太疏又断句。

/* 看板的排印基础：稳健的字体栈 */
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  /* 字体栈：苹果系统字体、视窗系统字体、开源字体、兜底无衬线
     顺序即优先级，缺谁补谁，任何设备都不至于落到默认宋体 */

  font-size: 16px;      /* 基准字号：后续尺寸用相对单位换算 */
  line-height: 1.7;     /* 无单位行高：按自身字号倍数计算，继承不串味 */
  color: var(--ink);    /* 取用 3.1 节定义的墨色变量 */
}

h1 { font-size: 1.75rem; }   /* 相对单位：随根字号缩放 */
h2 { font-size: 1.35rem; }
.stat-num { font-size: 2rem; font-weight: 700; }  /* 统计数字：大且粗 */
.stat-label { font-size: 0.85rem; color: #6b7480; } /* 标签：小且灰 */
​

/* 排印的进阶手感：字重、字距与溢出处理 */
.workshop-nav a {
  font-weight: 500;            /* 中黑字重：导航不必全粗 */
  letter-spacing: 0.05em;      /* 字距微松：中文短词更透气 */
}

.order-no {
  font-family: "JetBrains Mono", Consolas, monospace;
  /* 等宽字体栈：工单编号用等宽，对齐悦目 */
  font-variant-numeric: tabular-nums;  /* 表格数字：数字列宽度一致 */
}

.stat-label {
  white-space: nowrap;         /* 标签禁止换行，窄屏也不折成两截 */
  overflow: hidden;
  text-overflow: ellipsis;     /* 实在放不下时省略号收尾 */
}
​

两个代码块合起来是排印的完整日常：基础配方定在整体，局部手感按零件调。其中无单位行高的细节值得强调——写带单位的行高会被子元素原样继承，父级的大字号配上子级继承来的固定行高，文字会被切顶；无单位倍数让每个元素按自己的字号算行高，一劳永逸。

二、颜色的四种写法与透明通道

颜色写法有四代：颜色名好记但只有一百多个；十六进制六位数精确通用，是工程主流；红绿蓝函数直观可算；现代色彩空间函数还支持透明度与更广色域。工程实践的关键不是会写，是管——延续 3.1 节的色板制度，所有颜色入变量，规则里只见名字不见裸值。

/* 看板色板：状态三件套与功能色 */
:root {
  --status-pending: #9aa0a6;    /* 灰：未动工 */
  --status-running: #1a6ec8;    /* 蓝：机器在转 */
  --status-done: #1e8e4e;       /* 绿：完工签收 */
  --danger: #d9534f;            /* 红：延期与报警 */
  --ink: #2c3e50;               /* 正文墨 */
  --ink-soft: #6b7480;          /* 次要文字 */
  --paper: #f5f6f7;             /* 画布底 */
  --card: #ffffff;              /* 卡片底 */
}

.badge-running {
  color: var(--status-running);
  background: rgb(225 240 255 / 40%);
  /* 现代写法：斜杠后是透明度四成——淡蓝底深蓝字，
     状态色一变，淡底自动跟随，不用再配一次浅色 */
}
​

/* 半透明的三种工程用法 */
.overlay {
  background: rgb(0 0 0 / 45%);
  /* 用法一：遮罩层——半透明黑罩住全页，弹窗浮在上面 */
}

.header-band {
  background: linear-gradient(135deg, #1f3a5f, #2c5f8a);
  /* 用法二：渐变页头——两个近色深蓝斜向过渡，比纯色有层次 */
}

.stat-card:hover {
  border-color: rgb(26 110 200 / 35%);
  /* 用法三：悬停反馈——主色低透明度描边，提示可交互 */
}
​

透明度通道的真正价值在"同一色相不同浓度"的层次体系：徽章的淡底、悬停的描边、遮罩的暗面都从状态色派生，改一处主色，全套层次联动更新。这是色板制度从"管颜色"升级到"管色彩关系"的一步。

三、背景三件套：铺色、贴图、刷渐变

背景是装修的墙面工程。纯色打底最快；背景图要处理平铺、定位与尺寸三个参数，大图要压缩；渐变从两色到多彩都能刷，还能配合重复做出条纹、格纹等图案效果——纯代码画的图案不发请求、随色板变色，是看板装饰条的省钱方案。

/* 看板的墙面工程 */
body {
  background: var(--paper);  /* 画布：浅灰底，卡片白底浮起 */
}

.stat-card {
  background: var(--card);
  border-radius: 10px;       /* 圆角卡片：与现代审美对齐 */
  box-shadow: 0 1px 4px rgb(44 62 80 / 8%);
  /* 投影：极淡的墨色阴影，卡片"浮"在画布上 */
}

header {
  color: #fff;
  background:
    linear-gradient(120deg, rgb(31 58 95 / 92%), rgb(44 95 138 / 88%)),
    url("workshop-banner.jpg") center / cover;
  /* 双层背景：底铺车间照片（居中裁满），上罩深蓝半透明渐变
     白字压在任何照片上都能读——图文叠印的标准手法 */
  padding: 24px 32px;
}
​

/* 纯代码图案：工位状态条 */
.progress-stripes {
  height: 8px;
  border-radius: 4px;
  background: repeating-linear-gradient(
    45deg,
    var(--status-running) 0 10px,
    rgb(26 110 200 / 55%) 10px 20px
  );
  /* 斜向重复渐变：蓝深蓝相间的斜条纹
     零图片请求，色板一改条纹跟着改 */
  animation: slide 1s linear infinite;
}

@keyframes slide {
  from { background-position: 0 0; }
  to   { background-position: 28px 0; }
  /* 背景位置平移一个周期：条纹流动，"加工中"的动感隐喻 */
}
​

背景尺寸参数里"铺满裁切"的写法值得单独记：照片按比例放大到盖满容器、超出部分裁掉，配半透明罩层就是稳定的图文叠印版式——单独直接压字，照片一换、亮度一变，白字随时可能读不出来。

四、视觉层次的最后一块：间距与圆角的一致性

涂料刷完，层次感靠一致性收尾。间距用统一的节奏（比如四的倍数：四、八、十六、二十四），圆角全站两档（小控件六、大卡片十），投影两档（静止卡一档、悬浮层一档）。这些"不成文的规定"写进变量，任何人在任何位置装修都取用同一套数值——页面自然和谐，这是最便宜的高级感。

:root {
  --space-1: 4px;  --space-2: 8px;
  --space-3: 16px; --space-4: 24px;
  --radius-s: 6px; --radius-l: 10px;
}

.order-table th, .order-table td {
  padding: var(--space-2) var(--space-3);  /* 表格内距取节奏值 */
}
.stat-card { border-radius: var(--radius-l); }
.badge { border-radius: var(--radius-s); }
​

⚠️ 常见坑：正文字号用绝对像素锁死、颜色用裸值散落各处。前者剥夺了用户在浏览器里放大文字的权利（老年车间主任第一个不答应），后者让换主题变成全文件搜替换马拉松。字号走相对单位、颜色入变量，两件小事做完，可维护性上一个台阶。

💡 关键直觉：判断一块文字可读性的土办法是"眯眼测试"——眯起眼看页面，还分得清标题与正文的层次、找得到统计数字吗？分不清就是层次不足，回排印三参数与色彩关系里找原因。

本节要点回顾

• 排印三参数：稳健字体栈、相对单位字号、无单位行高，中文行高一点五到一点八倍；
• 色彩管理：四种写法够用就好，工程关键是入变量、管色彩关系而非管单个颜色；
• 透明通道：同色相派生淡底描边遮罩，改主色全套联动；
• 图文叠印：照片铺满裁切加深色半透明罩层，白字永远可读；
• 代码图案：重复渐变画条纹格纹，零请求随色板变色；
• 一致性节奏：间距走倍数、圆角投影分档，变量化后全站和谐。

墙面完成，下一节开动两台重型机械：Flex 与 Grid，把看板的骨架真正立体起来。