GitHub标星6200：一种字体，变成千姿百态艺术字，设计师馋哭了

本文经AI新媒体量子位（公家号ID:QbitAI）授权转载，转载请接洽出处。

这个字体叫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 brownnfox jumps overnthe 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}; 

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!