快捷搜索:  汽车  科技

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)魔法字体,是名叫 Jongmin Kim 的韩国小伙伴,为了庆祝宝宝降生而设计的。形状 (Shapes) 、效果 (Effects) 、动画 (Animations) ,特技丰盛任君选择。比如,在暗夜里闪耀出七色的光影:比如,在春天里枝繁叶茂,花也开好了:比如,雨点打在地上汇成了河:

转自:量子位,作者:栗体

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)(1)

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

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

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)(2)

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

比如,在暗夜里闪耀出七色的光影:

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)(3)

比如,在春天里枝繁叶茂,花也开好了:

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)(4)

比如,雨点打在地上汇成了河:

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)(5)

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

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

不过,这不是独乐乐,是普天同庆:代码开源了,GitHub 已经有 7100 星

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

都能怎么玩

最基本的操作,就是改变粗细 (weight) 。

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)(6)

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

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)(7)

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

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

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)(8)

拔电,再也不动了。

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

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)(9)

当然,埋法不止这一种。

也可以把字母截断,变成粉红色的 “多米诺骨牌”,每张牌的宽窄还能自由选择:

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)(10)

还可以让文字看上去,在平静中流淌:

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)(11)

线上 Demo 的功能一共十几种,大家也可以自己试一下:

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)(12)

如果,Demo 还不能满足你的想象,那就去食用代码吧:

字体是代码组成的

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

开源字体哪里找(我在GitHub上发现了一款骚气满满的字体)(13)

另外,每一种特技都有各自的代码,也都有可以调节的参数。

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

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

如果想把生成过程的动画也显示出来,就加一行:1<script src="https://img.aigexing.comhttps://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

GitHub 项目页有个完整列表,各种功能的设置方法都能查到。说不定,排列组合会有惊喜呢。

大家也去玩一波吧。

  • GitHub :https://github.com/cmiscm/leonsans
  • 官网传送门:https://leon-kim.com/

猜您喜欢: