相信大家都遇到过在设计中需要使用一些奇奇怪怪的字体，然后因为字体文件太大而选择裁剪图片的情况。我的需求非常强烈。用户可以为文章选择字体。这篇文章能出现的词太多了，显然之前的方案不合适，那么我们是怎么做到的呢？话不多说，先上demo，别问我demo是谁。接口地址：https://www.lilnong.top/createfont?txt=%E6%B5%8B%E8%AF%95%E6%96%87%E5%AD%97页面地址：https://www.lilnong.top/static/html/createfont.html实施方案分析问题只有一个问题，就是：字体文件太大（10MB）。先不说流量贵不贵。这么大的文件，在网上乱刷的时候，看了你的字体还没回来。解决办法当然是缩小字体文件，所以有两个选项提供常用词生成字体文件动态生成字体文件提供常用词生成字体文件英文比较简单，比如只提供26个字母。但是汉字博大精深，太难了，所以我们可以提供一些常用的汉字。优点：资源只有一个，可以缓存起来供公众使用。实现简单缺点：因为是常用词，一些不常用的词可能会显示默认字体，体验较差。因为字体文件比较大，所以第一次加载会慢一点。但是因为不是满的，所以会快一些。动态生成字体文件的方案是将文章中的所有单词提取出来，然后生成一个字体文件供使用。事实上，这种解决方案经常用于静态页面，运行脚本分析以生成字体文件。优点：文件体积小，实现速度快，稍微复杂，因为需要动态生成字体文件，需要在服务器端提供一个字体生成服务。缺点：每修改一篇文章，都会生成一个新的字体文件，旧资源利用率不高，缓存利用率不高。当然，我们最后还是选择了这种动态生成字体文件的方案，导致文件小，加载快。fontmin库准备好了，解决办法上面说了，下面就开始说怎么做了。我正在使用fontmin库来实现该功能。安装npminstall--savefontminusevarFontmin=require('fontmin');newFontmin().src('/static/font/font.ttf')//loadfont.use(rename(txtMD5+'.ttf'))//修改输出文件名.use(Fontmin.glyph({text:txt,hinting:false}))//subsettingtext参数为要输出的字体.use(Fontmin.ttf2eot())//eotconversionplugin.use(Fontmin.ttf2woff())//woffconversionplugin.use(Fontmin.ttf2svg())//svgconversionplugin.use(Fontmin.css())//cssgenerationplugin.dest('/静态/fontmin');//设置字体输出path.run(function(err,files){if(err)throwerr;console.log('success');});修改生成文件名varrename=require('gulp-rename');.use(rename(txtMD5+'.ttf'))//修改输出文件名修改CSS文件中字体的Font-family.use(Fontmin.css(fontFamily:'MD5'))其他资源font-spider可以自动分析Html文件，可以在Gulp中使用。font-carrier还可以做fontsubsetting，也可以修改每个字符的字形（可以理解为混淆）。微信公众号：前端立农
