SVG 字体
在 SVG 规范制定时，浏览器对 Web 字体的支持并不普遍。然而，为了正确渲染文本，访问正确的字体文件至关重要，因此 SVG 中添加了一种字体描述技术来提供此功能。它并非旨在与其他格式（如 PostScript 或 OTF）兼容，而是作为一种简单的方式，在渲染时将字形信息嵌入 SVG 中。
注意： SVG 字体目前仅在 Safari 和 Android 浏览器中受支持。
此功能已从 Chrome 38（以及 Opera 25）中删除，Firefox 也无限期推迟了实现，转而集中精力于 WOFF。但是，其他工具（如 Batik 和 Inkscape 的部分功能）支持 SVG 字体嵌入。
定义 SVG 字体的基础是 <font> 元素。
定义字体
在 SVG 中嵌入字体需要一些要素。让我们展示一个示例声明（来自规范），并解释详细信息。
<font id="Font1" horiz-adv-x="1000">
<font-face
font-family="Super Sans"
font-weight="bold"
font-style="normal"
units-per-em="1000"
cap-height="600"
x-height="400"
ascent="700"
descent="300"
alphabetic="0"
mathematical="350"
ideographic="400"
hanging="500">
<font-face-src>
<font-face-name name="Super Sans Bold" />
</font-face-src>
</font-face>
<missing-glyph><path d="M0,0h200v200h-200z" /></missing-glyph>
<!-- Outline of exclamation point glyph -->
<glyph unicode="!" horiz-adv-x="300"></glyph>
<glyph unicode="@"><!-- Outline of @ glyph --></glyph>
<!-- more glyphs -->
</font>
我们从 <font> 元素开始。它带有一个 id 属性，以便通过 URI（见下文）进行引用。horiz-adv-x 属性决定字符的平均宽度与单个字形的路径定义相比如何。值 1000 设置了一个合理的参考值。还有其他一些辅助属性有助于进一步定义基本的字形框布局。
<font-face> 元素是 CSS @font-face 声明的 SVG 等效项。它定义了最终字体的基本属性，例如粗细、样式等。在上面的示例中，首先也是最重要的要定义的是 font-family，它的值可以在 CSS 和 SVG font-family 属性中引用。font-weight 和 font-style 属性与 CSS 中的等效描述符具有相同的用途。所有后续属性都是针对字体布局引擎的渲染指令；例如，字形总高度的多少是 升部。
它的子元素 <font-face-src> 元素对应于 CSS 中 @font-face 声明中的 src 描述符。您可以通过它的子元素 <font-face-name> 和 <font-face-uri> 指向外部字体声明的来源。上面的示例说明，如果渲染器找到了名为“Super Sans Bold”的本地字体，则应该使用它。
<font-face-src> 元素之后是一个 <missing-glyph> 元素。它定义了在字体中找不到特定字形且没有回退机制时应该显示的内容。它还展示了如何创建字形：通过在其中添加任何图形 SVG 内容。您可以在此处使用任何其他 SVG 元素，甚至包括 <filter>、<a> 或 <script>。但是，对于简单的字形，您可以添加 d 属性——它与标准 SVG 路径的工作方式相同，定义了字形的形状。
实际的字形由 <glyph> 元素定义。最重要的属性是 unicode。它定义了此字形所代表的 Unicode 码点。如果您还为字形指定了 lang 属性，则可以进一步将其限制为特定语言（由目标上的 xml:lang 表示）。同样，您可以使用任意 SVG 来定义字形，从而为支持的用户代理提供强大的效果。
可以在 font 中定义另外两个元素：<hkern> 和 <vkern>。它们都包含对至少两个字符的引用（属性 u1 和 u2）以及一个属性 k，该属性决定应该减少这两个字符之间距离多少。下面的示例指示用户代理将“A”和“V”字符的间距比字符之间的标准间距更近。
<hkern u1="A" u2="V" k="20" />
引用字体
当您按照上面描述的步骤将字体声明组合在一起后，您可以使用简单的 font-family 属性将字体实际应用于一些 SVG 文本。
<font>
<font-face font-family="Super Sans" />
<!-- and so on -->
</font>
<text font-family="Super Sans">My text uses Super Sans</text>
但是，您可以自由地组合多种方法，以获得更大的字体定义自由度。
选项：使用 CSS @font-face
您可以使用 @font-face 来引用远程（以及非远程）字体。
<font id="Super_Sans">
<!-- and so on -->
</font>
<style>
@font-face {
font-family: "Super Sans";
src: url(#Super_Sans);
}
</style>
<text font-family="Super Sans">My text uses Super Sans</text>