Highcharts导出PDF时的字体（Arial）异常问题

问题描述 #

使用Highcharts制作柱状图时，离线导出为PNG、JPEG格式显示正常，但导出为PDF时，即使使用默认Arial字体，仍存在字体异常问题。原本使用Barlow作为主要字体也出现同样问题。

导出效果对比 #

• PDF导出异常：
• JPEG导出正常：

图表配置代码 #

{
    "lang": {
        "contextButtonTitle": "Opciones",
        "viewFullscreen": "Ver en pantalla completa",
        "exitFullScreen": "Salir de pantalla completa",
        "printChart": "Imprimir",
        "downloadJPEG": "Descargar imagen JPEG",
        "downloadPDF": "Descargar PDF",
        "downloadPNG": "Descargar imagen PNG",
        "downloadSVG": "Descargar imagen SVG",
        "thousandsSep": ","
    },
    "chart": {
        "backgroundColor": "#3D4553"
    },
    "title": {
        "visible": true,
        "template": "date_range",
        "templateConfig": {
            "originalDateFormat": "Y-MM-DD",
            "originalTimeFormat": "hh:mm:ss",
            "dateFormat": "DD-MM-Y",
            "timeFormat": "hh:mm a",
            "dateProperty": "fecha_creacion",
            "timeProperty": "hora_creacion"
        },
        "style": {
            "color": "#FFFFFF",
            "fontSize": "14px",
            "fontFamily": "Arial",
            "fontWeight": "bold"
        },
        "verticalAlign": "top",
        "align": "center",
        "floating": false
    },
    "subtitle": {
        "style": {
            "color": "#FFFFFF",
            "fontFamily": "Arial"
        }
    },
    "tooltip": {
        "backgroundColor": "#1d222b",
        "borderColor": "#1d222b",
        "borderWidth": 1,
        "borderRadius": 0,
        "style": {
            "color": "#FFFFFF"
        }
    },
    "xAxis": [{
        "type": "category",
        "labels": {
            "style": {
                "color": "white",
                "fontFamily": "Arial"
            }
        },
        "title": {
            "style": {
                "color": "white",
                "fontFamily": "Arial"
            }
        }
    }],
    "yAxis": {
        "title": {
            "text": "Reportes",
            "style": {
                "color": "white"
            }
        },
        "labels": {
            "style": {
                "color": "white"
            },
            "format": "{value:,.0f}"
        },
        "gridLineColor": "#43b5e5",
        "gridLineWidth": 0
    },
    "legend": {
        "enabled": false
    },
    "exporting": {
        "enabled": true
    },
    "noData": {
        "style": {
            "color": "white"
        }
    }
}

解决方案 #

1. 给离线导出服务器配置字体文件 #

离线导出依赖Highcharts Export Server（或PhantomJS/Puppeteer），必须确保导出环境能访问到目标字体文件：

• 将Arial、Barlow的TTF字体文件放到导出服务器可访问的路径
• 在导出服务器配置中注册字体，以Node.js版本的Highcharts Export Server为例：

const exportServer = require('highcharts-export-server');
exportServer.initPool({
    maxWorkers: 5,
    fonts: [
        {
            name: 'Arial',
            path: '/usr/share/fonts/truetype/arial.ttf',
            weight: 'normal'
        },
        {
            name: 'Barlow',
            path: '/path/to/Barlow-Regular.ttf',
            weight: 'normal'
        }
    ]
});

2. 在图表配置中嵌入字体定义 #

通过chart.defs添加@font-face规则，确保SVG转PDF时能识别字体：

"chart": {
    "backgroundColor": "#3D4553",
    "defs": {
        "style": "@font-face { font-family: 'Arial'; src: url('/fonts/arial.ttf') format('truetype'); }"
    }
}

3. 切换到Puppeteer渲染引擎 #

PhantomJS对现代字体支持有限，建议改用Puppeteer作为导出引擎：

# 启动导出服务器时指定Puppeteer
highcharts-export-server --enableServer 1 --type puppeteer

4. 验证字体加载状态 #

在图表加载事件中确保字体已加载完成，避免PDF渲染时使用 fallback 字体：

"chart": {
    "backgroundColor": "#3D4553",
    "events": {
        "load": function() {
            const arialFont = new FontFace('Arial', 'url(/fonts/arial.ttf)');
            arialFont.load().then(font => document.fonts.add(font));
        }
    }
}

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