干货|我在 GitHub 上发现了一款骚气满满的字体!
本文转自量子位,作者栗体
这个字体叫 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;23const sw = 800;4const sh = 600;5const pixelRatio = 2;67function 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};
如果想把生成过程的动画也显示出来,就加一行TweenMax的库:
1<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/
目前尚不支持中文字体:(
#专注技术人的成长#
干货|我在 GitHub 上发现了一款骚气满满的字体!相关推荐
- 我在 GitHub 上发现了一款骚气满满的字体!
公众号关注 "视学算法" 设为 "星标",每天带你逛 GitHub! 本文转自量子位,作者栗体 这个字体叫 Leon Sans,表面看去平平无奇. 但事实上,它 ...
- GitHub 这款骚气满满的 Q 版头像生成器,快被网友玩坏了...
公众号关注 "GitHubDaily" 设为 "星标",每天带你逛 GitHub! 大家好,我是小 G. 最近两天,一直在给各位推荐技术相关的开源项目,怕你们编 ...
- 如何在GitHub上发现优秀的开源项目
如何在GitHub上发现优秀的开源项目 如果作为一名程序员,你连GitHub都没有听过或者用过的话,那真是太遗憾了.GitHub的使用可是程序员在职业生涯中的一项必备技能啊,最近在网上搜了一下,发现有 ...
- iframe 返回上一页_寻找高颜值小姐姐难吗!直到我在Github上发现了这个Python库
Python真的是无所不能,有同学说万能的Python,其实就是指的Python的库真的很多很多!坐地铁的时候,经常看到周围人刷抖音的,看短视频.抖音上面的美女小姐姐真的是很多,今天在Github上一 ...
- 寻找高颜值小姐姐难吗!直到我在Github上发现了这个Python库
Python真的是无所不能,有同学说万能的Python,其实就是指的Python的库真的很多很多!坐地铁的时候,经常看到周围人刷抖音的,看短视频.抖音上面的美女小姐姐真的是很多,今天在Github上一 ...
- GitHub 上发现的几个好项目
IPTV IPTV(Internet Protocol Television)即网络协议电视,可通过宽带网络向订阅者推送数字电视节目.直白点说,就是一种可以让你在电脑上看电视的技术. 但是,在你要使用 ...
- B 站硬件大佬在 GitHub 上开源了一款神器
转自量子位 野生钢铁侠稚晖君在 GitHub 上开源了一个硬核项目. 上次自制纯手工打造 AI 小电视,播放量就超过 300 万,还登上了 b 站首页. 可能有些朋友对他还有点陌生. 他毕业于电子科大 ...
- B 站硬件大佬又在 GitHub 上开源了一款神器...
公众号关注 "GitHubDaily" 设为 "星标",每天带你逛 GitHub! 转自量子位 这次,野生钢铁侠稚晖君带着他的硬核项目又来了. 上次自制纯手工打 ...
- GitHub 上有什么好玩的项目?(附地址)
来源:GitHubDaily 本文约1200字,建议阅读5分钟. 本文为你整理并推荐GitHub上比较好玩的项目. 上个月有水友私信问我,GitHub 上有没有比较好玩的项目可以推荐?我跟他说:&qu ...
最新文章
- TensorFlow(9)(项目)人马图像分类(卷积神经网络)
- php的PDO手记1
- No plugin found for prefix ‘compile‘ in the current project
- 我国是世界最大石油进口国,但是大家知道从哪些国家进口吗?
- oracle最快访问行,Oracle技术网—在Oracle快速进行数据行存在性检查
- 互联网晚报 | 3月15日 星期二 |​ 特斯拉Model 3高性能版和Model Y长续版再涨价;字节成都成立光合科技公司...
- Spring Security记住我功能之潜在的账号盗取风险
- 透视前端工程化之 Webpack 基本介绍【文末有彩蛋~】
- 【Linux开发】linux设备驱动归纳总结(八):3.设备管理的分层与面向对象思想...
- NUC980开发板Linux系统EC20模块 移植 串口 PPP拨号
- 对Python中yield的理解
- dos批处理命令注释_如何在批处理文件MS-DOS中写注释块?
- clickhouse索引原理介绍
- 《Qt5 Cadaques》学习笔记(六):QT QUICK Controls 2
- 挂耳式骨传导蓝牙耳机,2021骨传导耳机推荐
- css让背景颜色与背景图片同时显示
- Win10如何用cmd或者Powershell批量安装字体
- 如何去掉行首行尾的空格
- 公司mysql试题及答案_MySQL初级考试试题及答案
- 苹果5概念机_iPhone 11概念图层出不穷!投影仪+平行三摄,不同以往!
热门文章
- 数字图像处理:图像平均/加法_OPT小讲堂 ∣ SciSmart图像增强之二值化
- int型 判断奇偶_905. 按奇偶排序数组
- 君威u0073故障码解决_格力多联机同时报三个故障“U2”“L0”“d9”怎么修?
- 算法题2 插序算法
- 数据结构之栈的应用:括号匹配问题
- 数据结构之排序算法:基数排序
- 1-1:学习shell之shell是什么
- kvm迁移镜像启动报错(the CPU is incompatible with host CPU: Host CPU does not provide required features: fma)
- mysql除法运算保留小数的用法
- 数据结构与算法:动态数组(利用万能指针实现任意类型数组操作)