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

我想添加Calibri字体,但它不起作用

包含的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

对于 jsPdf 版本 1.4.0 及更高版本，可以使用自定义字体 (ttf)。自定义字体应采用 base64 编码。不幸的是，并非所有字体都有效。

var doc = new jsPDF('landscape');

// to generate 'yourCustomFontTtfBase64Encoded' you can use 
// jsPDF-CustomFonts-support library (on their
// github page there are all instructions for that)
doc.addFileToVFS('yourCustomFont.ttf', 'yourCustomFontTtfBase64Encoded');

doc.addFont('yourCustomFont.ttf', 'yourCustomFont', 'normal');

doc.setFont('yourCustomFont');

用于生成“yourCustomFontTtfBase64Encoded”的 jsPDF-CustomFonts-support 库位于： https: //github.com/sphilee/jsPDF-CustomFonts-support

Answer 2

你现在不能。

如果您查看源代码，您会发现有一个开关，如果它不知道字体，则返回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');