HTML5中SVG定义自定义字体样式及字间距控制
作者：袖梨
2026-07-23
SVG不支持原生@font-face和letter-spacing，但可通过外部Web字体+CSS font-family与现代letter-spacing属性实现自定义字体及字间距控制。
SVG 本身不支持定义“字体样式”（如 CSS 中的 @font-face）或直接设置字间距（letter-spacing），它依赖外部字体资源和有限的文本排版属性。但你可以通过组合 SVG 文本属性、CSS 样式及字体嵌入方式，实现类似自定义字体与精确字间距控制的效果。
使用外部 Web 字体 + SVG <text> 元素
SVG 可以继承 HTML 或内联 CSS 中加载的 Web 字体。只要字体已通过 @font-face 声明并可用，SVG 的 <text> 就能使用它：
- 在 HTML
<head>或 SVG 外部样式表中定义@font-face，指向 .woff/.woff2 等字体文件 - 为 SVG
<text>设置font-family，确保字体名与@font-face中的font-family一致 - SVG 内可内联 style：
<text style="font-family: 'MyCustomFont'; font-size: 16px;">Hello</text>
用 letter-spacing 控制字间距（需注意兼容性）
SVG 2 规范支持 CSS letter-spacing 属性，现代浏览器（Chrome/Firefox/Safari 15.4+）基本可用：
- 推荐写法：在
<text>上用内联 style 或 class 设置letter-spacing: 2px或letter-spacing: 0.1em - 避免用 SVG 1.1 的
textLength或lengthAdjust模拟字距——它们拉伸的是整体文本长度，不是等比例分发字间距 - 若需兼容旧版 Safari（<tspan> 手动偏移每个字符：
<tspan dx="0">H</tspan><tspan dx="8">e</tspan><tspan dx="8">l</tspan>…
嵌入字体子集（WOFF2 + Base64）实现真正“自定义字体”
若需确保字体随 SVG 一起分发（如导出为独立文件），可将精简后的字体 Base64 编码嵌入 SVG 的 <style> 中：
立即学习“前端免费学习笔记（深入）”；
- 用工具（如 Google Webfonts Helper 或
pyftsubset）生成仅含所需字符的 WOFF2 子集 - 转为 Base64 字符串，写入 SVG 的
<style type="text/css">内：@font-face { font-family: 'MyIconFont'; src: url(data:font/woff2;base64,d09...); } - 再在
<text>中调用该字体名即可，完全脱离外部依赖
kerning 和 font-feature-settings 的补充说明
SVG 支持部分高级排版控制，但支持度有限：
-
kerning="auto"属性可启用字体自带的字偶距（kerning），但需字体本身包含 kern 表，且浏览器支持（Chrome/Firefox 较好，Safari 部分失效） -
font-feature-settings（如"kern", "liga"）在 SVG 中可通过 CSS 启用，但仅对支持 OpenType 特性的字体生效，且需显式声明font-variant-ligatures等配套属性 - 实际项目中，更稳妥的做法是预先在设计工具中调整好字距，导出为路径（
<path>），彻底绕过文本渲染差异
