troytt
/
diablo2-web
1
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

[UI/字体] 英文版界面全面接入暗黑2原版 Exocet（O带十字）与 Formal 436 字体 #504

New Issue
Open
opened 2026-09-28 01:27:10 +00:00 by troytt · 0 comments
troytt commented 2026-09-28 01:27:10 +00:00
Owner
Copy Link

背景与问题描述 (Background & Problem Statement)

暗黑破坏神 II（Diablo II v1.13c）原版英文界面之所以极具哥特与神秘主义辨识度，核心在于使用了两款标志性字体：

  1. Exocet（Jonathan Barnbrook / Emigre 设计）：
    • 最具代表性的特征是字母 O 中间带有十字（\oplus，源自古希腊 Theta \Theta 早期石刻铭文）、字母 T 呈正十字架（+）、字母 Q 源自古希腊 Qoppa。
    • 在原版 MPQ data\local\font\latin\ 中对应 font8、font16、font24、font30、font42、fontexocet8、fontexocet10 等，用于主标题、UI 按钮、角色属性/技能树/任务面板标题、区域进入横幅（“Entering ...”）、地面掉落物品标签、装备名称与词缀标题等。
  2. Formal 436（Bitstream 发行，常见字库 FRML436N.TTF）：
    • 在原版 MPQ data\local\font\latin\ 中对应 fontformal10、fontformal11、fontformal12，用于 NPC 对话长文本滚动字幕、任务日志正文、聊天框与密集说明文本。

