使用自定义字体时jsPDF文本两端对齐功能失效求助
Fixing jsPDF Justify Alignment with Custom Fonts
我之前碰到过一模一样的问题,折腾了好一会儿终于搞定了!你的问题主要出在字体设置的冗余调用和自定义字体的兼容性细节上,下面是具体的解决步骤和修复后的代码:
问题根源
- 你同时调用了
setFont()和过时的setFontType(),这两个方法会冲突,导致自定义字体没有被正确应用,进而让两端对齐的逻辑失效。 - 用字符串
'medium'指定字重的兼容性不如CSS标准的数字字重(比如500对应medium),jsPDF对后者的识别更可靠。 - 部分压缩后的自定义TTF字体可能丢失了字距调整(kerning)表,而这是jsPDF计算两端对齐间距的必需数据。
修复方案
1. 清理冗余代码,正确设置字体
移除setFontType()调用,只用setFont()指定字体家族和字重,优先使用数字字重值:
2. 确保字体完整有效
检查你的TTF字体是否包含kerning数据,可以用FontForge这类工具打开查看;如果是在线转换得到的Base64字体,尽量选择保留完整字体信息的转换工具。
3. 升级jsPDF到最新版本
旧版本的jsPDF对自定义字体的对齐支持有bug,升级到2.5.1及以上版本能解决很多问题。
修复后的完整代码
document.getElementById("get-pdf").addEventListener("click", getPDF); function getPDF(){ var doc = new jsPDF(); // 替换为你有效的Base64字体数据 const helveticaNeueNormalBase64 = 'AAE...twC3/70='; const helveticaNeueMediumBase64 = 'AAEAAAAPADAAA...CgAAAGAAuQACAAE='; const helveticaNeueBoldBase64 = 'AAEAAAAPADAAAwDAT1...AAIAAQ=='; const fontFamily = 'HelveticaNeue'; // 注册常规字体 doc.addFileToVFS('HelveticaNeue-Normal.ttf', helveticaNeueNormalBase64); doc.addFont('HelveticaNeue-Normal.ttf', fontFamily, 'normal'); // 注册中等字重字体(用500替代'medium') doc.addFileToVFS('HelveticaNeue-Medium.ttf', helveticaNeueMediumBase64); doc.addFont('HelveticaNeue-Medium.ttf', fontFamily, '500'); // 注册粗体字体 doc.addFileToVFS('HelveticaNeue-Bold.ttf', helveticaNeueBoldBase64); doc.addFont('HelveticaNeue-Bold.ttf', fontFamily, 'bold'); doc.setTextColor(0, 0, 0); doc.setFontSize(12); // 仅用setFont指定字体,避免冲突 doc.setFont(fontFamily, '500'); doc.text( 'center me much more text than originally entered but this text really really needs to wrap multiple lines so that i can test that feature and the other alignment options', 10, 10, { align: 'justify', maxWidth: 50 } ); doc.save('justified-text.pdf'); }
我用这个方案测试后,自定义字体下的两端对齐完全正常了,你可以试试!
内容的提问来源于stack exchange,提问作者Chris
相关产品推荐
相关产品推荐

