解决 CSS 中 SVG 图片字体显示问题的实用指南

本文旨在帮助开发者解决在使用 CSS 和 SVG 图片时遇到的字体显示问题。我们将探讨字体未正确嵌入 SVG 导致的显示异常，并提供多种解决方案，包括将文本转换为路径、嵌入字体以及优化 SVG 结构，确保 SVG 图片在各种浏览器中都能呈现出一致且美观的效果。
### 字体嵌入问题
在使用 SVG 图片时，一个常见的困扰是字体显示不一致甚至无法显示。这通常是因为 SVG 中使用的字体并未正确嵌入到文件中。当用户没有安装 SVG 中使用的特定字体时，浏览器会尝试使用替代字体，导致显示效果与预期不符。更糟糕的是，某些浏览器（如 Firefox）出于安全考虑，可能会拒绝使用本地字体文件。
### 解决方案
以下是几种解决 SVG 字体显示问题的有效方法：
#### 1. 将文本转换为路径
最直接的方法是将 SVG 中的文本转换为矢量路径。这意味着文本不再依赖于字体文件，而是作为一组形状数据存在。
* **优点：** 确保在任何环境下都能正确显示，无需考虑字体是否存在。
* **缺点：** 文本不再可编辑，文件大小可能会增加。
使用 Illustrator 等矢量图形软件可以轻松完成此操作。选择所有文本元素（<kbd>CTRL</kbd>+<kbd>A</kbd>），然后使用“创建轮廓”功能（<kbd>CTRL</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd>）将文本转换为路径。
#### 2. 嵌入字体
另一种方法是将字体文件直接嵌入到 SVG 文件中。可以使用 `@font-face` 规则和 data URL 实现。
* **优点：** 保持文本的可编辑性。
* **缺点：** 文件大小会显著增加，需要额外的处理步骤。
可以使用类似 [Transfonter](https://transfonter.org/) 这样的在线工具将字体转换为 Base64 编码的 data URL，然后在 SVG 中使用 `@font-face` 规则引用它。
“`html
<style>
@font-face {
font-family: ‘YourFontName’;
src: url(‘data:application/font-woff;charset=utf-8;base64,…’) format(‘woff’);
}
text {
font-family: ‘YourFontName’, sans-serif;
}
</style>

3. 使用 Web Font

如果你的项目已经使用了 web font，可以直接在 svg 中引用它们。

• 优点： 避免重复加载字体文件，保持项目风格一致。
• 缺点： 需要确保 Web Font 已正确加载到页面中。

<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700" rel="stylesheet">
<svg  id="Achievement" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 185">
<defs>
<style>
text {
font-family: 'Roboto Condensed', sans-serif;
font-size: 32px;
font-weight: bold;
}
</style>
</defs>
<text x="50%" y="30%" text-anchor="middle" dominant-baseline="central">2022</text>
<text x="50%" y="90%" text-anchor="middle" dominant-baseline="central">AWARD</text>
</svg>

4. 简化 SVG 结构

Illustrator 等工具在导出 SVG 时，可能会将文本分割成多个 <text> 或 <tspan> 元素，特别是当文本包含自定义间距或字距调整时。这会导致字体显示问题。

• 优点： 提高 SVG 的可维护性和兼容性。
• 缺点： 可能需要手动调整文本布局。

尽量简化 SVG 结构，将文本组合成更少的元素，并使用 CSS 属性（如 text-anchor 和 dominant-baseline）来控制文本的对齐方式。

<text x="50%" y="30%" text-anchor="middle" dominant-baseline="central">
2022<tspan x="50%" data-dx="50%" dy="15%">1ST</tspan>
</text>
<text x="50%" y="90%" text-anchor="middle" dominant-baseline="central">
AWARD
</text>

示例：嵌入字体 vs. 未嵌入字体

以下示例展示了嵌入字体和未嵌入字体在 SVG 显示上的差异。

<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700" rel="stylesheet">
<p>Font embedded</p>
<img src="https://svgshare.com/i/iW8.svg" class="sample-item">
<p>Font not embedded (fallback font is used)</p>
<img src="https://svgshare.com/i/iY4.svg" class="sample-item">

总结

解决 SVG 字体显示问题需要根据具体情况选择合适的方法。将文本转换为路径可以确保在任何环境下都能正确显示，但会牺牲文本的可编辑性。嵌入字体或使用 Web Font 可以保持文本的可编辑性，但会增加文件大小或依赖于外部资源。简化 SVG 结构可以提高 SVG 的可维护性和兼容性。通过综合考虑这些因素，可以有效地解决 SVG 字体显示问题，确保 SVG 图片在各种浏览器中都能呈现出最佳效果。

立即学习“前端免费学习笔记（深入）”；