排版

数值 / 代码

:root {
  --scale: clamp(1, tan(atan2(100vw, 1440px)), 1.45);   /* 视口 ÷ 1440 */
  --fs-title: calc(clamp(26px, 1.4vw + 14px, 34.16px) * var(--scale));
  --fs-h2:    calc(clamp(18px, .8vw + 10px, 21.52px) * var(--scale));
  --fs-body:  calc(clamp(13px, .35vw + 10px, 15px) * var(--scale));
  --fs-13:    calc(clamp(12px, .17vw + 10.4px, 12.848px) * var(--scale));  /* plan 的阶梯 */
}
h1 { font-size: var(--fs-title); font-weight: 700; letter-spacing: -.4px; }

用在哪

四个工具同一组（取自样张shua-glass.html的:root；plan把阶梯扩成--fs-11…--fs-32）。本站的--fs-title是同一条，页大标题就是它；h2、正文本站另配了斜率。等比放大本身（tan(atan2())、兜底探针）放在「布局与自适应」那章。

为什么

上限写1440处的实算值（1.4×14.4＋14＝34.16）：≤1440时--scale恒为1、clamp也没到顶，数值和改版前逐位相同；>1440时clamp已封住，字、卡片、间距只乘同一个--scale，构图不变。样张写的上限36在1440处还没摸到，封在34.16才让1440一个数都不变。

数值 / 代码

body                      { font-weight: 400; }
.btn, .group-title,
.seg [aria-checked="true"] { font-weight: 600; }
h1, h2, b, strong         { font-weight: 700; }   /* b、strong默认是「更粗一档」，要明写 */
/* 不写500：微软雅黑上和400一样；不写650 / 750 / 800：微软雅黑上和700一样，苹方上600以上也一样 */
ctx.font = `400 30px ${stack}`;   /* canvas上画的字同样只许三档，CSS护栏扫不到它 */

用在哪

刷刷改版时把650收成600、750收成700（Windows上看不出变化，Mac上苹方有细微变化）。刷刷后加的「按周回看」写过650，3.14.1改回600（offline 67baa55）。岗岗2026-10-09跟上（de31496）：650→600、800→700，500按角色归——顶部按钮→600，时间轴圆圈里的步骤序号→400。plan 2026-10-10跟上（61282be）：650→600，22处500按角色归——上传框主文字、「加日期」空chip是按钮→600，磁贴名、页眉小字、表单标签、灰标签、计数、名字→400；规则同时写进plan的规格。plan随后又查出台历纸面是canvas现画的字，年份、星期还是500，2026-10-10改成400（11caf94），护栏加扫.ts、.tsx里的.font =。本站star.css里只出现400、600、700三个值，演示里故意画出来的别的字重不算。

为什么

刷刷旧方案用650、750想分出层级，可字体栈首位落到微软雅黑，Windows上只有Light、Regular、Bold，650和750都画成Bold，跟700完全一样——区分只是名义上的。500反过来落成常规，跟400一样：plan原来20处500改成400，屋主的Windows上一处也看不出变化。Mac上也一样：plan做canvas的判据时把台历月份从600改成700，苹方画出来逐像素零差异——苹方没有Bold，600以上都是同一档中粗。

数值 / 代码

:root { --measure: 880px; }                       /* 岗岗；>1440换 calc(880px * var(--scale)) */
.reader { /* 三栏里的中间列：铺满，吸收多出来的宽度 */ }
.document-body p { max-width: var(--measure); }   /* 正文收住，两边是面板本体 */
body { line-height: 1.72; }

用在哪

岗岗的正文段落、定义行、步骤列表、勾选卡、提示块都收在--measure里，搜索结果页是居中的920×scale阅读列。本站页头副标题、条目说明、正文段落收在680×--u。

为什么

「填满」是为了大屏上不留两大块空白（屋主最初的抱怨），不是为了让一行更长。所以填满只给外壳、卡片网格、列表轨道；正文行宽另外收住，大屏上搜索页两侧露出光晕底属预期，不改成铺满。

数值 / 代码

body               { font-size: 15px; }                /* 手机也是15，不降到14 */
.meta, .aux, small { font-size: 13px; }                /* 辅助字地板；>1440乘 --u */
.toc-group summary { font-size: calc(13 * var(--u)); } /* 带计数、能开合的行 */
.side-group        { font-size: 11px; }                /* SPEC：纯标签的分组小标题 */

