jspdf如何支持中文-思源黑体

最新推荐文章于 2024-09-09 11:48:58 发布

qq_43436008

最新推荐文章于 2024-09-09 11:48:58 发布

阅读量1.2k

点赞数 2

文章标签：前端 pdf

本文链接：https://blog.csdn.net/qq_43436008/article/details/134425543

版权

1.下载思源黑体的ttf
这一步就困扰了我许久，官网的ttf文件过大，会影响性能。
可以在这个链接下载合适的ttf文件（ https://gitee.com/ABCpril/SourceHansTtf ）
参考的这个链接，下载到了合适大小的ttf文件（https://www.cnblogs.com/tujia/p/15102730.html）
在这里插入图片描述

import { jsPDF } from "jspdf";

const fetchFont = function () {
  this.addFont("/static/fonts/SourceHanSansCN-Normal.ttf", "SourceHanSans", "normal");
};
jsPDF.API.events.push(["addFonts", fetchFont]);

//然后将上述的一个js文件，引入index.tsx中即可

2.jspdf中使用思源黑体

doc.setFont("SourceHanSans");//1）doc中设置
font: "SourceHanSans" // 2）style中设置

记录一下问题

如何找到官网的ttf文件

https://github.com/adobe-fonts/source-han-sans/blob/release/README.md

为什么不能直接用官网的ttf子集文件

1)官网下载的ttf文件，全集有30多M，子集有16M；文件过大，会影响浏览器加载性能
2）官网下载的子集ttf文件中包含多种字重的字体，有light,normal,bold等，默认是extralight还是light的，字重非常轻，不适合阅读。查阅帖子没有找到拆分ttf文件中单个字重字体包的方法，就找的网上别人分享的normal字重的字体包进行使用，可以达到需求。