当前位置：首页 > 文章列表 > 文章 > 前端 > SVG字体显示问题解决方法

SVG字体显示问题解决方法

2025-09-24 17:27:33 0浏览收藏

还在为SVG字体显示异常而烦恼吗？本文为你提供一份全面的**SVG字体显示问题解决指南**，助你轻松应对各种浏览器和环境下的字体显示难题。我们将深入探讨SVG字体未嵌入导致的显示问题，并详细介绍三种有效解决方案：**将文字转换为路径、嵌入字体**（包括使用`@font-face`和在线工具transfonter）以及**使用Webfont**（如Google Fonts）。此外，本文还针对Illustrator导出SVG时常见的**文字间距问题**，提供了实用技巧。无论你是前端开发新手还是经验丰富的工程师，都能从中找到解决SVG字体问题的有效方法，确保你的SVG图片完美呈现！

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

本文旨在帮助开发者解决在使用CSS样式化SVG图片时遇到的字体显示问题。主要探讨了SVG字体未嵌入导致的显示异常，以及如何通过将文字转换为路径、嵌入字体或使用Webfont等方法来确保SVG在各种浏览器和环境中正确显示。同时，也讨论了Illustrator导出SVG时可能出现的文字间距问题，并提供了相应的解决方案。 ### SVG字体未嵌入问题在使用SVG图片时，如果SVG中使用了本地安装的字体，而用户设备上没有安装该字体，就会导致字体显示异常。此外，Firefox浏览器出于安全策略，通常会拒绝使用本地字体文件。 **解决方法：** 1. **将文字转换为路径：** 在Illustrator等矢量图形编辑软件中，将SVG中的文字转换为路径（轮廓）。这样，文字就变成了图形，不再依赖字体文件。 * 在Illustrator中，选择所有元素（CTRL+a），然后使用CTRL+shift+O快捷键将文字转换为轮廓。 2. **嵌入字体：** 使用`@font-face`规则将字体嵌入到SVG文件中。可以使用在线工具如[transfonter](https://transfonter.org)来生成`@font-face`代码。 ```css @font-face { font-family: 'YourFontName'; src: url('data:application/font-woff;charset=utf-8;base64,...') format('woff'); /* 替换为你的字体base64编码 */ } .svg-text { font-family: 'YourFontName', sans-serif; }

使用Webfont： 使用在线字体服务（如Google Fonts）提供的Webfont。

首先，在HTML文件中引入Webfont：

<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700" rel="stylesheet">

然后，在SVG的style标签中使用Webfont：

<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>
  </svg>

使用开源字体： 考虑使用开源字体，如SIL OFL v1.1许可的"D-Din"，可以从font squirrel下载。

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

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

<!DOCTYPE html>
<html>
<head>
  <title>SVG Font Embedding Example</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700" rel="stylesheet">
  <style>
    img,
    svg{
      height:200px
    }
  </style>
