Nuxt3中使用jsPDF自定义Nunito字体时font-weight不生效求助

1. 匹配字体文件与目标字重 #

你HTML中使用的是font-weight:600，要确保导入的字体文件对应Nunito SemiBold（字重600），而非常规Bold（700）。同时确认font变量对应Nunito Regular（400）的Base64字符串，fontSemiBold对应Nunito SemiBold（600）的Base64字符串。

2. 完整注册两种字重的字体 #

在jsPDF中注册字体时，要为不同字重分别声明：

import { jsPDF } from "jspdf";
import { font, fontSemiBold } from "@/public/font";

let doc = new jsPDF('p', 'pt', [1665, 1000]);

// 注册Regular（400）字重
doc.addFileToVFS("Nunito-Regular.ttf", font);
doc.addFont("Nunito-Regular.ttf", "Nunito", "normal");

// 注册SemiBold（600）字重
doc.addFileToVFS("Nunito-SemiBold.ttf", fontSemiBold);
doc.addFont("Nunito-SemiBold.ttf", "Nunito", "600");

3. 配置html方法的字体映射 #

jsPDF的html方法依赖html2canvas渲染内容，需要通过fontFaces参数明确字体家族与字重的对应关系，确保HTML样式能匹配到正确字体：

let pdfHtml = '<h1>Some of <span style="font-weight:600">my</span> HTML</h1>'

doc.html(pdfHtml, {
  callback: function (doc) {
    doc.save('pdf.pdf');
  },
  fontFaces: [
    {
      family: "Nunito",
      src: "url(Nunito-Regular.ttf)",
      weight: "400",
      style: "normal"
    },
    {
      family: "Nunito",
      src: "url(Nunito-SemiBold.ttf)",
      weight: "600",
      style: "normal"
    }
  ]
});

额外注意点 #

• 移除全局的doc.setFont("Nunito", "normal")，该设置不会影响HTML内容的字体渲染，反而可能干扰字重匹配。
• 验证字体Base64字符串的正确性：可将Base64转换为ttf文件，打开后确认字重是否符合预期。

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