React使用save-svg-to-png转PNG时自定义Roboto字体失效如何解决

问题核心原因 #

你之前的尝试失效本质是对fonts参数的字段含义理解有误，官方参数定义如下：

fonts - 由{text, url, format}对象组成的列表，用于指定要内联到SVG中的字体，省略该选项时默认自动检测字体规则。

• 传入Google Fonts的CSS链接无效：url字段要求指向实际的字体二进制文件（.woff2/.woff/.ttf等），而非CSS样式表地址
• 若Base64传入后仍失效，大概率是text或format字段和字体属性不匹配

正确配置步骤 #

1. 预处理Roboto粗体文件 #

将你用到的Roboto 700粗体字体文件转为Base64编码，生成data:格式URI，避免跨域问题。

2. 完整代码示例 #

import { saveSvgAsPng } from 'save-svg-as-png';

// 替换为你自己生成的Roboto Bold woff2格式Base64编码
const ROBOTO_BOLD_BASE64 = 'data:font/woff2;base64,xxxxxx你的Base64编码xxxxxx';

const downloadSvgAsPng = async () => {
  // 替换为你的SVG元素选择器
  const targetSvg = document.querySelector('#target-svg-element');
  
  await saveSvgAsPng(targetSvg, 'export.png', {
    fonts: [
      {
        // 填入所有SVG中用到Roboto粗体的字符，不确定可覆盖常用字符集合
        text: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+[]{}|;:,.<>?`~ ',
        url: ROBOTO_BOLD_BASE64,
        // 和你使用的字体格式对应，可选值woff2/woff/ttf等
        format: 'woff2'
      }
    ],
    // 可选配置：调整导出清晰度
    scale: 2
  })
}

常见排坑点 #

• 确保你的SVG元素中对应文字已经明确设置font-family: 'Roboto'; font-weight: 700;样式，和内联字体属性匹配
• text字段需覆盖所有用到该字体的字符，未包含的字符仍会 fallback 到系统默认字体
• 若使用网络字体地址而非Base64，需确保字体资源服务器配置了跨域头，否则浏览器会拦截字体加载

内容的提问来源于stack exchange，提问作者Maciej B. Nowak