水平滚动 SVG Banner 的字体和间距问题解决方案-html教程-PHP中文网

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

DDD

发布： 2025-09-09 22:06:01

原创

735人浏览过

水平滚动 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 上找到。

千面视频动捕
千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

27

查看详情

文本间距问题

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

解决方案：

简化 SVG 结构: 尽量简化 SVG 中的文本结构，避免使用过多的 <tspan> 元素。可以尝试使用 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>

登录后复制

注意事项：