用在哪

岗岗的手机形态和目录分组标题（13px是SPEC偏离表里登记过的）。刷刷和本站侧栏的分组小标题照SPEC写11px——那几个字只是分组标签，不承载要读的信息。

为什么

11px的中文低于岗岗「辅助字≥13px」的地板；岗岗的分组标题不是纯标签，带着计数、能点开合，是要读、要点的一行。

数值 / 代码

.blobBig {                                  /* Ysevan_web/app/hall.module.css；元素挂font-kai类＝var(--font-kai) */
  font-size: calc(136 * var(--card-px));    /* ≥821px；1440×900下136px */
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: .06em;
  text-indent: .06em;                       /* 补最后一个字后面多出来的那格字距 */
}
@media (max-width: 820px) {
  .blobBig { font-size: clamp(40.25px, 11.5vw, 84px); white-space: nowrap; }   /* 下限2026-10-08从38px提上来 */
}
/* 子集：app/fonts/MaShanZheng-xiaowu.woff2，「小屋工具架随笔本留言板」11字，5564字节，只在门厅、工具、随笔三页preload */
:root { --font-kai: "fontKai", "Kaiti SC", "STKaiti", "KaiTi", serif; }   /* app/globals.css 自写@font-face */

用在哪

门厅「小屋」；工具页、随笔页门面的「工具」「随笔」。「架」「本」「留言板」五个字站上已经没有页面在用（标题改成两个字、留言板撤掉时子集没重裁）。

为什么

楷书只为几个标题服务，裁成子集才五千多字节，首屏巨字可以preload。三张卡一样大靠的就是标题都是两个字：色块fit-content，同一款楷书、同一个字号，算出来自然同宽；三个字会把卡撑宽，调小字号去迁就也不行。text-indent删了，色块看起来会右偏。

数值 / 代码

// Ysevan_web/tailwind.config.ts → theme.extend.fontFamily
sans:  ['"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"Noto Sans CJK SC"', "-apple-system", "BlinkMacSystemFont", "sans-serif"],
serif: ['"Songti SC"', '"STSong"', '"SimSun"', "serif"],        // 不带 "Noto Serif SC"
kai:   ["var(--font-kai)"],                                     // 回退栈只写在globals.css的--font-kai一处
xing:  ['"Xingkai SC"', '"STXingkai"', '"华文行楷"', "var(--font-kai)"],
hand:  ["var(--font-hand)", "cursive"]

用在哪

• 宋体：工具页展台工具名76px、小架工具名46px、规格数字26px（等宽数字）；归档「以前写的」与随笔球标题29px、600、字距.05em；随笔球卡片标题15px、600。
• 楷书：门厅「小屋」、门面「工具」「随笔」，1440下136px。
• 手写：开场「Hey, Ysevan!」，SVG里132px。
• 其余全部黑体，11.5–15px。

为什么

小屋的原则「手作气质，工程克制」：楷书、行楷、宋体只出现在少数标题与数字上，正文一律黑体。工具端不跟——家族契约只统一正文的字体栈，标题字族不要求统一，工具里的标题该用黑体就用黑体。

数值 / 代码

.xw-note-prose {
  text-indent: 2em;               /* 开头空两格：卡片15px → 30px，详情页16px → 32px */
  line-height: 1.8;               /* Word 的「1.5 倍行距」折算到网页约1.8 */
  line-break: strict;             /* 。、，等收尾标点不许在行首 */
  hanging-punctuation: allow-end; /* 只有 Safari 认，忽略了也不影响禁则 */
}
.xw-note-prose + .xw-note-prose { margin-top: .4em; }   /* 段间1.2em : 行间0.8em ＝ 1.5 : 1 */
.xw-note-prose figure { text-indent: 0; }

用在哪

随笔列表卡的每一段（正文按空行切成多个<p>）、详情页markdown的段落。标题、列表、引用、代码、插图都不缩进。

为什么

屋主给的段距是「0，缩进自己分段」，屏幕上0太挤：行距1.8已经把行与行拉开0.8em，段间也只有0.8em的话，缩进就成了唯一的分段信号，扫读时得逐行找缩进。多0.4em让段间:行间＝1.5:1，一眼看得出换段，又远不到「空一行」（1.8em起），仍在屋主给的≤0.5em里。

数值 / 代码

<html lang="zh-CN">
body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
               -apple-system, BlinkMacSystemFont, sans-serif;
}

