如何在jspdf中使用加粗的自定义字体

Question

我正在尝试在jspdf中使用自定义字体，但我无法将字体显示为粗体，我按照这里指定的步骤进行了操作。

以下是代码：

require ("./js/Roboto-Regular-normal.js");
require ("./js/Roboto-Regular-bold.js");
let doc = new jsPDF();
   
doc.setFont('Roboto-Regular');
doc.setFontSize(8);
doc.text("hello world", 50 , 50);
doc.setFontType('bold');
doc.text("Hello Bold", 50, 55);

let blob = doc.output();
const fs = require('fs');
fs.writeFile('a5.pdf', blob, 'utf8', function(err){
    //Do something
});

Roboto-Regular-normal.js

(function (jsPDFAPI) {
    var font = base64_font; //I didn't include this string because is too large, let me know if I should include it anyways
    
    var callAddFont = function () {
        this.addFileToVFS("Roboto-Regular-normal.ttf", font);
        this.addFont("Roboto-Regular-normal.ttf", "Roboto-Regular", "normal");
    };
    jsPDFAPI.events.push(['addFonts', callAddFont])
})(jsPDF.API);

Roboto-Regular-bold.js:

(function (jsPDFAPI) {
        var font = base64_font; //I didn't include this string because is too large, let me know if I should include it anyways
        
        var callAddFont = function () {
            this.addFileToVFS("Roboto-Regular-bold.ttf", font);
            this.addFont("Roboto-Regular-bold.ttf", "Roboto-Regular", "bold");
        };
        jsPDFAPI.events.push(['addFonts', callAddFont])
})(jsPDF.API)

PDF中没有任何文字显示为粗体。

我在electron中使用它，我不知道是否会有所改变。

- Damian Escobedo

Answer 1

您可以像这样编辑您的 JS 文件，

doc.text("This is example paragraph", 11,13,).setFontSize(8).setFont(undefined, 'bold');

doc.text("This is example paragraph", 11,13,).setFontSize(8).setFont(undefined, 'normal');

在这里输出结果，

- Sudesh Ladusinghe

Answer 2

你可以使用以下代码将一行文字设置成粗体： doc.setFont(undefined, 'bold').text("Your paragraph").setFont(undefined, 'normal')

- Luís Guilherme F. de Sena

---

你好 @luís-guilherme-f-de-sena，欢迎来到stackoverflow。请在回答中更加详细地阐述问题。请查看https://stackoverflow.com/help/how-to-answer以了解如何撰写出色的答案。 - kplus

Answer 3

##**React example jsPdf html**

const doc = new jsPDF()
doc.addFileToVFS('PTSans-Regular-normal.ttf', font)
doc.addFont('PTSans-Regular-normal.ttf', 'PTSans', 'normal')
doc.addFileToVFS('PT Sans Bold-bold.ttf', fontBold);
doc.addFont('PT Sans Bold-bold.ttf', 'PTSans', 'bold');
doc.setFont('PTSans')

doc.html(ReactDOMServer.renderToString(<div style={{ fontFamily: 'PTSans' 
}}>{element}</div>), {
  callback: function (doc) {
    doc.save('filename'+ '.pdf')
  }
})

- Shohzod Abdusamatov

Answer 4

没有简单的方法！有一种“困难”的方式。您必须使用单独的粗体变体字体文件。如果您可以取得它很好-否则，您将不得不自己生成它，并记住字体许可证允许您这样做。

我使用的软件是：fontforge。 在那里：

1. 使用ctrl+A选择所有符号
2. 从：元素>样式>更改权重中更改权重
3. 加粗：12个ems，LCG（适用于拉丁文，斯拉夫文和希腊文），计数器：挤压，清理自相交
4. 纠正方向：右键单击> 纠正方向
5. 生成字体

现在，与之前的字体文件一样，您可以在“加粗”标签下使用“addFont”添加此加粗版本

- Ujjwal Singh

Answer 5

https://github.com/MrRio/jsPDF/issues/199#issuecomment-73009553

doc.setFontType("bold"); doc.text(20, 20, "这是一个粗体段落");

doc.setFontType("normal") doc.text(40, 40, "这是一个普通字体段落");

- Miroslav Savovski

---

这适用于"jspdf": "^1.4.1"，但不适用于"jspdf": "^2.4.0"。 - utopia