我在 GitHub 上发现了一款骚气满满的字体!

全世界只有3.14 % 的人关注了

爆炸吧知识


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

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

如果想把生成过程的动画也显示出来,就加一行:

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/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/297917.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PHP 接收 UDP包_php只能做网站?基于swoole+websocket开发双向通信应用

前言众所周知&#xff0c;PHP用于开发基于HTTP协议的网站应用非常便捷。而HTTP协议是一种单向的通信协议&#xff0c;只能接收客户端的请求&#xff0c;然后响应请求&#xff0c;不能主动向客户端推送信息。因此&#xff0c;一些实时性要求比较高的应用&#xff0c;如实时聊天、…

OSI模型数据链路层为什么需要分层?

1.何为数据链路层的&#xff08;DATA LINK LAYER&#xff09;的MAC子层和LLC子层&#xff1f; MAC子层的主要功能包括数据帧的封装/卸装&#xff0c;帧的寻址和识别&#xff0c;帧的接收与发送&#xff0c;链路的管理&#xff0c;帧的差错控制等。MAC子层的存在屏蔽了不同物理链…

WPF 实现火炬效果

WPF开发者QQ群&#xff1a; 340500857 | 微信群 -> 进入公众号主页 加入组织欢迎转发、分享、点赞、在看&#xff0c;谢谢~。 01—效果预览02—代码如下一、FireControl.cs 代码如下using System; using System.Collections.Generic; using System.Linq; using System.Tex…

08 comet反向ajax

一&#xff1a;HTTP协议与技久链接分块传输---->反向ajax 反向ajax又叫comet, server push,服务器推技术. 应用范围: 网页聊天服务器,, 新浪微博在线聊天,google mail 网页聊天,都有用到. 原理: 一般而言, HTTP协议的特点, 连接<->断开. 具体什么时间断开? 服务器响应…

男朋友出的性格测试题

1 一家人出去玩了三天&#xff0c;把猫忘在家里了&#xff01;2 嗷呜3 竟然毫无违和感4 叫你一声造句鬼才不过分吧5 秋天原来是这样来的嘛~6 当代嗑cp网友现状5 现在的年轻人都哪里学来的这么多招数内容自沙雕男友的日常你点的每个赞&#xff0c;我都认真当成了喜欢

杂项记录

http://poj.org/ 算法 线性代数 编译原理 算法导论 算法&#xff08;软件设计师教程&#xff09; 《ACM国际大学程序设计竞赛亚洲区预选赛真题题解》转载于:https://www.cnblogs.com/end/archive/2011/10/29/2228940.html

linux连接建立的时间,用timedatectl在Linux中检查当前时区及更改时区(创建符号链接来更改时区)...

本文介绍如何在Linux操作系统中设置或更改时区的方法&#xff0c;可以使用timedatectl&#xff0c;包括通过创建符号链接来更改时区。前言时区是具有相同标准时间的地理区域&#xff0c;通常&#xff0c;时区是在操作系统的安装过程中设置的&#xff0c;但以后可以轻松更改。对…

python能不能自动写代码_微软最强 Python 自动化工具开源了!不用写一行代码

1. 前言最近&#xff0c;微软开源了一款非常强大的 Python 自动化依赖库&#xff1a;playwright-python&#xff0c;它支持主流的浏览器&#xff0c;包含&#xff1a;Chrome、Firefox、Safari、Microsoft Edge 等&#xff0c;同时支持以无头模式、有头模式运行&#xff0c;play…

mapbox 导航_狂甩不掉,骑行最稳手机支架!一体式安装太方便,秒变单车导航仪...

发对于骑行爱好者而言&#xff0c;对手机支架的稳固性有很高的要求&#xff0c;同时支架体积不能太大&#xff0c;对手机本身也要有一定的保护性&#xff0c;手机安放好&#xff0c;骑行才能更自在&#xff01;一个舒适的手机支架&#xff0c;对于业务繁忙或者像小渣一样的路痴…

Docker小白到实战之Docker网络简单了解一下

前言现在对于Docker容器的隔离性都有所了解了&#xff0c;但对容器IP地址的分配、容器间的访问等还是有点小疑问&#xff0c;如果容器的IP由于新启动导致变动&#xff0c;那又怎么才能保证原有业务不会被影响&#xff0c;这就和网络有挂钩了&#xff0c;接下来就大概说说。正文…

