這個字型叫 Leon Sans，表面看去平平無奇，但事實上，它並不是普通的字型，體內蘊藏著魔力。
Leon Sans 最特別的地方在於，字型是由代碼構成的。有了這些代碼，它可以隨意變身。比如，在暗夜裡閃耀出七色的光影：
比如，在春天裡枝繁葉茂，花也開好了：
比如，雨點打在地上匯成了河：
形狀 (Shapes) 、效果 (Effects) 、動畫 (Animations) ，特技豐盛任君選擇。
魔法字型，是名叫 Jongmin Kim 的韓國小夥伴，為了慶祝寶寶降生而設計的。不過，這不是獨樂樂，是普天同慶：代碼開源了，GitHub 已經有 7100 星。除此之外，有線上 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
fox jumps over
the 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
來源：量子位
