jsPDF中的自定义字体? [英] Custom font faces in jsPDF?

问题描述

是否可以在jsPDF中包含自定义字体?

Is it possible to include custom fonts in jsPDF ?

有了基本库，如果我控制台登录'doc.getFontList()'，我将得到:

With the basic library, if I console log 'doc.getFontList()' I get:

Courier，Helvetica，Times，信使，Helvetica，次

Courier, Helvetica, Times, courier, helvetica, times

但是，说我想使用'Comic Sans'(不是我会; o))吗?

But, say I want to use 'Comic Sans' ( not that I would ;o) ) can it be done ?

更好的是，我可以使用一种字体存储在本地并用@ font-face在网站中声明的字体吗?

Even better, could I use a font is locally stored and has been declared in the site with @font-face ?

推荐答案

我发现可以通过修改jsPDF.js以在公共API中公开现有的addFont方法来实现.

I found this was possible by modifying jsPDF.js to expose the existing addFont method in the public API.

在jsPDF.js中，查找:

//---------------------------------------
// Public API

添加以下内容:

    API.addFont = function(postScriptName, fontName, fontStyle) {
      addFont(postScriptName, fontName, fontStyle, 'StandardEncoding');
    };

为了清楚起见，我将此方法放在其他字体方法附近-API.setFont，API.setFontSize，API.setFontType等.

I put this method near other font methods for clarity - API.setFont, API.setFontSize, API.setFontType, etc.

现在在您的代码中，使用:

Now in your code, use:

doc.addFont('ComicSansMS', 'Comic Sans', 'normal');
doc.setFont('Comic Sans');
doc.text(50,50,'Hello World');

这对于我来说适用于加载jsPDF之前，css包含的@ font-face字体以及系统字体.使用jsPDF的插件框架可能有更好的方法，但是这种快速而肮脏的解决方案至少应该使您着手.

This works for me with @font-face fonts included with css before loading jsPDF, as well as system fonts. There's probably a better way to do this using jsPDF's plugin framework, but this quick and dirty solution should at least get you going.

请注意，doc.getFontList()将不显示添加的字体:

Note that doc.getFontList() will not show added fonts:

// TODO: iterate over fonts array or return copy of fontmap instead in case more are ever added.

这篇关于jsPDF中的自定义字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！