干货|我在 GitHub 上发现了一款骚气满满的字体！

查看原文

其他

干货|我在 GitHub 上发现了一款骚气满满的字体！

栗体@量子位中生代技术 2021-08-09

本文转自量子位，作者栗体

这个字体叫 Leon Sans，表面看去平平无奇。

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

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

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

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

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

形状 (Shapes) 、效果 (Effects) 、动画 (Animations) ，特技丰盛任君选择。

魔法字体，是名叫 Jongmin Kim 的韩国小伙伴，为了庆祝宝宝Leon降生而设计的，字体取名Leon Sans。

不过，这不是独乐乐，是普天同庆：代码开源了，GitHub 已经有 6.9k 星，200+ Fork。

除此之外，有线上 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};