解决CSS中SVG图片字体显示问题的实用指南-html教程-PHP中文网

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

DDD

发布： 2025-09-09 21:21:24

原创

925人浏览过

解决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图片在显示上的差异。

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

Font embedded

@@##@@

Font not embedded (fallback font is used)

Musho

AI网页设计Figma插件

查看详情

@@##@@

Inline SVG - using Webfont (Roboto)

登录后复制

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>

登录后复制

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