您是否曾尝试显示 PDF 但因内容乱码或文本外观呈现不正确而失败？ 原因可能是 PDF 不包含用于呈现的正确字体。 您要么进行字体嵌入，要么进行字体映射以确保呈现的正确性。本教程介绍如何通过 API 和 UI 映射字体。
使用字体数据
Foxit PDF SDK for Web 提供两种后备字体数据。 一个包含在“FoxitPDFSDKforWeb \external\brotli”的包中。 另一个位于 https://webpdf.foxitsoftware.com/webfonts/。
要引用字体，请使用适当的路径声明 fontPath，如下所示：
获取字体信息
在开始映射字体之前，您需要了解当前文档中包含的字体信息。 您可以通过 PDFDoc::getFontsInfo 获取。
简易代码如下：
var pdfViewer = await pdfui.getPDFViewer();
var pdfDoc = await pdfViewer.getCurrentPDFDoc();
await pdfDoc.getFontsInfo()
在控制台执行代码，你会得到如下信息：
添加字体映射
seJRFontMap 是一种帮助映射字体并为当前文档找到最佳匹配字体的方法。
注意：
如果您已经打开过文档，匹配后，打开前必须清空缓存
Freetext 和 Form 仅在 8.2 及更高版本中支持
1) 假设pdf中使用的字体是Rage，就需要配置Rage字体。 配置后，文档可以显示更好的效果。 代码如下：
pdfui.getPDFViewer().then(function (pdfViewer){
pdfViewer.setJRFontMap([{
nameMatches: [/Rage/, /Rage Italic/, /RageItalic/],
glyphs: [
{
bold: -1,
flags: -1,
url: path + '/RAGE.TTF'
}]
}
//more fonts
// ,{
// nameMatches:nameMatches
// glyphs:glyphs
// }
]);
});
设置前后效果对比如下:
2) 假设 PDF 文档需要字体 CALIBRI 和 ARIAL，但默认字体不需要。 随之，就会出现乱码。 映射这两种字体后，就可以正常显示。 代码如下：
var pdfViewer = await pdfui.getPDFViewer();
await pdfViewer.setJRFontMap([{
nameMatches: [/CALIBRI/i],
glyphs: [
{
bold: -1, //0b00001000
flags: -1,
url: 'http://10.103.4.217:9898/Fonts/CALIBRI.TTF'
}]
},{
nameMatches: [/Arial/i],
glyphs: [
{
bold: -1, //0b00001000
flags: -1,
url: 'http://10.103.4.217:9898/Fonts/ARIAL.TTF'
}]
}]);
var resp = await fetch('http://10.103.4.217:9898/customer/exported.pdf');
var file = await resp.blob();
var pdfdoc = await pdfViewer.openPDFByFile(file);
设置前后效果对比如下：
将映射字体添加到UI的字体列表中
通过 PDFViewer::addFontMaps 接口，可以将映射的字体作为选项添加到 UI。
注意：
使用的字体必须已经在映射列表中。 若无，就需要通过setJRFontMap添加。 否则，如果您将会收到错误的提示。
SetJRFontMap 可以在上篇 “添加字体映射”中找到
映射 Rage 字体后，将其添加到 UI。 代码如下：
const fontMapsInfo = [
{
"name": "Rage", //The font face name.
"style": 0, //The font styles.
"charset": 0 //The charset of the font.
},
//more fonts
//{
// "name": "Tahoma", //The font face name.
// "style": 0, //The font styles.
// "charset": 222 //The charset of the font.
//},
]
viewer.addFontMaps(fontMapsInfo)
设置完成后在UI上查看效果。
1) 查看表单域中的字体列表
2） 检查文本编辑器中的字体列表
如何设置FreeText显示字体为映射字体
通过 FreeText::setDefaultAppearance 接口设置。 使用的字体必须已经在映射列表中，不需要的通过setJRFontMap添加。如有需要，请翻阅上篇“添加字体映射”。
代码如下：
//traverse documents
for(var i=0;i<pageCount;i++){
var page = await pdfDoc.getPageByIndex(i);
//Get the freetexts on the specified page
var annots = await page.getAnnotTree();
annots.forEach(async annot => {
var type = await annot.getType();
switch (type) {
case "freetext":
var jsonAppearance = {
textColor:0Xff000000,
textSize:20,
font: {
"name": "Rage",
"styles": 0,
"charset": 0
}
}
await annot.setDefaultAppearance(jsonAppearance);
break;
default:
break;
}
});
}
设置前后效果对比如下：
如何编辑模块的字体列表和UI默认选择的字体
查看相关样式后，通过组件方法修改。
如何设置默认选择的字体
代码如下：
let fontComponent = await pdfui.getComponentByName('fv--addon-textobject-font-family-size-dropdown');
let fontFamilie = fontComponent.controller.fontFamilies.find((font)=>{return font && font.name=='Rage'});
if(fontFamilie){
fontComponent.controller.selectFontFamily(fontFamilie)
}
- UI 上默认选择的字体是 Helvetica：
- 调用代码设置后，默认选择的字体是Rage：
如何设置字体列表的顺序
UI 上的默认字体列表顺序，Rage 字体在最后：
调用代码设置后，将 Rage 字体设置为第一种字体：