用在哪

岗岗、plan、card、小屋、本站同一条；plan的token注释写着「改字体要四处一起改」。现状：刷刷是登记过的偏离，系统UI在前——试改成中文在前后，Mac上做题页「↑ ↓ ← →」改由苹方出字、间距不匀，中点「·」也变宽，控制室2026-09-28裁定不改；Windows上前几个字体都取不到、一律微软雅黑，只影响苹果设备。

为什么

苹方缺字时应落到冬青黑、微软雅黑、思源黑，而不是先落到-apple-system这类UI字体，否则同一段中文会混进两套字形；中文界面也不该落到Arial、Helvetica这类西文回退上。lang决定标点与断行的字形（zh-CN和zh-TW的引号形状不同）。

数值 / 代码

Content-Security-Policy: default-src 'self'      # 刷刷 serve.ps1
Content-Security-Policy: font-src 'self' data:   # 小屋postexport.mjs的basePolicy，构建时逐页写进meta

/* 设计稿里的 Google Fonts 外链一律不带进实现 */
font-family: "Songti SC", "STSong", "SimSun", serif;   /* 不带 "Noto Serif SC" */

用在哪

四个工具和小屋都不引网络字体；小屋的设计小样用的是Google Fonts外链，实现时换成自托管的子集。本站零依赖，也不引外部字体。

为什么

刷刷的CSP是default-src 'self'，外部资源被浏览器直接拦截——不是效果差一点，是完全加载不出来。小屋生产是font-src 'self' data:，外链字体一律失败；宋体栈末尾留着"Noto Serif SC"只会让栈变长，还无效。

数值 / 代码

写                                   不写
「Ysevan的小屋」                     「Ysevan 的小屋」
「Excel导出」                        「Excel 导出」
「共12题 · 30分钟」                  「共 12 题 · 30 分钟」
「4475道题」                         「4475 道题」
「见 https://old.ysevan.com 首页」   「见https://old.ysevan.com首页」
「Hey, Ysevan!」                     （纯英文串内部照英文规矩留空格）
「9～12点」                          「9~12点」

用在哪

四个工具和小屋所有看得见的文案：标题、导航、按钮、提示、metadata的title与description；代码注释和文档叙述不管。plan已全改（2026-10-08提交98ac0fb，界面上数字两边原来带空格的文案一并改掉），并加了源码判据app/src/numberSpacing.test.ts：字符串、模板串、JSX文本里「汉字＋空格＋数字」或插值紧挨汉字隔一个空格就红。不归这条管的：「 · 」这类分隔符两边的空格；两个各自完整的词组之间的元素间距（见「坑」）；「标签＋名字」（如无障碍名「删除附件 报表.pdf」）；照搬的原文（题库、员工手册条文、小屋的随笔正文、出处里引的原话）。本站页面文案同样。

为什么

几个工具的用户是同一批同事，界面文案的口音要一致。这条2026-08-26屋主裁定，小屋全站先行，工具端照家族契约对齐。

数值 / 代码

