共计 1679 个字符，预计需要花费 5 分钟才能阅读完成。
本文转自量子位，作者栗体，如有侵权，则可删除。
这个字体叫 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");
11
12 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);
17
18 leon = new LeonSans({
19 text: 'The quick brown\nfox jumps over\nthe lazy dog',
20 color: ['#000000'],
21 size: 80,
22 weight: 200
23 });
24
25 requestAnimationFrame(animate);
26}
27
28function animate(t) {29 requestAnimationFrame(animate);
30
31 ctx.clearRect(0, 0, sw, sh);
32
33 const x = (sw - leon.rect.w) / 2;
34 const y = (sh - leon.rect.h) / 2;
35 leon.position(x, y);
36
37 leon.draw(ctx);
38}
39
40window.onload = () => {41 init();
42};如果想把生成过程的动画也显示进去，就加一行：
1<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>GitHub 我的项目页有个残缺列表，各种性能的设置办法都能查到。说不定，排列组合会有惊喜呢。
大家也去玩一波吧。
GitHub 传送门：https://github.com/cmiscm/leo…
官网传送门：https://leon-kim.com/
以上，便是今日分享，感觉不错，还请点个赞，谢谢。