设想必备！这能够是你见过最好玩的字体（附免费下载）

站务发布

这个字体叫 Leon Sans，概况看去平平无奇。

但究竟上，它并不是普通的字体，体内蕴藏着魔力。

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

比如，在暗夜里闪烁出七色的光影：




比如，在春季里枝繁叶茂，花也开好了：




比如，雨点打在地上汇成了河：




外形 (Shapes) 、结果 (Effects) 、动画 (Animations) ，特技丰厚任君挑选。

魔法字体，是名叫 Jongmin Kim 的韩国小伙伴，为了庆贺宝宝出世而设想的。不外，这不是独乐乐，是率土同庆：由于代码开源了，GitHub 已经有 6200 星。

除此之外，还有线上 Demo 可以顽耍。

都能怎样玩

最根基的操纵，就是改变粗细 (Weight) 。




不止给标准字体调粗细，也给炫彩的艺术字调粗细：




然后，加大一点难度，让字体瑟瑟发抖。就是把线条变得盘曲。

稍略不服整，就会稍微的发抖。剧烈的弯折，就是触电了，烧糊了：




拔电，再也不动了。

不外还好，可以随手把它埋在春季里 (误) ：




固然，埋法不止这一种。

也可以把字母截断，酿成粉红色的「多米诺骨牌」，每张牌的宽窄还能自在挑选：




还可以让笔墨看上去，在安静中流淌：




线上 Demo 的功用一共十几种，大师也可以自行实验。假如 Demo 还不能满足你的设想，那就去食用代码吧。

字体是代码组成的

文本有代码暗示：text，字体巨细有代码暗示：size，粗细有代码：weight，字间距有代码暗示：tracking……




每一种特技也都有各自的代码，支持参数调理。

比如，瑟瑟发抖叫做 wave，发抖频次用 fps 来调。

只要用这一串代码，便可以把灵动的字体，在 H5 上显现了：

letleon, canvas, ctx;constsw = 800;constsh = 600;constpixelRatio = 2;

functioninit() {canvas = document.('canvas');document.body.(canvas);ctx = canvas.getContext("2d");

canvas.width = sw * pixelRatio;canvas.height = sh * pixelRatio;canvas.style.width = sw + 'px';canvas.style.height = sh + 'px';ctx.scale(pixelRatio, pixelRatio);

leon = newLeonSans({text: 'The quick brownnfox jumps overnthe lazy dog',color: ['#000000'],size: 80,weight: 200});

requestAnimationFrame(animate);}

functionanimate(t) {requestAnimationFrame(animate);

ctx.clearRect(0, 0, sw, sh);

constx = (sw - leon.rect.w) / 2;consty = (sh - leon.rect.h) / 2;leon.position(x, y);

leon.draw(ctx);}

window. = =>{init;};

假如想把天生进程的动画也显现出来，就加一行：

<src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></>GitHub 项目页有个完整列表，各类功用的设备方式都能查到。说不定，排列组合会有欣喜呢。

大师也去玩一波吧。

本文来自 AI 新媒体量子位（ID：QbitAI），作者 栗体，AppSo 经授权公布。