SVG Font

最初的矢量字体格式——将 SVG 路径映射到字体字形的人类可读 XML 格式。

什么是 SVG Font？

SVG 字体是 W3C 发布的 SVG 1.1 规范的一部分。与传统的二进制字体格式不同，SVG 字体将字形轮廓作为 SVG 路径数据嵌入 <font> 元素中。每个字形由一个 <glyph> 元素表示，其 d属性包含描述形状的矢量路径。

本质上，SVG 字体是以字体形式封装的 SVG 图形。你在 SVG 文件中用于绘制形状的路径语法，同样被用来定义字母轮廓和图标轮廓。这使得它们具有独特的可读性——你可以用任何文本编辑器打开 SVG 字体，直接读取每个字形的实际几何数据。

工作原理

SVG 字体文件将字形路径封装在标准 XML 结构中。以下是一个简化示例：

<font id="MyIcons">
  <font-face font-family="MyIcons" units-per-em="1024"/>
  <glyph glyph-name="home" unicode="&#xE001;"
         d="M512 0L0 448h128v576h256V640h256v384h256V448h128z"/>
  <glyph glyph-name="search" unicode="&#xE002;"
         d="M..."/>
</font>

<font-face> 元素声明字族名称和坐标系（units-per-em）。每个 <glyph> 将一个 Unicode 码位映射到一个矢量路径。d 属性使用与普通 SVG <path> 元素完全相同的路径语法。

这是 Bobcorn 管道中的中间格式。各个 SVG 图标首先被组装成这种 SVG 字体结构，然后转换为二进制格式：SVG Font → TTF → WOFF / WOFF2 / EOT。

优缺点

浏览器支持

SVG 字体支持已被大多数主流浏览器移除。Chrome 在第 38 版（2014 年）放弃了 SVG 字体支持，Firefox 从未实现，基于 Chromium 的 Edge 也不支持。目前唯一仍在渲染 SVG 字体的是 Safari 和 iOS Safari。

对于实际的网页应用，SVG 字体本质上已是遗留格式。永远不要将其作为面向用户的交付格式。请使用 WOFF2。

何时使用 SVG Font

• 调试字体生成问题——由于是纯 XML，可以直接读取路径数据，与原始 SVG 图标对比以诊断问题。
• 作为构建管道中的源格式——许多字体生成工具（包括 Bobcorn）在转换为二进制格式之前，将 SVG 字体用作中间表示。
• 旧版 iOS < 5 支持——如今极为罕见，但早于 WOFF 支持的旧版 iOS 设备只能使用 SVG 字体作为网页字体。