(三)java的数据类型

java是一种强类型的语言&#xff0c;所谓强类型&#xff0c;意味着每个变量都要有确定的类型&#xff0c;每个表达式也要有明确的类型&#xff0c;包括传递的某些参数。java中从大的方面分有两大数据类型&#xff0c;分别是基本数据类型和引用数据类型&#xff0c;基本数据类型…

遍历DataTable内存数据的三种方法性能对比

http://www.cnblogs.com/guowei1027/archive/2009/12/15/1624699.html 前几年曾经碰到一个生成递归树形菜单的功能&#xff0c;由于系统比较庞大&#xff0c;有300-400个菜单项&#xff0c;把这些菜单一次性递归加载&#xff0c;的确需要耗费一些时间。 当然若是动态加载什么的…

^_^家园游记^_^

j 你梦想中的家是怎么家的呢&#xff1f; 是鲁宾逊漂流记中那样&#xff1a;一个荒岛&#xff0c;一片青山绿水的悠闲自在&#xff1f; 还是让人流连忘返的色彩斑斓&#xff0c;鳞次栉比&#xff0c;浓浓的欧式典雅&#xff1f; 或是奔放自由的乡村田园&#xff0c;精…

sigar如何获取linux的buffer内存,Linux 下使用Sigar 获取内存信息

上一篇文章介绍了linux下的sigar 库,并使用sigar 库来获取cpu 使用率,本文在这里介绍一下如何使用sigar 库获取内存信息.和cpu 一样,sigar中有和内存相关的结构体sigar_mem_t,我们来看一下结构体原型:typedef struct {sigar_uint64_tram,total,used,free,actual_used,actual_fr…

如何将手机投屏到电脑_手机如何投屏到电脑上?详细教程看这里,手机投屏

手机再大的屏幕&#xff0c;也没有手机投屏到电脑、电视的体验爽。那么哪款投屏软件好用&#xff1f;又如何使用呢&#xff1f;下面小编给大家介绍下金舟苹果手机投屏软件&#xff0c;一起来看看如何将手机投屏到电脑上&#xff0c;详细步骤如下。第一步、首先&#xff0c;在电…

inputstream是否一定要close_汽车加装行李架后,总被交警拦下,类似改装,是否一定要备案...

其实改装不是儿戏&#xff0c;有些部位是一定不能触碰的&#xff0c;汽车“轻改”后担心上路被交警处罚&#xff0c;哪些是不能触碰的“红杠杠”&#xff0c;汽车加装行李架后&#xff0c;总被交警拦下&#xff0c;类似改装&#xff0c;是否一定需要备案&#xff0c;是我们今天…

不好意思,爱因斯坦这次,又对了!

▲ 点击查看在科学界中&#xff0c;有一个非常著名的概念&#xff0c;叫做后设认知。官方解释是&#xff1a;人们是如何对自己的思维模式进行反思。打个简单的比方&#xff1a;你学习或者自己孩子学习的时候&#xff0c;会不会经常出现一道数学题反复做错的情况&#xff0c;明明…

如何正确处理 .NET 文件的 `File in use by another process` 异常 ?

咨询区 Dawsy&#xff1a;我的项目中有一个需求&#xff0c;它需要不断的访问一个文件&#xff0c;很多时候这个访问逻辑都是正常的&#xff0c;但有时候访问太快&#xff0c;会抛出如下异常&#xff1a;"File in use by another process"为了能找到其解决方案&#…

live555学习笔记7-RTP打包与发送

七 RTP打包与发送rtp传送开始于函数&#xff1a;MediaSink::startPlaying()。想想也有道理&#xff0c;应是sink跟source要数据&#xff0c;所以从sink上调用startplaying&#xff08;嘿嘿&#xff0c;相当于directshow的拉模式&#xff09;。看一下这个函数&#xff1a;Boole…

ASCII 说明

Bin Dec Hex 缩写/字符 解释 0000 0000 0 00 NUL(null) 空字符 0000 0001 1 01 SOH(start of handing) 标题开始 0000 0010 2 02 STX (start of text) 正文开始 0000 0011 3 03 ETX(end of text) 正文结束 0000 0100 4 04 EOT(end of transm…