# Foxit PDF SDK for Web 中新字体的策略和使用方法
# 背景
Foxit PDF SDK for Web 允许开发者自定义字体,以满足个性化的需求。然而,当前端引入新的字体时,如果 SDK 底层引擎的字体信息列表中没有相应的记录,就会出现字体匹配不准确的问题,导致文档中的文本显示为错误的字体。为了解决这个问题,我们需要将前端所支持的所有字体信息,包括字体名称、样式等,传递给 SDK 底层引擎。通过这种方式,SDK 底层引擎就可以在渲染文档时,根据文档中的字体信息,从前端提供的字体信息列表中找到匹配的字体,从而确保文档的正确显示。
# 如何配置字体信息文件
Foxit PDF SDK for Web 提供了一个名为 fontInfoPath
的配置参数,允许用户根据自己的需求自定义字体信息列表。具体用法可以参考下面的示例。
# 如何生成字体信息列表文件
Foxit PDF SDK for Web 提供了一个字体信息生成工具 (见 package 中的 /server/gen-font-info
文件夹),用于创建字体信息列表文件。
该文件主要包含以下字体信息: family name, sub-family name, face index, postscript name, code page 等。
# 如何使用
Foxit PDF SDK for Web 在 package 的
/external
文件夹中提供了一些开源字体。因此,Foxit PDF SDK for Web 将根据这些开源字体生成一个名为fileInfo.csv
的字体信息文件。如果用户需要使用自定义字体,可以根据自定义的字体生成一个新的字体信息文件,如
fileInfoNew.csv
。或者,也可以将自定义字体信息追加到现有的fileInfo.csv
文件中。在使用这种字体策略时,需要结合使用
PDFView.setJRFontMap
。
备注:在字体匹配时,我们依据的是字体的 "family name",其对应于 fileInfo.csv
文件的 F 列,并且区分大小写。
# 示例
const pdfui = new PDFUI({
viewerOptions: {
jr: {
fontPath: '../external/brotli',
fontInfoPath: '../external/brotli/fontInfo.csv', // Set the path for the font information file.
licenseSN,
licenseKey,
brotli:{
core:false
},
},
},
customs: {
},
appearance,
renderTo: '#pdf-ui',
fragments: [],
addons: []
});
// Add custom fonts
var fontMaps = [
{
nameMatches: [/Arial/i],
glyphs: [
{
// bold: -1,
flags: -1 ,
url: 'http://<hostname>/unitTest/font/ARIAL.TTF'
}
],
charsets: [0]
}
]
pdfui.getPDFViewer().then(function (viewer) {
viewer.setJRFontMap(fontMaps)
})
# 备注
在手型模式下,当直接从浏览器复制富文本并将其粘贴到 PDFViewer 中时,Foxit PDF SDK for Web 会将其添加为 Typewriter 注释。然而,从浏览器复制的大多数字体通常是系统字体,如 "-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Oxygen","Ubuntu","Fira Sans","Droid Sans","Helvetica Neue","sans-serif"。在使用此功能时,建议根据系统平台指定特定字体,以便 Foxit PDF SDK for Web 的字体引擎能更好地识别它。否则,字体引擎将无法知道应用层正在使用哪种字体,可能导致无法正确显示复制和粘贴的内容。
因此,在使用此功能时,Foxit PDF SDK for Web 默认在 Windows 平台上使用 "Dengxian Light" 字体,在 Mac 平台上使用 "PingFangSC" 字体。应用层需要按照第三方字体的流程将字体加载进来。