我在 GitHub 上发现了一款骚气满满的字体!
公众号关注 “视学算法”
设为 “星标”,每天带你逛 GitHub!
本文转自量子位,作者栗体
这个字体叫 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;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\nfox jumps over\nthe 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};
如果想把生成过程的动画也显示出来,就加一行:
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 上发现了一款骚气满满的字体!
本文转自量子位,作者栗体 这个字体叫 Leon Sans,表面看去平平无奇. 但事实上,它并不是普通的字体,体内蕴藏着魔力. Leon Sans 最特别的地方在于,字体是由代码构成的.有了这些代码,它 ...
- GitHub 这款骚气满满的 Q 版头像生成器,快被网友玩坏了...
公众号关注 "GitHubDaily" 设为 "星标",每天带你逛 GitHub! 大家好,我是小 G. 最近两天,一直在给各位推荐技术相关的开源项目,怕你们编 ...
- 如何在GitHub上发现优秀的开源项目
如何在GitHub上发现优秀的开源项目 如果作为一名程序员,你连GitHub都没有听过或者用过的话,那真是太遗憾了.GitHub的使用可是程序员在职业生涯中的一项必备技能啊,最近在网上搜了一下,发现有 ...
- B 站硬件大佬在 GitHub 上开源了一款神器
转自量子位 野生钢铁侠稚晖君在 GitHub 上开源了一个硬核项目. 上次自制纯手工打造 AI 小电视,播放量就超过 300 万,还登上了 b 站首页. 可能有些朋友对他还有点陌生. 他毕业于电子科大 ...
- B 站硬件大佬又在 GitHub 上开源了一款神器...
公众号关注 "GitHubDaily" 设为 "星标",每天带你逛 GitHub! 转自量子位 这次,野生钢铁侠稚晖君带着他的硬核项目又来了. 上次自制纯手工打 ...
- iframe 返回上一页_寻找高颜值小姐姐难吗!直到我在Github上发现了这个Python库
Python真的是无所不能,有同学说万能的Python,其实就是指的Python的库真的很多很多!坐地铁的时候,经常看到周围人刷抖音的,看短视频.抖音上面的美女小姐姐真的是很多,今天在Github上一 ...
- GitHub 上发现的几个好项目
IPTV IPTV(Internet Protocol Television)即网络协议电视,可通过宽带网络向订阅者推送数字电视节目.直白点说,就是一种可以让你在电脑上看电视的技术. 但是,在你要使用 ...
- 寻找高颜值小姐姐难吗!直到我在Github上发现了这个Python库
Python真的是无所不能,有同学说万能的Python,其实就是指的Python的库真的很多很多!坐地铁的时候,经常看到周围人刷抖音的,看短视频.抖音上面的美女小姐姐真的是很多,今天在Github上一 ...
- 牛逼!有人在 GitHub 上把 Windows 95 做成了一款软件,可玩扫雷和纸牌!
公众号关注 "GitHubDaily" 设为 "星标",每天带你逛 GitHub! 6 秒重温 Windows95 开机画面 "看到 Win95,再看 ...
最新文章
- java 示例_功能Java示例 第5部分–将I / O移到外部
- linux修改文件内容_详解5种实用方法---Linux系统清空或删除大文件内容
- python中的孤儿进程
- 技术人员兼职招聘平台HourlyHerd融资2200万美元C轮融资
- Asp.Net 4.0 SEO增强之UrlRouting
- java文件读写的基本类_java常用工具类(三)—— 文件读取的操作类
- [教程]微信官方开源UI库-WeUI使用方法【申明:来源于网络】
- onvif学习笔记6:onvif的OSD坐标小记
- 工作流牛人 Jan Mendling
- 有谁做过在C# winform里,显示3D max文件的呢?请赐教了。
- matlab生成16进制正弦波表
- tampermonkey 下载
- PIC单片机汇编指令集合
- 新一代报表工具FastReport VCL 6.9发布!
- 功能测试转测试开发的正确姿势
- layer.open(常用)
- 阿里副总裁、达摩院副院长金榕被曝离职!AI科学家集体“逃离“大厂…
- 继承、super、this、抽象类
- 十进制整数,转换成八进制和十六进制数并输出。
- 深入理解C++的动态绑定和静态绑定 1
热门文章
- 【MATLAB】数组运算
- 深圳杯---深圳市生活垃圾处理社会总成本分析
- 迷你世界电锯机器人_迷你世界:三分钟制作超简单飞翔石像机器人报道!
- Python画出心目中的自己
- 让AI训练AI,阿里和浙大的“AI训练师助手”是这样炼成的
- AAAI 2020 | 时间可以是二维的吗?基于二维时间图的视频内容片段检测
- PCA、LDA、MDS、LLE、TSNE等降维算法的Python实现
- 轻松练:如何从900万张图片中对600类照片进行分类|技术头条
- 植树节,程序员要爬哪些“树”?
- 盘点互联网大厂AI战略变迁,开发者将怎样pick前进路线?