本文轉自量子位，作者栗體，如有侵權，則可刪除。
這個字體叫 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/leonsans
官網傳送門：https://leon-kim.com/
以上，便是今日分享，覺得不錯，還請點個贊，謝謝。