当前项目现状

  • Canvas 渲染 (src/ui/font.ts)：虽然 public/ui/fonts/ 下已由 scripts/pack-ui-assets.ts 从 MPQ 提取了 font6.png、font8.png、font16.png、font30.png、fontexocet10.png、fontformal12.png 及 metrics.json，且 D2FontRenderer 实现了 getTintedAtlas()，但 D2FontRenderer.drawText()（第 259–280 行）目前并未真正使用 DC6 图集逐字形（glyph）绘制，也未加载本地 Exocet / Formal 436 字体文件，而是退化为系统默认衬线字体栈（"Cinzel", "Times New Roman", "Liberation Serif", ...）调用 ctx.fillText()，导致英文字符缺失原版 O 带十字（\oplus）等标志性字形。
  • DOM / CSS 界面 (acts.html 及未来的英文版入口与首页 #503)：当前全局 CSS 使用 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace，未引入本地缓存的 Exocet 与 Formal 436 Web 字体（@font-face）。

核心需求与设计方案 (Requirements & Proposed Design)

1. 本地内置 Exocet 与 Formal 436 Web 字体资源（遵循本地资源缓存规范）

  • 在 public/ui/fonts/ 下内置本地 Web 字体文件（.woff2 / .ttf，严禁使用外部 CDN 外链）：
    • Exocet（Light / Heavy，确保包含带十字的 O / o 字形与十字 T 字形）；
    • Formal 436（Regular，对应 FRML436N）。
  • 在全局/页面样式与 FontFace API 中注册 @font-face：
    • 'D2Exocet' -> 用于英文版标题、按钮、横幅、物品名与 HUD 核心标签；
    • 'D2Formal436' -> 用于英文版 NPC 对话框（#dialog）、任务日志长文、详细说明与顶栏辅助文本。

2. Canvas 字体引擎 (src/ui/font.ts) 英文原版渲染对齐

  • 1.13c DC6 位图字形真实绘制 & WebFont 双重保障：
    • 当渲染纯英文/ASCII 文本（或处于英文版界面）且 D2FontRenderer 图集已加载时，支持按 metrics.json（Woo!\x01 .tbl 度量表）与 getTintedAtlas(font, color) 逐字形精确 Blit 原版 DC6 位图字体（font6, font8, font16, font30, fontexocet10, fontformal12），100% 还原原版像素级带十字 O 与 12 色控制码（ÿc0..ÿc;）；
    • 同时将 Canvas ctx.font 的回退字体栈升级为：
      • 标题/Exocet 族（font16, font30, fontexocet10, font8, font6）："D2Exocet", "Exocet", ...
      • 正文/Formal 族（fontformal12）："D2Formal436", "Formal 436", ...

3. 英文界面（配合 #503 双语体系）全场景覆盖

  • 首页 (index.html) 与英文版 acts 页面：
    • 英文入口按钮、标题、顶栏控件标签使用 Exocet / Formal 436；
  • 游戏内 HUD 与面板 (hud-manager.ts, character-sheet.ts, skill-tree-panel.ts, world-panels.ts, inventory.ts, ground-labels.ts, transition.ts)：
    • 区域进入横幅（如 Entering Rogue Encampment、Blood Moor）、面板大标题（Character、Inventory、Skill Tree、Quests、Waypoints、Private Stash、Horadric Cube）、地面掉落标签、装备 Tooltip 名称与 NPC 头顶菜单使用 Exocet（font16 / font30 / fontexocet10 / font8）；
    • NPC 对话长文本、任务描述正文使用 Formal 436（fontformal12）。

验收标准 (Acceptance Criteria)

  • public/ui/fonts/ 包含本地打包的 Exocet 与 Formal 436 字体资源及原版 DC6 字体图集，无任何外部 CDN 依赖。
  • 英文界面下的 Canvas HUD 文本与 DOM UI 文本均正确呈现 Exocet（字母 O 中间带十字 \oplus）与 Formal 436 字体特征。
  • src/ui/font.ts 的 D2FontRenderer 在英文文本渲染时真实生效（支持原版 DC6 位图字形与 D2Exocet / D2Formal436 字体栈），12 种暗黑颜色码（ÿc0..ÿc;）着色准确。
  • 自动化测试与无头浏览器截图验证通过。
## 背景与问题描述 (Background & Problem Statement) 暗黑破坏神 II（Diablo II v1.13c）原版英文界面之所以极具哥特与神秘主义辨识度，核心在于使用了两款标志性字体： 1. **Exocet**（Jonathan Barnbrook / Emigre 设计）： - 最具代表性的特征是字母 **`O` 中间带有十字（$\oplus$，源自古希腊 Theta $\Theta$ 早期石刻铭文）**、字母 **`T` 呈正十字架（`+`）**、字母 **`Q` 源自古希腊 Qoppa**。 - 在原版 MPQ `data\local\font\latin\` 中对应 `font8`、`font16`、`font24`、`font30`、`font42`、`fontexocet8`、`fontexocet10` 等，用于主标题、UI 按钮、角色属性/技能树/任务面板标题、区域进入横幅（*“Entering ...”*）、地面掉落物品标签、装备名称与词缀标题等。 2. **Formal 436**（Bitstream 发行，常见字库 `FRML436N.TTF`）： - 在原版 MPQ `data\local\font\latin\` 中对应 `fontformal10`、`fontformal11`、`fontformal12`，用于 NPC 对话长文本滚动字幕、任务日志正文、聊天框与密集说明文本。 ### 当前项目现状 - **Canvas 渲染 (`src/ui/font.ts`)**：虽然 `public/ui/fonts/` 下已由 `scripts/pack-ui-assets.ts` 从 MPQ 提取了 `font6.png`、`font8.png`、`font16.png`、`font30.png`、`fontexocet10.png`、`fontformal12.png` 及 `metrics.json`，且 `D2FontRenderer` 实现了 `getTintedAtlas()`，但 `D2FontRenderer.drawText()`（第 259–280 行）目前**并未真正使用 DC6 图集逐字形（glyph）绘制，也未加载本地 Exocet / Formal 436 字体文件**，而是退化为系统默认衬线字体栈（`"Cinzel", "Times New Roman", "Liberation Serif", ...`）调用 `ctx.fillText()`，导致英文字符缺失原版 `O` 带十字（$\oplus$）等标志性字形。 - **DOM / CSS 界面 (`acts.html` 及未来的英文版入口与首页 #503)**：当前全局 CSS 使用 `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`，未引入本地缓存的 `Exocet` 与 `Formal 436` Web 字体（`@font-face`）。 --- ## 核心需求与设计方案 (Requirements & Proposed Design) ### 1. 本地内置 Exocet 与 Formal 436 Web 字体资源（遵循本地资源缓存规范） - 在 `public/ui/fonts/` 下内置本地 Web 字体文件（`.woff2` / `.ttf`，严禁使用外部 CDN 外链）： - `Exocet`（Light / Heavy，确保包含带十字的 `O` / `o` 字形与十字 `T` 字形）； - `Formal 436`（Regular，对应 `FRML436N`）。 - 在全局/页面样式与 FontFace API 中注册 `@font-face`： - `'D2Exocet'` -> 用于英文版标题、按钮、横幅、物品名与 HUD 核心标签； - `'D2Formal436'` -> 用于英文版 NPC 对话框（`#dialog`）、任务日志长文、详细说明与顶栏辅助文本。 ### 2. Canvas 字体引擎 (`src/ui/font.ts`) 英文原版渲染对齐 - **1.13c DC6 位图字形真实绘制 & WebFont 双重保障**： - 当渲染纯英文/ASCII 文本（或处于英文版界面）且 `D2FontRenderer` 图集已加载时，支持按 `metrics.json`（`Woo!\x01` `.tbl` 度量表）与 `getTintedAtlas(font, color)` 逐字形精确 Blit 原版 DC6 位图字体（`font6`, `font8`, `font16`, `font30`, `fontexocet10`, `fontformal12`），100% 还原原版像素级带十字 `O` 与 12 色控制码（`ÿc0`..`ÿc;`）； - 同时将 Canvas `ctx.font` 的回退字体栈升级为： - 标题/Exocet 族（`font16`, `font30`, `fontexocet10`, `font8`, `font6`）：`"D2Exocet", "Exocet", ...` - 正文/Formal 族（`fontformal12`）：`"D2Formal436", "Formal 436", ...` ### 3. 英文界面（配合 #503 双语体系）全场景覆盖 - **首页 (`index.html`) 与英文版 `acts` 页面**： - 英文入口按钮、标题、顶栏控件标签使用 `Exocet` / `Formal 436`； - **游戏内 HUD 与面板 (`hud-manager.ts`, `character-sheet.ts`, `skill-tree-panel.ts`, `world-panels.ts`, `inventory.ts`, `ground-labels.ts`, `transition.ts`)**： - 区域进入横幅（如 `Entering Rogue Encampment`、`Blood Moor`）、面板大标题（`Character`、`Inventory`、`Skill Tree`、`Quests`、`Waypoints`、`Private Stash`、`Horadric Cube`）、地面掉落标签、装备 Tooltip 名称与 NPC 头顶菜单使用 **Exocet**（`font16` / `font30` / `fontexocet10` / `font8`）； - NPC 对话长文本、任务描述正文使用 **Formal 436**（`fontformal12`）。 --- ## 验收标准 (Acceptance Criteria) - [ ] `public/ui/fonts/` 包含本地打包的 `Exocet` 与 `Formal 436` 字体资源及原版 DC6 字体图集，无任何外部 CDN 依赖。 - [ ] 英文界面下的 Canvas HUD 文本与 DOM UI 文本均正确呈现 **Exocet**（字母 `O` 中间带十字 $\oplus$）与 **Formal 436** 字体特征。 - [ ] `src/ui/font.ts` 的 `D2FontRenderer` 在英文文本渲染时真实生效（支持原版 DC6 位图字形与 `D2Exocet` / `D2Formal436` 字体栈），12 种暗黑颜色码（`ÿc0`..`ÿc;`）着色准确。 - [ ] 自动化测试与无头浏览器截图验证通过。
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
main
feat/automap-113c
Labels
Clear labels
No items
No Label
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: troytt/diablo2-web#504
No description provided.
Delete Branch "%!s(<nil>)"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?