如何为react-chartjs-2添加自定义阿拉伯语及波斯语字体？

先排查字体加载是否正确 #

首先确保你的自定义字体已经通过CSS正确加载，@font-face写法需规范：

@font-face {
  font-family: 'customFont';
  src: url('/path/to/your/font-file.woff2') format('woff2'),
       url('/path/to/your/font-file.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

可以先在普通DOM元素上应用font-family: customFont测试字体是否生效，排除字体本身加载失败的问题。

全局设置所有图表的字体（推荐） #

如果要让所有图表统一使用自定义字体，直接修改Chart.js的全局默认配置即可。在项目入口文件（比如index.js或App.js）中添加以下代码：

import { Chart } from 'chart.js';
import { useEffect } from 'react';

useEffect(() => {
  // 全局设置字体家族
  Chart.defaults.font.family = 'customFont';
  // 可选：全局设置字体大小、样式、权重
  // Chart.defaults.font.size = 14;
  // Chart.defaults.font.style = 'normal';
  // Chart.defaults.font.weight = '400';
}, []);

这样所有后续渲染的图表都会自动使用这个字体，无需逐个配置。

针对单个图表的局部配置 #

如果需要给特定图表单独设置字体，或者全局设置后需要调整某部分样式，在图表的options中对应模块配置：

const chartOptions = {
  // 坐标轴刻度与标题
  scales: {
    x: {
      ticks: {
        font: { family: 'customFont' }
      },
      title: {
        display: true,
        text: 'X轴标题',
        font: { family: 'customFont' }
      }
    },
    y: {
      ticks: {
        font: { family: 'customFont' }
      },
      title: {
        display: true,
        text: 'Y轴标题',
        font: { family: 'customFont' }
      }
    }
  },
  // 图例、提示框等插件
  plugins: {
    legend: {
      labels: {
        font: { family: 'customFont' }
      }
    },
    tooltip: {
      titleFont: { family: 'customFont' },
      bodyFont: { family: 'customFont' }
    }
  }
};

// 在图表组件中使用
<Line data={chartData} options={chartOptions} />

为什么你之前的配置没生效？ #

你之前写的plugins.labels.font是第三方插件chartjs-plugin-labels的配置项，如果没有安装并启用这个插件，自然不会生效。原生Chart.js的字体配置并不在这个路径下，而是分散在刻度、图例、提示框等各自的配置节点中。

处理字体加载延迟问题 #

如果字体加载慢，可能导致图表初始化时字体还未就绪，这时候可以用FontFace API确保字体加载完成后再渲染图表：

import { Chart } from 'chart.js';
import { useEffect, useState } from 'react';

function MyChart() {
  const [fontLoaded, setFontLoaded] = useState(false);

  useEffect(() => {
    async function loadCustomFont() {
      try {
        const font = new FontFace('customFont', 'url(/path/to/your/font.woff2)');
        await font.load();
        document.fonts.add(font);
        Chart.defaults.font.family = 'customFont';
        setFontLoaded(true);
      } catch (err) {
        console.error('字体加载失败:', err);
        setFontLoaded(true); // 加载失败也继续渲染，用 fallback 字体
      }
    }
    loadCustomFont();
  }, []);

  if (!fontLoaded) return <div>加载中...</div>;

  return <Line data={chartData} />;
}

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