JSPDF自定义字体添加不工作

Question

CSS代码

@font-face { 
    font-family: Calibri; 
    src: url("fonts/calibri.ttf"); 
    font-style: normal; 
} 

JS代码

doc.setFont('Calibri'); 
doc.setFontSize(7.5); 
doc.setFontType("normal"); 
doc.text(10, 10, "Hi, How r u"); 

我想补充宋体字体，但它不工作JS脚本的

名单包括

<script src="/assets/global/scripts/jspdf/jspdf.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/acroform.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/from_html.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/addhtml.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/annotations.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/autoprint.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/canvas.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/cell.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/context2d.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/javascript.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/outline.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/prevent_scale_to_fit.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/split_text_to_size.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/standard_fonts_metrics.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/svg.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/total_pages.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/zlib.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/png.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/png_support.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/filesaver.js" type="text/javascript"></script> 

CSS

/* 
To change this license header, choose License Headers in Project Properties. 
To change this template file, choose Tools | Templates 
and open the template in the editor. 
*/ 
/* 
    Created on : Apr 23, 2017, 12:57:52 PM 
    Author  : common 
*/ 

@font-face { 
    font-family: Calibri; 
    src: url("fonts/calibri.ttf"); 
    font-style: normal; 
} 

/* 
@font-face { 
    font-family: Calibri; 
    src: url("fonts/calibrii.ttf"); 
    font-style: italic; 
} 

@font-face { 
    font-family: Calibri; 
    src: url("fonts/calibrib.ttf"); 
    font-style: normal; 
    font-weight: bold; 
} 

@font-face { 
    font-family: Calibri; 
    src: url("fonts/calibriz.ttf"); 
    font-style: italic; 
    font-weight: bold; 
}*/ 

Answer 1

你目前不能。

如果你看一看到source code，你看到有一个开关，如果它不知道的字体，返回times如字体

switch (fontName) { 
     case 'sans-serif': 
     case 'verdana': 
     case 'arial': 
     case 'helvetica': 
     fontName = 'helvetica'; 
     break; 
     case 'fixed': 
     case 'monospace': 
     case 'terminal': 
     case 'courier': 
     fontName = 'courier'; 
     break; 
     case 'serif': 
     case 'cursive': 
     case 'fantasy': 
     default: 
     fontName = 'times'; 
     break; 
    } 

您可以使用的那一个字体，或编辑库以支持您的字体。

否则，正在进行库，以自定义字体添加支持工作：https://github.com/sphilee/jsPDF-CustomFonts-support

将所有需要的文件后，你应该使用这样的：

doc.addFont('fonts/calibri.ttf', 'Calibri', 'Calibri-normal', 'normal'); 

Answer 2

你好你可以试试和修改字体这样，

API.addFont = function(fontScript, font, style) { 
     addFont(fontScript, font, style, 'StandardEncoding'); 
    }; 

上述功能，你将不得不添加到LIB /你的字体改变调用之前，但我会建议增加SCR在加载jspdf之后添加ipt标记，并在该脚本标记中添加此函数。

现在，您需要添加字体的CSS，

，然后你可以修改这样的PDF的字体。

doc.addFont('fonts/calibri.ttf', 'Calibri', 'normal'); 
doc.setFont('Calibri'); 
doc.text(50,50,'Now this is Calibri'); 

Answer 3

就像上面说你可以在https://github.com/sphilee/jsPDF-CustomFonts-support使用jsPDF-CustomFonts支持库。

上有READ.ME文件的说明，但我去了什么是这些指令https://github.com/sphilee/jsPDF-CustomFonts-support/issues/16#issuecomment-307174041：

1. 上传的.ttf字体的字体Squirell https://www.fontsquirrel.com/tools/webfont-generator
2. 按下下载，你会得到一个带有新的.ttf文件的压缩文件。现在你必须编码到base64 https://www.giftofspeed.com/base64-encoder/。
3. 一旦你有你的字体中的Base64编码，你必须去，你必须下载与该vfs_fonts.js文件jsPDF-CustomFonts支持https://github.com/sphilee/jsPDF-CustomFonts-support和用于分离不同字体的“，”一后在该文件中，您必须添加：“YOUR_FONT_NAME.ttf”：“您的BASE64代码”（请记住在引号后以逗号结尾）。
4. 一旦你这样做，你可以添加功能文档。 addFont（ “YOUR_FONT_NAME.ttf”，“YOUR_FONT_NAME。TTF”， “正常”， “WinAnsiEncoding”）