SVG遮罩定义中Google Font无法加载的问题求助

这个问题我之前也碰到过，Chrome里SVG遮罩内的外部字体加载确实有个小坑——不是不允许在定义中引用外部字体，而是浏览器的字体加载优先级和遮罩的渲染时机配合出了问题：当SVG解析到<mask>里的文本时，外部字体可能还在加载中，而遮罩属于早期渲染层，浏览器会直接 fallback 到默认字体；之后字体加载完成，普通<text>元素会自动触发重绘，但遮罩内的内容不会，所以就出现了内外文本字体不一致的情况。

下面给你几个可行的解决方法：

方法1：内联字体（最可靠，适合静态Logo） #

把外部字体转换成base64编码，直接内嵌到SVG的<style>中，这样SVG加载时字体已经存在，完全避免了加载延迟的问题。

修改后的示例代码：

<svg version="1.1" baseProfile="full" width="256" height="256" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css">
      @font-face {
        font-family: 'Dancing Script';
        font-style: normal;
        font-weight: 400;
        src: url(data:font/truetype;base64,[替换为Dancing Script的base64编码]) format('truetype');
      }
    </style>
    <mask id="mask">
      <rect x="0" y="0" width="256" height="256" stroke-width="0" fill="white" />
      <text font-size="128" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="black" style="font-family: 'Dancing Script';">T</text>
    </mask>
  </defs>
  <circle cx="128" cy="128" r="128" stroke-width="0" fill="red" mask="url(#mask)" />
  <text font-size="128" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="black" style="font-family: 'Dancing Script';">T</text>
</svg>

你可以从Google Fonts下载Dancing Script字体文件，用在线base64转换工具处理后，替换掉代码中的[替换为Dancing Script的base64编码]部分即可。

方法2：用JS强制触发重绘 #

如果需要保留外部字体引用，可以监听字体加载完成事件，然后强制浏览器重新渲染遮罩内容。

修改后的代码示例：

<svg version="1.1" baseProfile="full" width="256" height="256" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css">
      @import url('https://fonts.googleapis.com/css?family=Dancing+Script:400&display=swap');
    </style>
    <mask id="mask">
      <rect x="0" y="0" width="256" height="256" stroke-width="0" fill="white" />
      <text id="mask-text" font-size="128" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="black" style="font-family: 'Dancing Script';">T</text>
    </mask>
  </defs>
  <circle cx="128" cy="128" r="128" stroke-width="0" fill="red" mask="url(#mask)" />
  <text font-size="128" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="black" style="font-family: 'Dancing Script';">T</text>
  <script type="text/javascript">
    // 监听所有字体加载完成
    document.fonts.ready.then(function() {
      // 通过修改属性触发遮罩重绘
      const maskText = document.getElementById('mask-text');
      maskText.style.opacity = '0.99';
      setTimeout(() => maskText.style.opacity = '1', 0);
    });
  </script>
</svg>

这里给@import加上了display=swap，让字体加载时先显示 fallback 字体，加载完成后自动替换；再通过JS修改遮罩文本的透明度，强制浏览器重新渲染遮罩内容。

方法3：将文本转换为路径（静态场景） #

如果你的Logo是静态、不需要编辑文本的，可以把遮罩里的文本转换成<path>元素。大部分SVG编辑器（比如Illustrator、Inkscape）都支持「文本转曲」功能，转曲后就完全不需要依赖外部字体了，兼容性拉满。

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