简单易用，跨平台，20KB！效果预览：https://www.bilibili.com/video/BV1cf4y1H7Pa无论是写代码还是写工具，都要明确定义输入输出。输入：碎片化的字体图像（通常是数字）处理：动态调整参数和预览实时效果输出：组合图像和字体信息文件xxx.fnt为什么要重写一个轮子？GlyphDesigner(Mac)和BMFont(Windows)功能齐全，但有平台限制。我个人不习惯它的操作。CocosStore中也有很多优秀的BMFont插件，但是根据CocosCreator的不同，可能会有相应的版本限制。实现是手写一个HTML，依赖浏览器的小工具，目录设计如下：index.htmlrenderer.jsindex.css将文件拖入文件，参考mozilla中的文档，以及听ondrop事件。https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications拖拽文件后，用一个列表来维护文件数据。文件格式可以参考文档。http://www.angelcode.com/products/bmfont/doc/file_format.html拖入文件合成大图代码参考CocosStore中的一个插件代码，将所有图片绘制到一个Canvas上。http://store.cocos.com/app/detail/2604合成大图代码预览效果根据图片xoffsetyoffsetxadvance的信息，使用Canvas画布进行渲染。预览效果代码导出文件直接使用FileSaver.jshttps://github.com/eligrey/FileSaver.js导出文件代码体验在线体验地址：https://lamyoung.gitee.io/web/bitmapFont/代码包下载：https://gitee.com/lamyoung/web/raw/master/bitmapFont/source.zip以上是白宇无冰使用HTML+JS实现“位图字体制作工具”的过程分享。
