当前位置：首页 > 文章列表 > 文章 > 前端 > 水平滚动SVG文字间距优化技巧

水平滚动SVG文字间距优化技巧

2025-09-16 16:26:12 0浏览收藏

本文针对使用CSS创建水平滚动SVG Banner时，字体显示和间距不一致的问题，提供了一系列优化方案。主要探讨了SVG字体嵌入的三种方法：将文字转换为路径、使用@font-face嵌入字体以及引入Webfont，旨在解决字体在不同浏览器中的兼容性问题。同时，文章还分析了Illustrator导出SVG时可能导致的文本间距问题，并提出简化SVG结构、合理使用text-anchor和dominant-baseline属性的优化策略。通过这些方法，开发者可以有效解决水平滚动SVG Banner中的字体和间距问题，确保在各种设备和浏览器上呈现出一致且美观的显示效果，提升用户体验。了解更多关于SVG Banner字体优化的技巧，请阅读全文。

水平滚动 SVG Banner 的字体和间距问题解决方案

本文针对在 CSS 中使用 SVG 图片创建水平滚动 banner 时遇到的字体显示和间距问题，提供了详细的解决方案。主要包括 SVG 字体嵌入、字体替代方案、以及 Illustrator 导出的 SVG 代码优化，旨在帮助开发者解决 SVG 在不同浏览器和环境下的兼容性问题，确保 banner 效果的正确呈现。

在使用 CSS 创建水平滚动 SVG banner 时，开发者可能会遇到一些字体和间距问题，导致在不同浏览器或设备上显示效果不一致。这通常与 SVG 字体处理方式以及 Illustrator 等矢量图形软件的导出设置有关。以下是一些常见的解决方案：

字体嵌入问题

SVG 图片中使用的字体如果没有正确嵌入，用户设备上又没有安装该字体，浏览器会使用默认字体替代，导致显示效果与设计不符。此外，Firefox 等浏览器出于安全考虑，可能拒绝使用本地字体文件。

解决方案：

将文字转换为轮廓 (路径): 这是最直接的解决方案。在 Illustrator 中，选中所有文本元素 (Ctrl+A)，然后使用 Ctrl+Shift+O 将文字转换为路径。这样做会将文字转换为矢量图形，不再依赖字体文件。

使用 @font-face 嵌入字体: 使用 @font-face 规则可以将字体文件嵌入到 CSS 中。可以使用工具如 transfonter 将字体文件转换为 data URL 格式，然后嵌入到 CSS 中。

@font-face {
  font-family: 'YourFontName';
  src: url('data:application/font-woff;charset=utf-8;base64,...') format('woff'); /* 替换为你的 data URL */
  font-weight: normal;
  font-style: normal;
}

.your-svg-text {
  font-family: 'YourFontName', sans-serif;
}

使用 Webfont： 可以直接在 HTML 中引入 Webfont，然后在 SVG 代码中引用该 Webfont。

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

使用开源字体: 考虑使用 SIL OFL 许可的开源字体，例如 "D-Din"，可以在 font squirrel 上找到。

文本间距问题

Illustrator 在导出 SVG 时，可能会将文本元素分割成多个或元素，特别是当文本包含自定义间距或字距调整时。这会导致在不同浏览器中显示效果不一致。

解决方案：

简化 SVG 结构: 尽量简化 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>

完整示例

以下示例展示了嵌入字体和未嵌入字体的 SVG 图片的对比，以及使用 Webfont 的内联 SVG 代码：

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

注意事项：