本文转自量子位,作者栗体,如有侵权,则可删除。


github字体

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

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


github字体1

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

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


github字体2

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


github字体3

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


github字体4

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

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

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

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

都能怎么玩

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


github字体5

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


github字体6

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

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


github字体7

拔电,再也不动了。

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


github字体8

当然,埋法不止这一种。

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


github字体9

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


github字体10

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


image

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

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


github字体11

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

比如,瑟瑟发抖叫做 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 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 上发现了一款骚气满满的字体!的更多相关文章

  1. 如何在 Github 上发现优秀的开源项目?

    之前发过一系列有关 GitHub 的文章,有同学问了,GitHub 我大概了解了,Git 也差不多会使用了,但是还是搞不清 GitHub 如何帮助我的工作,怎么提升我的工作效率? 问到点子上了,Git ...

  2. 【转载】如何在 Github 上发现优秀的开源项目?

    之前发过一系列有关 GitHub 的文章,有同学问了,GitHub 我大概了解了,Git 也差不多会使用了,但是还是搞不清 GitHub 如何帮助我的工作,怎么提升我的工作效率? 问到点子上了,Git ...

  3. (转载)如何在 Github 上发现优秀的开源项目?

    转载自:传送门 之前发过一系列有关 GitHub 的文章,有同学问了,GitHub 我大概了解了,Git 也差不多会使用了,但是还是搞不清 GitHub 如何帮助我的工作,怎么提升我的工作效率? 问到 ...

  4. Github上关于iOS的各种开源项目集合(强烈建议大家收藏,查看,总有一款你需要)

    下拉刷新 EGOTableViewPullRefresh - 最早的下拉刷新控件. SVPullToRefresh - 下拉刷新控件. MJRefresh - 仅需一行代码就可以为UITableVie ...

  5. GitHub 上的十一款热门开源安全工具

    作为开源开发领域的基石,“所有漏洞皆属浅表”已经成为一条著名的原则甚至是信条.作为广为人知的Linus定律,当讨论开源模式在安全方面的优势时,开放代码能够提高项目漏洞检测效率的理论也被IT专业人士们所 ...

  6. GitHub 上 10 款免费开源 Windows 工具

    GitHub 上 10 款免费开源 Windows 工具 GitHub 是如今所有开源事物的中央仓库, 这个网站最近发布了一个叫做<2016 Octoverse  状态报告>,详细列出了从 ...

  7. 28款GitHub最流行的开源机器学习项目,推荐GitHub上10 个开源深度学习框架

    20 个顶尖的 Python 机器学习开源项目 机器学习 2015-06-08 22:44:30 发布 您的评价: 0.0 收藏 1收藏 我们在Github上的贡献者和提交者之中检查了用Python语 ...

  8. GitHub 上 57 款最流行的开源深度学习项目

    转载:https://www.oschina.net/news/79500/57-most-popular-deep-learning-project-at-github GitHub 上 57 款最 ...

  9. 【转】10款GitHub上最火爆的国产开源项目

    将开源做到极致,提高效率方便更多用户 接触开源时间虽然比较短但是后续会努力为开源社区贡献自己微薄的力量 衡量一个开源产品好不好,看看产品在 GitHub 的 Star 数量就知道了.由此可见,GitH ...

随机推荐

  1. 一起玩转微服务(12)——揭密starter

    介绍 Spring Boot的starter主要用来简化依赖用的,对于企业级开发中的与第三方的集成,可以通过一段简单的配置来完成,这样开发人员无需再对包依赖的问题头疼.Spring Boot为我们提供 ...

  2. linux 在指定文件夹下查找指定字符

    grep -r '119090610015743205' /data/html/www/gap_bz_middleware/storage/apiLogs/

  3. 入门大数据---Flume 简介及基本使用

    一.Flume简介 Apache Flume 是一个分布式,高可用的数据收集系统.它可以从不同的数据源收集数据,经过聚合后发送到存储系统中,通常用于日志数据的收集.Flume 分为 NG 和 OG ( ...

  4. webpack4.X + react-router 路由跳转

    webpack4.X  react-router 环境准备工作:windows7.webStorm 2017.1.4.Nodejs 8.7.0.npm 5.4.2 PS:安装的时我们都带上版本,这样即 ...

  5. navicat连接vagrant中的数据库

  6. Layer 3.0

    https://jeesite.gitee.io/front/layer/3.0/layer.layui.com/index.html

  7. iOS应用千万级架构开篇

    一款好的APP架构,是需要适应复杂的业务场景的.当然它也是可以监控的,比如性能.卡顿等.你写的每一行代码,测试都可以查看到,并测试覆盖到. 一直很想分享一下,一个大型的APP都做了些什么事情,这些事情 ...

  8. html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  9. 二、kafka 中央控制器、主题、分区、副本

    集群和中央控制器 一个独立的Kafka服务器被称为broker.broker用来接收来自生产者的消息,为消息设置偏移量,并把消息保存到磁盘.换句话说,多个kafka实例组成kafka集群,每个实例(s ...

  10. scala 数据结构(六):映射 Map

    1 映射 Map-基本介绍 Scala中的Map介绍 1) Scala中的Map 和Java类似,也是一个散列表,它存储的内容也是键值对(key-value)映射,Scala中不可变的Map是有序的, ...