SVG文件中嵌入字体及Google Web Fonts无法渲染，文本空白求助

我来帮你解决SVG里嵌入字体和Google Web Fonts不生效、文本显示空白的问题，结合你给出的代码片段，常见的问题点和修复方法如下：

1. 先确认Google Fonts的引入是否正确 #

你代码里的@import url("...")是占位符，实际必须替换成完整有效的Google Fonts链接，比如：

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

要注意：

• URL拼写不能出错，尤其是字体名称和参数部分
• 确保使用HTTPS协议（部分环境下HTTP请求会被浏览器拦截）

2. 确保字体在文本元素中被正确引用 #

不管是Google Fonts还是自定义嵌入字体，都需要在<text>元素里明确指定font-family，比如：

<text x="10" y="50" font-family="Roboto, sans-serif" font-size="20">测试文本</text>

如果是自定义嵌入字体，要在<defs>里用<font-face>完整定义：

<defs>
  <style>
    @font-face {
      font-family: 'MyCustomFont';
      src: url('data:font/truetype;base64,这里替换成你的字体base64编码') format('truetype');
      /* 或者用本地相对路径：src: url('./my-font.ttf') format('truetype'); */
    }
  </style>
</defs>

这里要注意：base64编码必须完整有效，本地字体路径要和SVG文件的位置对应。

3. 排查跨域或环境加载限制 #

有些浏览器、SVG查看器对外部资源加载有严格限制：

• 如果SVG是独立文件打开，或者嵌入在不同域名的页面中，Google Fonts的请求可能被CORS策略阻止。解决方法：把Google Fonts的CSS下载到本地，和SVG放在同一目录后用相对路径引入；或者把字体转成base64直接嵌入SVG，彻底摆脱外部依赖。
• 如果你是在Angular环境（代码里有ng-show）使用SVG，要确保样式能穿透到SVG内部元素，比如用全局样式或者::ng-deep（如果是Angular版本支持的话）来指定font-family。

4. 排除文本“视觉空白”的假象 #

有时候文本不是没渲染，而是样式导致看不见：

• 检查<text>的fill颜色是否和背景色一致，临时改成fill="red"测试
• 确认没有设置opacity="0"、display="none"或者visibility="hidden"这类属性

5. 兼容性优化 #

部分旧浏览器对SVG内的@import支持不佳，你可以尝试：

• 如果SVG是嵌入在HTML页面中，把Google Fonts的引入移到HTML的<head>里，而不是SVG内部
• 直接把字体的CSS规则写在SVG的<style>标签内，避免使用@import

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