# GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了

- 作者：量子位
- 发布时间：2019-10-29 14:07
- 分类：软件
- 原文：https://www.ifanr.com/1274457

![](https://s3.ifanr.com/wp-content/uploads/2019/10/12-2.gif)

> [本文](https://mp.weixin.qq.com/s/vEbTP1SDP3GW20XAP825jw)来自 量子位（ID：QbitAI），作者 栗体，AppSo 经授权发布。

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

![](https://s3.ifanr.com/wp-content/uploads/2019/10/6400.gif)

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

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

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

![](https://s3.ifanr.com/wp-content/uploads/2019/10/640-2.gif)

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

![](https://s3.ifanr.com/wp-content/uploads/2019/10/1-7.gif)

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

![GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了](https://s3.ifanr.com/wp-content/uploads/2019/10/imported-1274457-1572250118.gif "GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了")

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

魔法字体，是名叫 Jongmin Kim 的韩国小伙伴，为了庆祝宝宝降生而设计的。不过，这不是独乐乐，是普天同庆：因为代码开源了，GitHub 已经有 6200 星。

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

## 都能怎么玩

最基本的操作，就是改变粗细 (Weight) 。

![GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了](https://s3.ifanr.com/wp-content/uploads/2019/10/imported-1274457-1572250126.gif "GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了")

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

![GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了](https://s3.ifanr.com/wp-content/uploads/2019/10/imported-1274457-1572250166.gif "GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了")

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

稍稍不平整，就会轻微的抖动。剧烈的弯折，就是触电了，烧糊了：

![GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了](https://s3.ifanr.com/wp-content/uploads/2019/10/imported-1274457-1572250207.gif "GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了")

拔电，再也不动了。

不过还好，可以顺手把它埋在春天里 (误) ：

![GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了](https://s3.ifanr.com/wp-content/uploads/2019/10/imported-1274457-1572250217.gif "GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了")

当然，埋法不止这一种。

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

![GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了](https://s3.ifanr.com/wp-content/uploads/2019/10/imported-1274457-1572250249.gif "GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了")

还可以让文字看上去，在平静中流淌：

![GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了](https://s3.ifanr.com/wp-content/uploads/2019/10/imported-1274457-1572250273.gif "GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了")

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

## 字体是代码组成的

文本有代码表示：text，字体大小有代码表示：size，粗细有代码：weight，字间距有代码表示：tracking……

![GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了](https://s3.ifanr.com/wp-content/uploads/2019/10/imported-1274457-1572250340.gif "GitHub标星6200：一种字体，变成千姿百态艺术字，可尖可圆可开花，隔壁设计师馋哭了")

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

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

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

```
let leon, canvas, ctx;

const sw = 800;
const sh = 600;
const pixelRatio = 2;

function init() {
    canvas = document.createElement('canvas');
    document.body.appendChild(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 = new LeonSans({
        text: 'The quick brown\nfox jumps over\nthe lazy dog',
        color: ['#000000'],
        size: 80,
        weight: 200
    });

    requestAnimationFrame(animate);
}

function animate(t) {
    requestAnimationFrame(animate);

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

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

    leon.draw(ctx);
}

window.onload = () => {
    init();
};

```

如果想把生成过程的动画也显示出来，就加一行：

```
<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/>