如何在VegaLite中应用Times New Roman、Calibri字体及解决字体不生效问题

问题根源 #

直接设置config.font后无效果，是因为Vega-Lite仅指定字体族名称，浏览器必须能访问对应字体文件才能渲染。如果字体未安装在系统中，也未通过Web字体加载，浏览器会自动回退到默认的sans-serif/serif/monospace字体。

可行解决方案 #

1. 系统字体+回退方案 #

如果目标字体是常见系统字体（如Windows自带的Times New Roman、Calibri），在config.font中同时指定字体名和通用回退，兼容不同系统：

{
  "config": {
    "font": "Times New Roman, serif"
  },
  // 其余图表配置
}

• 示例：Calibri配置为"Calibri, sans-serif"，确保无Calibri的系统会用默认无衬线字体替代。

2. Web字体加载（跨平台一致显示） #

要在所有系统中统一显示目标字体，需先加载Web字体文件，再在Vega-Lite中引用：

步骤1：添加字体加载CSS

• 若嵌入自有网页：在页面<head>中插入@font-face规则（替换为实际字体文件路径）：

@font-face {
  font-family: 'Calibri';
  src: url('calibri.woff2') format('woff2');
}
@font-face {
  font-family: 'Times New Roman';
  src: url('times-new-roman.woff2') format('woff2');
}

• 若使用Vega在线编辑器：进入Settings选项卡，将上述CSS粘贴到自定义样式栏。

步骤2：在Vega-Lite配置中引用

{
  "config": {
    "font": "Calibri"
  },
  // 图表配置
}

3. 验证方法 #

用浏览器开发者工具（F12）确认：

• 网络面板中字体文件已成功加载。
• 元素面板中目标文本的font-family样式已应用自定义字体。

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