Android版Chrome中SVG内font-family失效，桌面端及Safari正常

我开发的Web应用包含一段SVG代码，通过Google Fonts API导入'Amaranth'字体后，在桌面Safari、移动端Safari及桌面Chrome中均能正常渲染，但Android版Chrome里字体无法显示。SVG代码如下：

<svg id="Layer_1" data-name="Layer 1" viewBox="0 150 2000 625" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      .cls-1 {
        fill: #7f7f7f;
      }

      .cls-2 {
        fill: rgb(241,190,146);
      }
    </style>
    <style>@import url(https://fonts.googleapis.com/css2?family=Amaranth%3Aital%2Cwght%400%2C400%3B0%2C700%3B1%2C400%3B1%2C700&amp;amp;display=swap);</style>
  </defs>
  <g>
    <path class="cls-1" d="m291,314.46s-.06,0-.08.01c.05,0,.08-.01.08-.01Z"/>
    <path class="cls-1" d="m1881.33,583.44h0"/>
  </g>
  <path class="cls-2" d="m1894.1,622.76c38.79-22.52,73.54-46.38,70.95-74.78-1.44-15.79-11.79-25.22-25.01-27.93-.92-.19-1.82-.34-2.71-.47-13.42-1.86-23.58,3.61-30.45,13.24-3.75-10.67-11.74-19.2-24.43-20.95-1.2-.17-2.45-.27-3.73-.31-14.82-.47-26.59,6.24-31.8,18.68-10.68,25.5,13.92,60.21,47.17,92.51Z"/>

  <text font-family='Amaranth' font-size='375px' font-weight='400' font-style='normal' white-space='pre' x="446.55" y="630.407" origin="0.510464 -0.373636">Patients</text>
</svg>

解决方法 #

1. 合并样式并明确指定text元素字体 #

Android Chrome对SVG内部分散的<style>标签解析可能存在优先级或加载顺序问题，把@import和样式规则合并到同一个<style>标签，并明确给text元素指定字体：

修改后的<defs>部分：

<defs>
  <style>
    .cls-1 {
      fill: #7f7f7f;
    }

    .cls-2 {
      fill: rgb(241,190,146);
    }

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

    text {
      font-family: 'Amaranth', sans-serif;
    }
  </style>
</defs>

2. 外部HTML加载字体（推荐方案） #

如果SVG是嵌入在HTML页面中使用，直接在HTML的<head>中加载Google Fonts，而非在SVG内部@import，这样Android Chrome能更稳定地识别已加载的字体资源：

在HTML的<head>添加：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&display=swap">

SVG中的text元素保持font-family='Amaranth'即可。

3. 内嵌字体到SVG（彻底解决兼容性） #

如果需要SVG独立运行（不依赖外部HTML），可以将字体文件转换为Base64编码后内嵌到SVG中，完全消除外部资源依赖：

• 下载Amaranth字体的TTF文件
• 用Base64编码工具转换字体文件
• 在SVG的<defs>中添加@font-face规则：

@font-face {
  font-family: 'Amaranth';
  src: url(data:font/truetype;base64,[替换为你的字体Base64编码]) format('truetype');
  font-weight: 400;
  font-style: normal;
}

这样所有浏览器都能直接读取内嵌的字体数据，不会出现加载失败的问题。

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