57 lines
6.2 KiB
Markdown
57 lines
6.2 KiB
Markdown
# 字体分包与开场声音（GitHub #6、#7）
|
||
|
||
## 范围与选择
|
||
|
||
用户于 2026-09-10 批准采用第三方 MiSans 分包，并授权修复后回复、关闭两个 issue。保留原生实现和既有视觉方向。
|
||
|
||
对比 npm `[email protected]`（dsrkafuu）和 `[email protected]`（mobeicanyue），使用开场中英文、40 份档案的全部文字、四个字重，以及 Chromium canvas 与页面截图进行检查。源码和分包使用 npm 固定归档，未执行上游脚本。
|
||
|
||
| 四字重合计 | 原整包 | misans | misans-webfont |
|
||
| --- | ---: | ---: | ---: |
|
||
| 全部字体字节 | 19,744,460 | 8,141,984 | 24,461,284 |
|
||
| 同一组开场字符命中分包字节 | 19,744,460 | 1,013,060 | 972,988 |
|
||
| 全档案字符命中分包字节 | 19,744,460 | 2,168,004 | 3,278,460 |
|
||
|
||
这里的“同一组字符”是向每个字重都请求相同文本的对照，不是实际页面流量。两包的 CSS 字符范围均覆盖测试语料。
|
||
|
||
选择 `misans-webfont`：开场对照稍小，CFF 轮廓渲染更接近现有官方 WOFF2；`misans` 的完整包更小，但其 TrueType 轮廓在逐字栅格对照中变化较多。两包均基于字体 4.003，现有官方文件为 4.009，因此不声称字形逐像素相同。字重固定映射到原来的 300/400/600/700，不使用上游多字体家族/统一 400 的默认 CSS，也不让设备本地字体覆盖固定版本。
|
||
|
||
字体分片原字节保存在 `public/fonts/misans-webfont-4.3.1`；`source.json` 记录归档完整性及每片 SHA-256。上游说明、原 CSS 与字体许可保留。`scripts/vendor-fonts.mjs` 可以从校验后的 npm 归档复现，生成 `src/fonts.css`；没有现场转换、重新切字或变更字体轮廓。
|
||
|
||
## 实际加载与布局
|
||
|
||
同一 Chrome、1920×1080、禁用 Service Worker 干预的冷页面测试：
|
||
|
||
- 原页面进入前下载四个字体，共 **19,744,460 字节 / 18.83 MiB**。
|
||
- 新页面进入前下载 20 个分片，共 **424,676 字节 / 414.72 KiB**，字体字节减少 **97.85%**。
|
||
- 这是字体下载量变化，不是所有网络、设备上的端到端时间承诺。入口也会等待既有主模型载入和必要字体；音乐下载与准备画面并行。
|
||
- 两包字体版本带来少量拉丁字距差别。固定品牌第一行字距调整为 2.324px，中间行 0.587px，三行测量宽度恢复为 **269.78125 / 269.625 / 270px**，与基线一致；字号、字重、行高、起点和 ANALYSIS 的独立字母定位继续沿用。
|
||
- 1920×1080 的档案正文宽高仍为 636×660px，未出现横向溢出。按需字体载入完成后，正文解密遮罩重新测量，保留解密进度。
|
||
|
||
模型源文件与 Blender 导出路径保留。Vite 构建为生产模型生成基于 SHA-256 的 URL；版本化字体与模型配置一年 immutable 缓存。模型实际加载仍保持同源，PWA 使用同一版本资源。
|
||
|
||
完整离线缓存仍包含所有字符分包，避免离线打开新档案或检索时缺字；当前完整安装约 **33.7 MiB / 817 个文件**，比此前约 28 MiB 增大。安装在用户进入、声音准备完成后开始，最多六个并发下载；全部成功后才成为完整版本。任一资源失败时等待其余下载结束后删除不完整缓存，保留旧版本。固定版本字体/模型可复用 HTTP 缓存，HTML 与非版本化资源仍验证更新。
|
||
|
||
## 开场启动
|
||
|
||
- 启用音效或音乐时，入口停在等待画面。点击或触摸画面、用按钮按 Enter/Space 才开始；等待时间不计入动画，起点仍为原片 6.76 秒。
|
||
- 提前下载音乐原始字节；在真实用户操作中创建或 resume AudioContext，等解码和必要音轨准备完成，再开始动画。进入事件不会穿透为跳过动画或打开档案。
|
||
- 重复点击不重复启动。声音下载失败、浏览器拒绝或等待超时，保留入口并显示重试；可选择“关闭声音并进入”，关闭并保存音效和音乐偏好。取消后迟到的音频不会自行播放。
|
||
- 已关闭两项声音的用户自动进入；减少动态效果仍遵循既有偏好，启用声音时点击后直接进入档案。原片定格/场景对照参数绕过入口，不改变时间码。
|
||
- 入口使用实际视口并隔离背景焦点，移动端不把按钮缩进 1920×1080 舞台。退出后恢复可见入口按钮的焦点。
|
||
|
||
## 检查与复现
|
||
|
||
使用本机 Playwright 路径设置 `PLAYWRIGHT_MODULE`。`npm run build` 生成生产构建；`npm run preview -- --port 5190` 供页面检查。
|
||
|
||
- `scripts/compare-font-packages.mjs`：拆包对照、字重、字符覆盖、canvas 字宽/像素差与截图。准备 `.tools/font-comparison/{dsrkafuu,mobeicanyue}/package`；原字体可从先前生产构建或 Git 的 e313777 提取，使用 `BASELINE_FONT_DIR` 指向它。
|
||
- `scripts/check-font-loading.mjs`：旧/新生产构建的字体实际下载量、三行品牌宽度、详情正文尺寸与截图。通过 `BASELINE_DIST` 指定旧构建。
|
||
- `scripts/check-startup-entry.mjs`：桌面、触摸、键盘、减少动态效果、静音、失败后重试、连续输入、取消后迟到音频、原片定格参数。
|
||
- `scripts/check-startup-motion.mjs`：系统偏好、本站覆盖、重播与正文解密。
|
||
- `scripts/check-pwa.mjs`：完整安装、离线读取、显式更新、收藏/偏好保留与更新失败。
|
||
- `scripts/check-font-update.mjs`：由旧整包字体 PWA 更新到分包版本，删除旧整包缓存；离线点击启动三轨音乐并打开、拆解模型。
|
||
|
||
最终独立生产构建的 TypeScript/Vite 构建通过。Chrome 152 与 Edge 152 均通过上述全部入口用例（包括仅音效、仅音乐），Chrome 的系统偏好/重播检查通过。PWA 完整安装、离线、失败回退及从 e313777 整包字体版本迁移到本版的检查通过，无页面未捕获异常。旧缓存更新后，已验证断网进入三轨配乐、详情及模型拆解。档案内容 18 项检查与视口计算检查通过。
|
||
|
||
Windows Playwright WebKit 26.5 验证竖屏入口与声音解码失败后的继续路径；该环境缺少本项目所需的音频解码能力，不能代表 iPhone/Safari 实机音频验证。页面截图、下载字节与逐项报告输出在本地 `.tools/issues`，独立发布检查输出在 `.tools/issues-release/.tools/issues`。
|