如何在Sigma.js中为图形设置字体？labelFont参数配置疑问

• 参数取值规则：labelFont 接收的是标准CSS字体族字符串，和浏览器font-family属性的语法完全一致，并非字体文件的直接路径。

  • 可直接使用浏览器默认字体，比如 "Arial" "Times New Roman" "sans-serif" 这类；
  • 若要使用自定义字体，需先通过CSS的@font-face规则引入字体文件（如.woff/.woff2格式），再在labelFont中填写你定义的字体族名。

• 常见无效原因及解决办法：

  • 错误传入字体文件路径：直接写.woff路径不会生效，必须先通过@font-face完成字体注册；
  • 字体名称拼写错误：比如把"Arial"写成"arial"（部分浏览器兼容，但严格环境下会失效）；
  • 未设置 fallback 字体：建议写成"YourCustomFont, sans-serif"，避免自定义字体加载失败时无默认字体可用；
  • 样式优先级冲突：检查是否有其他Sigma配置或全局CSS覆盖了标签字体样式。

• 示例代码：

  /* 先引入自定义字体 */
  @font-face {
    font-family: 'MyCustomFont';
    src: url('path/to/my-font.woff2') format('woff2');
  }
  

  // Sigma配置中使用
  const sigmaInstance = new Sigma(graph, container, {
    labelFont: "MyCustomFont, Arial, sans-serif",
    // 其他配置...
  });
  

内容的提问来源于stack exchange，提问作者Thiago S. Brasil