</head>
<body>
  <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">

  <p>Inline SVG - using Webfont (Roboto)</p>
  <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>
    <path id="wreath" d="M2.4 88.7c0-0.3 8.9 0.8 20.8 12.8a58.6 58.6 0 0 1-4.3-8.9c-13.4-3.7-15.9-9.4-19-19.5c1.3 2.6 10.3 4.8 12.7 9c1.8 3.3 3.8 6.4 5.5 8a51.4 51.4 0 0 1-1.9-8.3c-0.1-0.5-0.1-0.9-0.2-1.3c-4.4-2.2-14.6-9.4-15.3-23.2c2 2.9 9.3 2.6 14.9 18.5a82.9 82.9 0 0 1 0.2-9.3c-4.3-3.5-12.5-13.9-11-35c1.7 3.3 10.4 14.3 10.8 21.9a60.7 60.7 0 0 0 0.8 7.3c0.1-0.6 0.1-1.1 0.2-1.7a67.3 67.3 0 0 1 1.6-8.2a26.1 26.1 0 0 0-4.7-10.9a9.8 9.8 0 0 1-1.1-11c1.2-2.6 0.6-8.5 0.6-8.5s8.2 8.2 6.1 27.4a61.7 61.7 0 0 1 2.7-6.9a15.3 15.3 0 0 0-1.3-8.7c-2.2-4.7-4.8-12 1.3-22.9c0.1 4.3 3.8 11.4 3.4 16.9a76.8 76.8 0 0 1-1.8 11.5a57.8 57.8 0 0 1 3.7-6c0.3-2.9-1.1-7-0.9-14.2c0.2-8.7 4-10.5 4.9-15.2c3.4 9 1.5 19.4-1.2 25.6l0.8-1c0.9-1.2 1.8-2.3 2.6-3.4a35.1 35.1 0 0 1 3.7-15.4c1.7-3 6.8-5.5 6.9-8c1.3 9.3-3.2 15.6-7.3 20.2l0 0.1a14.6 14.6 0 0 1 16-2.8s-5.3 4.9-9.7 5.3c-4.2 0.3-6.3 0-8.6 1.4c-0.7 1-1.6 2.1-2.5 3.2c5.7-3.1 14.2-0.1 17.5 2c-4.8 3.8-9.6 2.9-12.3 1.1c-2.4-1.6-5.2-0.1-6.9-0.9a70.2 70.2 0 0 0-4.4 6.3a61.2 61.2 0 0 0-3.7 7.8c3.1-4.4 8.5-9.7 15.3-9.9c-0.2 2.8-3.3 8.2-7.7 10.7c-3.6 2-7.3 2.9-9.4 4.7a65.1 65.1 0 0 0-2 10v0.1c4-10.1 15.2-14.7 18.2-14.9c0 0-5 3.6-5.3 8.3s-4.8 7.2-8.8 8.5a8.8 8.8 0 0 0-4.7 4.1a77.5 77.5 0 0 0 0 12.9c1.3-19.3 14.5-19.3 14.5-19.3a7.8 7.8 0 0 0-2.4 5c-0.4 3.4-1.2 6.1-5.3 10.6a21 21 0 0 0-5.5 11.3a54 54 0 0 0 5.8 13.9c-2.4-6-3.9-14.4-0.8-21.7c0.5 4.2 6.8 10.4 6.8 15.6c0 4.5-1.8 10.4-0.3 14.2c0.8 0.9 1.6 1.9 2.5 2.8c-0.4-2.7-0.1-6.7-0.7-9.5c1.5 2.2 2.4 8.2 3.4 12.3a71 71 0 0 0 6 5.1c-5.1-6-7.7-15.7-6.6-24.8c3.7 3.6 8.7 11.1 8.9 16.9a28.1 28.1 0 0 0 3.7 11.9l1.1 0.6c1.1 0.6 2.3 1.2 3.4 1.7c-5.6-5-7-14.1-7-18.1c6.3 4.4 13 14.6 13.8 20.6c1.2 0.3 2.4 0.6 3.6 0.9c4.8 0.9 10.2 1 14.5-1.3l0.3 0.5h0l0.3 0.5l0.5 1c-5.1 2.6-10.9 2.5-16 1.5a47.4 47.4 0 0 1-5.5-1.5c-2.3 3.8-8.5 7.2-12.4 6.8s-8.2-2.4-10.9-1.5c3.6-6 9.8-7.7 13.9-6.3c3.6 1.2 6.1 1.6 8 0.5a56.2 56.2 0 0 1-7.5-3.4l-1-0.5c-4.9 3-11.2 2.5-15.3 1.1c-4.6-1.5-6.3-6.1-10.1-8.1c9.6-2.5 14.8 0.9 17 3a9.8 9.8 0 0 0 6.5 2.9a66.4 66.4 0 0 1-10.3-7.9c-2.7-0.1-8.3 1.7-12.4-1.7c4-1.3 7.1-1.7 9.8-0.9c-0.9-0.9-1.7-1.8-2.5-2.8c-3.1 0.1-8.7 2-13-0.4a70.7 70.7 0 0 1-10.9-8.1s7.3-0.3 11.2 0.7c-3.6-2-14.3-13.4-14.3-13.7z" />
    <use href="#wreath" style="transform: translate(100%,0) scale(-1, 1);" />
    </use>
    <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>
  </svg>
</body>
</html>

Illustrator导出的SVG文字间距问题

Illustrator在导出SVG时，可能会将文本元素分割成多个或元素，这通常是由于自定义的间距或字距调整值造成的。

<text class="cls-1" transform="translate(133.05 117.67)">2018</text>
<text class="cls-2" transform="translate(143.07 61.95)">1<tspan class="cls-3" x="19.99" y="0">S</tspan>
<tspan x="39.83" y="0">T</tspan>
</text><text class="cls-4" transform="translate(57.23 179.3)">SUMO CHAL<tspan class="cls-5" x="147.92" y="0">L</tspan>
<tspan x="162.25" y="0">ANGE</tspan>
</text>

解决方法：

简化SVG结构，将文本合并到一个元素中，并使用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>

注意： 这种方法可能只适用于特定字体。