上传字体：用 JS 读出它的全部设计信息

本系列前面拨的每一个开关，都来自字体文件内部的表（table）。这一页把文件本身交给浏览器：在本地上传一份字体，用 FontFace 把它即时应用到一段可编辑文字（拖可变轴 / 拨 OpenType feature），再用纯 JS 解析它的 SFNT 二进制结构——family / 版权 / 厂商、字重字宽、PANOSE 设计分类、em-square 与各条度量线、可变轴 fvar、GSUB / GPOS 里注册的全部 feature tag、以及 cmap 覆盖了哪些 Unicode 区段。全程不上传服务器，解析在你的浏览器里完成。

支持 .ttf / .otf / .woff 的完整解析（.woff 的 zlib 压缩用 DecompressionStream 解开）；.woff2 因用 Brotli 压缩、浏览器未暴露对应解压 API，预览仍可用（交给 FontFace 自行解码），但表级元数据解析会跳过——想读它的设计信息请先转成 woff / ttf。

1 · 报告读出的信息从哪来

FontFace(name, arrayBuffer) 把上传的字节直接注册成一个可用 family，等价于运行时动态写入一条 @font-face 规则，无需服务器参与。右侧报告则由纯 JS 逐张解析 SFNT 容器里的表：name 表出 family / 版权 / 厂商，OS/2 表出字重字宽与 PANOSE 设计分类，head / hhea / post 出各条度量线，fvar 出可变轴，GSUB / GPOS 出 feature tag，cmap 出字符覆盖。

度量值的单位是 font design unit（em-square = units-per-em）；渲染时整张 em-square 缩放到 font-size。这正是 字体度量：为什么 100px 不是 100px 一页拆解的来源。报告里 GSUB / GPOS 列出的 4 字符 feature tag，就是本系列各页拨的开关在字体内部的真身，能在上方预览里点亮试效果；详见 OpenType 原始开关：font-feature-settings。

2 · 相关链接

• FontFace · MDN——developer.mozilla.org。用 JS 构造字体：new FontFace(family, ArrayBuffer | url) + document.fonts.add()，等价于运行时动态注册一条 @font-face。
• OpenType font file (SFNT) — Microsoft——learn.microsoft.com。本页解析依据：SFNT 容器结构、table directory，以及 head / OS/2 / name / cmap / fvar / GSUB 各表的字段布局。
• OS/2 and Windows Metrics Table——learn.microsoft.com。usWeightClass / usWidthClass / PANOSE / fsSelection / ulUnicodeRange 全在这张表里——字重、字宽、serif-vs-sans 设计分类的数据源。
• PANOSE classification——monotype.github.io。10 位数字编码字体的视觉特征（family type / serif style / proportion …）；本页据它判定 Serif / Sans / Script / Monospace。
• DecompressionStream · MDN——developer.mozilla.org。浏览器内置的 deflate / gzip 解压流，本页用它解开 WOFF 每张表的 zlib 压缩；但不含 Brotli，故 WOFF2 表数据无法直接读。