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

字体嵌入问题

文本间距问题

完整示例

首页

web前端

html教程

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

Barbara Streisand

Sep 09, 2025 pm 10:00 PM

水平滚动 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>

注意事项：

在将文字转换为轮廓后，文本将不再是可编辑的。
嵌入字体会增加 SVG 文件的大小。
确保使用的字体具有合适的许可，允许嵌入到 Web 页面中。

总结：

通过将文字转换为轮廓、嵌入字体或简化 SVG 结构，可以有效地解决水平滚动 SVG banner 中的字体和间距问题，确保在不同浏览器和设备上获得一致的显示效果。在实际开发中，应根据具体情况选择合适的解决方案。

以上是水平滚动 SVG Banner 的字体和间距问题解决方案的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

PHP教程

1679

276

NYT连接提示和答案

332

836

显示更多

Related knowledge

CSS技巧：精确隐藏特定文本内容而不影响父元素 Sep 16, 2025 pm 10:54 PM

本教程详细介绍了如何使用CSS精确隐藏HTML页面中的特定文本内容，避免因不当选择器导致整个父元素被隐藏的问题。通过为目标文本的包裹元素添加专属CSS类，并利用display: none;属性，开发者可以实现对页面元素的精细化控制，确保只隐藏所需部分，从而优化页面布局和用户体验。

如何在HTML中创建与电子邮件地址的超链接？ Sep 16, 2025 am 02:24 AM

usemailto：inhreftCreateeMaillinks.startwithforbasiclinks，add？object = and＆body = forpre-flycontent，andIncludeMultipleDresseSorcc =，bcc = foradvancedOptions。

如何在HTML中制作图像周围的文本包裹？ Sep 21, 2025 am 04:02 AM

usecssfloatpropertytowraptextaroundanimage：floatleftfortextextontheright，floatrightfortextontheleft，addmarginforspacing，and clearFloatFloatStopReventLayOutissues。

如何在HTML中添加悬停的工具提示？ Sep 18, 2025 am 01:16 AM

UsethetitleattributeforsimpletooltipsorCSSforcustom-styledones.1.Addtitle="text"toanyelementfordefaulttooltips.2.Forstyledtooltips,wraptheelementinacontainer,use.tooltipand.tooltiptextclasseswithCSSpositioning,pseudo-elements,andvisibilityc

如何在html中设置lang属性 Sep 21, 2025 am 02:34 AM

setThelangattributeInthehtmltagtagtagtospecifepageLanguage，例如forenglish; 2.使用“ es” es“ es” forspanishor“ fr” forfrench; 3. IncludereVariantswariantswariantswithCountryCountryCodeslike“ en-us” en-us“ en-us”或“ zh-cn”;

JavaScript外部函数调用疑难解析：脚本位置与命名规范 Sep 20, 2025 pm 10:09 PM

本文探讨了在HTML中调用外部JavaScript函数时常见的两个问题：脚本加载时机不当导致DOM元素未就绪，以及函数命名可能与浏览器内置事件或关键字冲突。文章提供了详细的解决方案，包括调整脚本引用位置和遵循良好的函数命名规范，以确保JavaScript代码能够正确执行。

捕获含跨域iframe的父元素mousedown事件：原理与限制 Sep 20, 2025 pm 11:00 PM

本文探讨了在包含跨域iframe的父div上捕获mousedown事件的挑战。核心问题在于浏览器安全策略（同源策略）阻止了对跨域iframe内容的直接DOM事件监听。除非控制iframe源域名并配置CORS，否则无法实现此类事件捕获。文章将详细解释这些安全机制及其对事件交互的限制，并提供可能的替代方案。

HTML中的数字和图形元素是什么？ Sep 13, 2025 am 03:44 AM

figurelementgroupsself contentainedmedialikeimagesorcharts，而figcaptionProvidesanoptionalCaption; theyimproveAccessibility and semantics and theyimprovidesibalics andsemantics，AsshowninalabeLabeLedSalesCharteSchartexample。

See all articles

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

字体嵌入问题

文本间距问题

完整示例

热AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

ArtGPT

Stock Market GPT

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题