SVG中嵌入的Hind-Light字体在浏览器中显示异常求助

1. 修复@font-face的语法错误与字体资源完整性 #

从提供的代码片段看，@font-face定义存在两个关键问题：

• src属性的URL声明末尾误用逗号，语法错误，需改为分号；
• 嵌入的woff2字体base64内容被截断（仅d09GMgABA开头），字体文件不完整导致浏览器无法解析加载。

修正后的@font-face示例：

@font-face {
    font-family: 'Hind-Light';
    src: url('data:font/woff2;charset=utf-8;base64,完整的Hind-Light字体base64编码') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

注意：需替换为完整的Hind-Light字体woff2格式base64编码，确保字体资源完整可用。

2. 确保SVG文本元素明确指定字体 #

检查SVG中的<text>标签，必须显式设置font-family为'Hind-Light'，避免浏览器自动 fallback 到系统字体。示例：

<text x="10" y="25" font-family="Hind-Light" font-size="16">目标文本内容</text>

3. 隔离SVG与网页的字体作用域 #

由于网页也使用Hind-Light字体，可能存在优先级冲突。可给SVG内部的字体定义添加唯一标识，比如修改font-family名称为'SVG-Hind-Light'，同时对应调整文本元素的font-family属性，避免和网页字体混淆：

@font-face {
    font-family: 'SVG-Hind-Light';
    src: url('data:font/woff2;charset=utf-8;base64,完整编码') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

<text font-family="SVG-Hind-Light">隔离后的文本内容</text>

4. 验证字体加载与样式应用 #

通过浏览器开发者工具：

• 在「网络」面板检查SVG内部的字体资源是否成功加载；
• 在「元素」面板查看文本元素的计算样式，确认font-family是否正确应用，未被网页样式覆盖。

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