svg字体已退出主流，现代方案是路径化、web字体+内联svg或字体子集预处理，三者规避字体依赖链断裂问题，确保文字不丢失或变方块。
SVG矢量字体本身已基本退出主流 Web 实践，现代浏览器不再支持 <font></font> 或 SVG font（<defs><font></font></defs>）格式的渲染。当前所谓“SVG 字体嵌入”，实际是指：将文字转为路径（path）、或使用 Web 字体（WOFF/WOFF2）配合 SVG 容器显示、或在 SVG 中引用外部字体资源——三者逻辑不同，适用场景各异。
SVG 中文字为何会“丢失”或“变方块”
根本原因在于字体依赖链断裂。SVG 文件若含原始文本（<text></text>），其渲染完全依赖用户设备是否安装对应字体；一旦缺失，浏览器按 fallback 机制降级（如显示系统默认无衬线体），甚至出现乱码或空白。这不是 SVG 本身缺陷，而是文本渲染机制决定的。
- 本地打开正常但网页中异常 → 多因服务器未正确配置字体 MIME 类型（如 WOFF 应返回
font/woff2） - drawio / Inkscape 导出后文字不可编辑 → 默认勾选了“将文本转为路径”，本质是用贝塞尔曲线替代字符，彻底丢弃 Unicode 编码
- PDF 或 WeasyPrint 输出缺字 → 渲染引擎未嵌入字体子集，或未指定
@font-face规则
真正可行的三种嵌入方案
不靠 SVG font 格式，而靠组合技术实现“字体可控”：
-
路径化（Text-to-Path）：用设计工具（Figma、Illustrator）或脚本（如 Python + svgwrite）将文字转为
<path d="..."></path>。优点是 100% 保形、零字体依赖；缺点是无法选中、复制、SEO 不友好、文件体积增大 -
Web 字体 + 内联 SVG：在 HTML 页面中通过
@font-face加载 WOFF2，再于<svg></svg>内使用<text></text>并指定font-family。需确保字体允许跨域加载且 license 允许 Web 使用 -
字体子集 + SVG 导出预处理：对 IBM Plex、Inter 等开源字体，用
pyftsubset提取所需字符生成精简 WOFF2，再与 SVG 同步部署。WeasyPrint 和 Canvas 渲染 PDF/SVG 时可绑定该字体文件路径
关键细节：如何让 <text></text> 在 SVG 中真正“自带字体”
没有“自带”的魔法，只有显式控制：
- 避免用
img src="icon.svg"加载含文本的 SVG —— 此方式隔离 DOM，CSS 和字体规则全部失效 - 改用内联 SVG（
<svg>...</svg>直接写进 HTML），或<object></object>并设置type="image/svg+xml"，才能继承页面样式和字体声明 - 若必须外链 SVG，可在 SVG 文件顶部手动添加
<style>@import url("fonts/inter.woff2");</style>（仅部分浏览器支持，兼容性差，不推荐） - 对于服务端生成（如 WeasyPrint），在 CSS 中写明
@font-face并指向绝对路径或 base64 编码字体数据，才是可靠做法
替代思路：为什么现在更推荐“SVG 图标 + 外部文本”
多数场景下，把图标和文字分离反而更健壮：
- SVG 只负责图形（Logo、装饰线条、状态图标），纯矢量无字体风险
- 文字用标准 HTML
<p></p>或<span></span>，由 CSS 统一控制字体、字号、行高、颜色 - 需要对齐时，用 Flex/Grid 布局 +
vertical-align或transform微调，比在 SVG 里手动计算x/y更可持续
