威澳门尼斯人(中国)官网欢迎您

栗体 发自 凹非寺量子位 报道 | 民众号 QbitAI这个字体叫Leon Sans，外貌看去平平无奇。但事实上，它并不是普通的字体，体内蕴藏着魔力。

Leon Sans最特此外地方在于，字体是由代码组成的。有了这些代码，它可以随意变身。

好比，在暗夜里闪耀出七色的光影：好比，在春天里枝繁叶茂，花也开好了：好比，雨点打在地上汇成了河：形状 (Shapes) 、效果 (Effects) 、动画 (Animations) ，特技丰盛任君选择。邪术字体，是名叫Jongmin Kim的韩国小同伴，为了庆祝宝宝降生而设计的。不外，这不是独乐乐，是普天同庆：代码开源了，GitHub已经有6200星。

除此之外，有线上Demo可以玩耍。都能怎么玩最基本的操作，就是改变粗细 (Weight)。不止给尺度字体调粗细，也给炫彩的艺术字调粗细：然后，加大一点难度，让字体瑟瑟发抖。

就是把线条变得曲折。稍稍不平整，就会轻微的发抖。猛烈的弯折，就是触电了，烧糊了：拔电，再也不动了。

不外还好，可以顺手把它埋在春天里 (误) ：固然，埋法不止这一种。也可以把字母截断，酿成粉红色的“多米诺骨牌”，每张牌的宽窄还能自由选择：还可以让文字看上去，在平静中流淌：线上Demo的功效一共十几种，大家也可以自己试一下：如果，Demo还不能满足你的想象，那就去食用代码吧：字体是代码组成的文本有代码表现：text，字体巨细有代码表现：size，粗细有代码：weight，字间距有代码表现：tracking……另外，每一种特技都有各自的代码，也都有可以调治的参数。好比，瑟瑟发抖叫做wave，发抖频率用fps来调。

只要用这一串代码，就可以把灵动的字体，在H5上显示了： 1let leon, canvas, ctx; 2 3const sw = 800; 4const sh = 600; 5const pixelRatio = 2; 6 7function init() { 8 canvas = document.createElement('canvas'); 9 document.body.appendChild(canvas);10 ctx = canvas.getContext("2d");1112 canvas.width = sw * pixelRatio;13 canvas.height = sh * pixelRatio;14 canvas.style.width = sw + 'px';15 canvas.style.height = sh + 'px';16 ctx.scale(pixelRatio, pixelRatio);1718 leon = new LeonSans({19 text: 'The quick brownnfox jumps overnthe lazy dog',20 color: ['#000000'],21 size: 80,22 weight: 20023 });2425 requestAnimationFrame(animate);26}2728function animate(t) {29 requestAnimationFrame(animate);3031 ctx.clearRect(0, 0, sw, sh);3233 const x = (sw - leon.rect.w) / 2;34 const y = (sh - leon.rect.h) / 2;35 leon.position(x, y);3637 leon.draw(ctx);38}3940window.onload = () => {41 init();42};如果想把生成历程的动画也显示出来，就加一行：1<script src="/uploads/allimg/231109/19521S0T-1.jpg"></script>GitHub项目页有个完整列表，种种功效的设置方法都能查到。说不定，排列组合会有惊喜呢。

大家也去玩一波吧。GitHub传送门：https://github.com/cmiscm/leonsans官网传送门：https://leon-kim.com/— 完 —诚挚招聘量子位正在招募编辑/记者，事情所在在北京中关村。期待有才气、有热情的同学加入我们！相关细节，请在量子位民众号(QbitAI)对话界面，回复“招聘”两个字。量子位 QbitAI · 头条号签约作者վ'ᴗ' ի 追踪AI技术和产物新动态。

本文来源：威澳门尼斯人官网欢迎您-www.hzwsymy.com