如何在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 中没有任何内容显示为粗体。

我在电子中使用它，我不知道这是否会改变任何东西。

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');

在这里输出，

Answer 2

您可以使用：

doc.setFont(undefined, 'bold').text("Your paragraph").setFont(undefined, 'normal')

仅以粗体样式设置一行

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')
  }
})

Answer 4

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

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

1. 使用以下方法选择所有符号：ctrl+A
2. 更改重量：

   Element

   >

   Style

   >

   Change weight

3. Embolden by

   ：12 ems、

   LCG

   （拉丁语、水晶语和希腊语）、

   Counters

   ：挤压、

   Cleanup self intersect

4. Correct direction

   ：右键>

   correct direction

5. 生成字体

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

Answer 5

如何仅将内容中的某些单词（例如名词）加粗。

Answer 6

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

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

doc.setFontType("正常") doc.text(40, 40, "这是普通字体段落");