功能说明:从默认或从本地选择的字体中查找目标文字的矢量SVG路径,使用Canvas绘制路径及关键点\输出SVGPathData\抽取简化后的字体文件\生成FontFace代码并产生预览效果。

实现原理:基于 OpentypeJS 的字体处理库,提取目标文本字体&轮廓路径&生成简化后的字体文件,使用SpriteJS操作Canvas绘制文本轮廓&路径关键点。

注意:本试验Demo没有考虑低版本浏览器兼容&性能问题,字体文件过大、输入文本太多会有浏览器假死现象!

另推荐一个SVG路径编辑器:https://yqnn.github.io/svg-path-editor/