:root {
  --font-num: BlinkMacSystemFont, -apple-system, "Segoe UI", system-ui,
              "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
.count, .timer, .date, td.num, .progress {
  font-family: var(--font-num);          /* 同一条里写：数字交给认 tnum 的系统 UI 字体 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;       /* 兼容不认上一条的旧引擎 */
}
/* 前四个按「谁会先取到」排：Mac 的 Chrome 认 BlinkMacSystemFont，Safari / iOS 认 -apple-system，
   Windows 取到 "Segoe UI"，安卓、Linux 走 system-ui。"SF Pro Text" 实测没用，不放。 */

用在哪

plan先落地，源码护栏是app/src/styles/fontNum.test.ts：写了tabular-nums的规则没指定--font-num就红。本站全站跟上：外壳的计数胶囊、搜索里的标签条数、总览「本书进度」圆环与更新刻度尺、收藏的条数、色彩页的对比度读数、交互页弹窗演示里的大数字，都换成了--font-num；body不再写tabular-nums。刷刷的栈系统UI打头，本来就生效。现状：小屋规格还没跟，随笔日期仍是中文字族打头＋tabular-nums。

为什么

家族契约要等宽数字（「等宽数字是工具感最便宜的来源」），家族字体栈又是中文字族打头。实测苹方在Chrome里写tabular-nums、"tnum" 1都不生效：40px、600下「1111」宽65.6、「0000」宽96.0。Chrome也不认-apple-system和"SF Pro Text"，按名字取不到就退回苹方；BlinkMacSystemFont、system-ui打头时「1111」「0000」「8888」都是102.7。

数值 / 代码

:root {
  /* 改前：Mac 的 Chrome 里一路落到 Courier New */
  /* --mono: ui-monospace, "SF Mono", Consolas, "Courier New", monospace; */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
}
code, pre, kbd { font-family: var(--mono); }

用在哪

本站所有代码块、行内代码、色值都是var(--mono)，改完在Mac的Chrome里由Menlo画。岗岗查出的是同一件事。Safari认ui-monospace，取到的是系统的等宽字；Windows上取到Consolas（未核实）。

为什么

栈里排在前面的名字这台浏览器一个都取不到时，就一路落到最后一款取得到的。老栈里只剩Courier New取得到，代码看着像打字机。Menlo是Mac自带的等宽字，Chrome按名字取得到。

数值 / 代码

// Ysevan_web/components/notes-globe/line-break.ts（节选）
const noLineStart = new Set(Array.from("，。、；：？！）」』》】〉〕〗｝］’”…‥—～·・%,.;:?!)]}"));
const noLineEnd   = new Set(Array.from("（「『《【〈〔〖｛［‘“([{"));
const maxPushBack = 4;                                       // 往回找断点最多退4个单元
const latinRun = /[A-Za-z0-9]+(?:[._\-/]+[A-Za-z0-9]+)*/y;   // 127.0.0.1、util-linux 不拆
// 推不动（一整行几乎都是标点）才让标点挤在上一行末尾；超过 maxLines 截断，末尾换「…」

用在哪

小屋随笔球3D卡面的标题与摘要（各最多三行，末尾「…」）。静态网格那一侧是浏览器自己排的，不走它。本页这块演示用的就是照它改写的同一套规则。

为什么

最早的写法逐字量、放不下就断，于是出现「localh / ost」「Wi / ndows」「util-lin / ux」「300 / 0」，行首还会冒出「，」。2026-09-20屋主看过之后补的这套规则。

数值 / 代码

本周汇总 · 工作库          ← 标题写清数字的边界
6项完成
本周完成6项 · 4天有进展    ← 一个大数 + 一行事实
本周没有完成记录。         ← 一件都没有时

角标：标题命中 → 不出（标题里已经高亮）
      正文命中 → 正文N处
      只命中上级路径 → 不出（写「正文0处」是错话）

用在哪

plan回顾页的汇总格（有测试盯着）、刷刷「按周回看」的汇总格、岗岗搜索联想的角标。

为什么

看汇总的人要的是数字和它的边界，标题写「本周汇总 · 工作库」就够了。「正文0处」是数对、话错：命中的只是上级路径，正文里一处都没有，写出来像是命中了正文。

数值 / 代码

<div class="today-empty">
  <p>今天没有要做的事。</p>
  <button class="text-button" type="button">看看本周的日程 →</button>
</div>
<!-- 筛完没结果：一句话 -->
<p class="list-empty">没有符合的任务。</p>

用在哪

plan今日页、全部任务筛完为空。本站收藏页标签筛空时也是一句话加一个动作：「「全部」里没有带所选标签的收藏：换一个类型，或者点上面的「清除」。」

为什么

plan改版前是框套框三层：面板卡片里套任务卡片，空了再套一个灰色空态框。改版准绳第5条专门写了「空态一句话＋一个动作，不画灰框」。

数值 / 代码

.detail .stage-name, .detail .doc-name, .review .task-name {
  white-space: normal;
  overflow-wrap: anywhere;        /* 允许折行；不写 nowrap + text-overflow: ellipsis */
}
.task-row .title {                /* 清单行：故意单行省略 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

用在哪

plan详情对话框里的标题、chip、材料名与来源·截止、阶段名与起止·状态、提醒、附件名、通知原文、历史、toast、菜单项；回顾页日格里的任务名（这一页和列表页的规矩相反，别顺手加省略号）。

为什么

2026-09-23屋主在2552宽的笔记本上看详情第三栏：栏太窄，阶段名、材料名被截成「发通知并收…」「检查材料并…」，主区却空着一大片。于是否掉第三栏、改居中大对话框（见交互页「详情对话框」），名字完整显示成了验收硬指标。