Foxit PDF SDK for Web（简称WebSDK）默认使用开源字体并设置了相应的字体匹配规则。当文档中包含WebSDK未映射的特定字体时，可能导致内容显示异常或显示效果不符合预期。为解决此问题，WebSDK提供了自定义字体映射接口，允许用户通过以下步骤实现字体替换和UI字体列表修改。
示例目录：examples/UIExtension/custom-font/
首先，把自定义的字体文件放置在：external/brotli/下
其次，用下列命令在external/brotli/fontInfo.csv新增自定义字体信息
SDK 提供了一个字体信息生成工具 (见 SDK 包中的 /server/gen-font-info 文件夹)，用于创建字体信息列表文件。
在 gen-font-info 目录下执行以下命令：node index.js <input-path> [output-path] [output-override=true]
例如：node index.js D:\WebSDK\external\brotli\CESI_FS_GB18030.ttf D:\WebSDK\external\brotli\fontInfo.csv false
详细资料可以参考以下链接：https://devdocs.fuxinsoft.cn/development-guide/pdf-sdk-web/kb/font/generate-a-CSV-file-with-font-information.html
最后，添加字体信息csv文件路径到初始化
var readyWorker = preloadJrWorker({
workerPath: '../../../lib/',
enginePath: '../lib/jr-engine/gsdk',
fontPath: '../external/brotli',
fontInfoPath: '../external/brotli/fontInfo.csv', // 设置字体信息文件的路径
licenseSN: licenseSN,
licenseKey: licenseKey
})
- 添加字体映射，注意path要替换设置为字体存放的位置目录
var path = location.href.replace(/\/index.html$/, '');//注意需要替换为自定义字体文件存放的位置
var fontMaps = [
{
nameMatches: [/Rage/, /Rage Italic/, /RageItalic/],
glyphs: [
{
bold: -1,
flags: -1,
url: path + '/RAGE.TTF'
}
],
charsets: [0]
},
{
nameMatches: [/CESI_FS_GB18030/,/CESI仿宋-GB18030/],
glyphs: [
{
bold: -1,
flags: -1,
url: path + '/CESI_FS_GB18030.TTF'
}
],
charsets: [134]//简体中文charset为134
}]
var fontMapsInfo = [
{
"name": "Rage", //The font face name
"style": 0, //The font styles
"charset": 0 //The charset of the font
},{
"name": "CESI_FS_GB18030", //字体名称
"style": 0,
"charset": 134 //简体中文charset为134
},
]
pdfui.getPDFViewer().then(function (viewer) {
// 自定义字体。该方法仅在加载文档之前有效。
viewer.setJRFontMap(fontMaps).then(function (_) {
pdfui.openPDFByHttpRangeRequest({
range: {
url: path + '/test.pdf',//打开文件替换为需要打开的文件
}
}, { fileName: 'test.pdf' })//替换为需要打开的文件
// 将映射后的字体添加到下拉字体框中
viewer.addFontMaps(fontMapsInfo)
// 现在可以选择自定义字体进行文本编辑
})
})
