如何在Ionic/Angular构建产物的SVG中显示Gill Sans字体？

开发者阿泽

2026-8-15

问题：SVG中Gill Sans字体在Ionic构建后不显示，开发阶段正常

我正在为公司开发一款WebApp，使用了包含Gill Sans字体的SVG格式Logo。开发阶段字体显示正常，但生成构建产物后，该字体回退为默认字体。SVG文件的style属性中已设置font-family为'GillSans'。请问我遗漏了什么操作？是否需要导入该字体？如果需要，该如何操作？

显示效果对比

构建后错误显示：
开发服务中正常显示：

SVG文件源码

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1.28782,0,0,1.28782,-25.1285,-31.1994)">
        <g transform="matrix(1,0,0,1,-138.262,-23.116)">
            <circle cx="551.555" cy="418.307" r="312.421" style="fill:white;"/>
        </g>
        <g transform="matrix(1.20107,0,0,1.21628,-10.9294,89.9381)">
            <clipPath id="_clip1">
                <rect x="32.794" y="272.932" width="649.427" height="326.98"/>
            </clipPath>
            <g clip-path="url(#_clip1)">
                <circle cx="357.507" cy="275.198" r="324.713" style="fill:rgb(252,191,42);"/>
            </g>
        </g>
        <g transform="matrix(1.01638,0,0,1.01638,-216.129,36.5656)">
            <path d="M623.119,-12.14C839.07,-12.14 1014.39,163.185 1014.39,379.136C1014.39,595.088 839.07,770.413 623.119,770.413C407.168,770.413 231.843,595.088 231.843,379.136C231.843,163.185 407.168,-12.14 623.119,-12.14ZM623.119,85.679C785.082,85.679 916.576,217.173 916.576,379.136C916.576,541.1 785.082,672.594 623.119,672.594C461.155,672.594 329.662,541.1 329.662,379.136C329.662,217.173 461.155,85.679 623.119,85.679Z" style="fill:rgb(78,76,80);"/>
        </g>
        <g transform="matrix(1,0,0,1,-94.8002,-90.0861)">
            <g transform="matrix(144.372,0,0,144.51,-22834,-22477.1)">
                <text x="159.734px" y="159.799px" style="font-family:'GillSans', 'Gill Sans', sans-serif;font-size:2.095px;fill:rgb(78,76,80);">SAM</text>
            </g>
            <g transform="matrix(-5.58319,-2.15552e-15,9.79022e-16,-4.13153,4511.24,2729.5)">
                <path d="M685.093,530.291L689.57,538.113L680.615,538.113L685.093,530.291Z" style="fill:rgb(78,76,80);"/>
            </g>
        </g>
    </g>
</svg>

解答

问题原因

开发阶段你的本地系统安装了Gill Sans字体，浏览器可以直接调用本地字体渲染SVG文本；但构建部署后，用户的浏览器/设备不一定有这款字体，所以会回退到默认sans-serif字体。你需要在WebApp中主动引入该字体资源，确保所有环境都能加载到它。

解决步骤

1. 获取字体文件

首先确认你有Gill Sans字体的商用授权（这款字体是付费字体，注意合规），然后获取对应的字体文件，通常需要包含以下格式以兼容不同浏览器：

.woff2（优先推荐，体积小加载快）
.woff
.ttf

2. 放入项目资源目录

将字体文件放到Ionic项目的src/assets/fonts目录下（如果没有该目录就新建一个）。

3. 全局引入字体

在项目的全局样式文件（比如src/global.scss）中添加@font-face规则：

@font-face {
  font-family: 'GillSans';
  src: url('../assets/fonts/GillSans.woff2') format('woff2'),
       url('../assets/fonts/GillSans.woff') format('woff'),
       url('../assets/fonts/GillSans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; // 提升加载体验，避免FOIT
}

注意替换文件名和路径为你实际的字体文件信息。

4. 验证SVG的font-family设置

你的SVG中已经设置了font-family:'GillSans', 'Gill Sans', sans-serif，这个设置没问题，确保和@font-face中的font-family名称完全一致（注意大小写，比如你用的是'GillSans'，就不要写成'Gill Sans'）。

5. 重新构建项目

执行ionic build重新生成构建产物，此时字体资源会被打包到产物中，浏览器能正确加载并渲染SVG文本。

额外建议

如果不想处理字体授权和加载问题，也可以将SVG中的文本转换为路径（path）——用SVG编辑工具（比如Illustrator、Figma）打开SVG，将文本对象转曲为路径，这样SVG就不再依赖外部字体，任何环境下都能正确显示样式。这种方法更稳定，适合Logo这类不需要编辑的文本元素。

内容的提问来源于stack exchange，提问作者scjminova

如何在Ionic/Angular构建产物的SVG中显示Gill Sans字体？

显示效果对比 #

SVG文件源码 #

问题原因 #

解决步骤 #