Leon Sans: GitHub 上的一款用代碼寫成的字型

這個字型叫 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(00, 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 項目頁有個完整列表,各種功能的設置方法都能查到。說不定,排列組合會有驚喜呢。

大家也去玩一波吧。

來源:量子位

相關文章