本文经AI新媒体量子位（公众号ID：QbitAI）授权转载，转载请联系出处。这种字体叫做LeonSans，表面上看起来很不起眼。但实际上，它不是普通的字体，其中蕴含着魔力。LeonSans最特别的地方在于字体是由代码组成的。有了这些代码，它就可以随意变形了。例如，七色光影在黑夜中闪耀：例如春天，树叶繁茂，花朵盛开：例如，雨滴打在地上汇成河流：Shapes,Effects,Animations)，丰富的特技任你选择。魔法字体是由一位名叫JongminKim的韩国朋友为庆祝婴儿的诞生而设计的。然而，这不是一个人的喜悦，而是全世界的欢庆：代码开源，GitHub有6200个star。此外，还可以在线播放Demo。最基本的操作就是改变厚度（Weight）。不仅调整了标准字体的粗细，还调整了多彩艺术字体的粗细：然后，增加难度，让字体颤抖。它只是使线条曲折。如果稍微不均匀，它会轻微振动。如果急剧弯曲，则表示触电或烧毁：拔掉电源，再也不动了。不过好在春天可以埋（错）：埋的方法当然不止一种。还可以将字母截断，变成粉红色的“多米诺骨牌”，还可以自由选择每张卡片的宽度：还可以让文字显得平静流动：在线演示中有十几种功能，并且你也可以选择你可以自己试试：如果Demo还是不能满足你的想象，那就去吃代码吧：字体由代码组成，文字有代码表示：文字，字号有代码表示：尺寸，粗细有代码表示：重量，字间距有代码表示：跟踪...另外，每个特效都有自己的代码，也有可以调整的参数。比如抖动叫wave，抖动频率以fps为单位调整。就用这串代码在H5上显示智能字体：1letleon,canvas,ctx;23constsw=800;4constsh=600;5constpixelRatio=2;67functioninit(){8canvas=document.createElement('canvas');9document.body.appendChild(canvas);10ctx=canvas.getContext("2d");1112canvas.width=sw*pixelRatio;13canvas.height=sh*pixelRatio;14canvas.style.width=sw+'px';15canvas.style.height=sh+'px';16ctx.scale(pixelRatio,pixelRatio);1718leon=newLeonSans({19text:'Thequickbrown\nfoxjumpsover\nthelazydog',20color:['#000000'],21size:80,22weight:20023});2425requestAnimationFrame(animate);26}2728functionanimate(t){29requestAnimationFrame(animate);3031ctx.clearRect(0,0,sw,sh);3233constx=(sw-leon.rect.w)/2;34consty=(sh-leon.rect.h)/2;35leon.position(x,y);3637leon.draw(ctx);38}3940window.onload=()=>{41init();42};如果想把生成过程的动画也显示出来，只需要加一行：1GitHubprojectpage有完整的列表，各种功能的设置方法都可以找到。也许排列组合会有惊喜。我们都去玩吧。github传送门：https://github.com/cmiscm/leonsans官网传送门：https://leon-kim.com/
