`

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

阅读更多

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

github字体github字体

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

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

github字体1github字体1

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

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

github字体2github字体2

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

github字体3github字体3

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

github字体4github字体4

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

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

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

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

都能怎么玩

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

github字体5github字体5

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

github字体6github字体6

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

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

github字体7github字体7

拔电,再也不动了。

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

github字体8github字体8

当然,埋法不止这一种。

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

github字体9github字体9

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

github字体10github字体10

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

imageimage

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

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

github字体11github字体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(00, 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 上标星 115k+ 的 Java 教程

    GitHub 上标星 115k+ 的 Java 教程 GitHub 上标星 115k+ 的 Java 教程 GitHub 上标星 115k+ 的 Java 教程 GitHub 上标星 115k+ 的 Java 教程 GitHub 上标星 115k+ 的 Java 教程 GitHub 上标星 115k+ 的 Java 教程 ...

    GitHub字体图标Octicons.zip

    Octicons 是用在 GitHub 上的图标字体。

    如何在github上下载开源代码

    gitHub是全球大型的开源社区之一,它提供了一个线上的代码托管服务,所以很多开源代码都会被托管到gitHub上。如果作为新时代的码农不知道这个就相当low了。 如果我们只是需要浏览或者下载源码的话,是不需要注册账户的...

    在GitHub上写的第一个JAVA小练习:模拟枪战游戏对战场景.zip

    在GitHub上写的第一个JAVA小练习:模拟枪战游戏对战场景 在GitHub上写的第一个JAVA小练习:模拟枪战游戏对战场景 在GitHub上写的第一个JAVA小练习:模拟枪战游戏对战场景 在GitHub上写的第一个JAVA小练习:模拟枪战...

    GitHub 读取jupyter报错Sorry, something went wrong. Reload?

    GitHub 读取jupyter报错Sorry, something went wrong. Reload?

    go github(使用github)

    创建项目仓库(repository)是第一步,之后用户可以将本地的Git仓库推送到GitHub上,或者从GitHub上克隆(clone)仓库到本地。 项目托管是GitHub的核心功能之一。用户可以创建公开或者私有的仓库来管理自己的项目。...

    GitHub 客户端

    这一步骤通常包括在 GitHub 网站上创建仓库,然后在客户端中添加远程仓库。 2. **克隆仓库**:如果你需要参与一个已存在的项目,可以通过克隆操作将远程仓库下载到本地。这样,你就可以在本地编辑代码,然后将更改...

    GITHUB镜像网站表

    表格中的几个网站是github的同步镜像网站,均从网络搜集。下面是镜像网站的优点: 一:速度快,能节省打开github网页的时间和下载程序资源的时间。 二:同步性高,提供几乎和github官网一样的内容。 三:部分网站已...

    jenkins_github_drupal, 在Github上,通过一个新的拉请求创建一个Drupal站点.zip

    jenkins_github_drupal, 在Github上,通过一个新的拉请求创建一个Drupal站点 概述你是否构建Drupal站点? 你是否使用GitHub来管理这些项目的代码? 你使用Jenkins自动化 持续集成? 那么你应该做所有这些事情 ! ...

    GitHub桌面版安装包

    GitHub Desktop是一款官方推出的图形化客户端工具,它简化了在GitHub上进行版本控制和协作的过程,尤其适合初学者和那些喜欢直观操作界面的用户。本压缩包包含的是GitHub Desktop的安装程序,它允许用户在Windows...

    如何在github上传代码(图解)

    ### 如何在GitHub上传代码(图文详解) #### 创建GitHub账户 - **前提条件**:拥有一个可用的电子邮箱地址。 #### 安装Git客户端 - **下载与安装**:访问官方下载页面([http://git-scm.com/downloads]...

    github 使用指南 官方中文

    1. **仓库(Repository)**:在 GitHub 上,你的项目就是一个仓库,它包含了所有的源代码、版本历史、问题追踪以及项目文档。 2. **分支(Branch)**:仓库中的工作副本,允许你在不影响主分支的情况下进行开发和实验。...

    GitHub Android App源码

    GitHub Android App 是一个官方出品的应用程序,允许用户在移动设备上无缝地浏览、管理以及协作开发GitHub上的项目。这款应用的源码是公开的,对于Android开发者而言,它是一个宝贵的资源,可以学习到GitHub客户端...

    GitHubDesktop2.5.0.zip

    因为在网上逛了一天,也没有找到心仪的安装包(重要是要付费的资源),所以嘛,自己动手丰衣足食! 顺便说明一下,小伙伴们,可以在安装后,把整个文件夹拷贝。(路径:C:\Users\[自己的用户名]\AppData\Local\...

    github上关于PyQt5的各种各样的demo,方便学习

    PyQt5是一款强大的Python图形用户界面(GUI)库,它基于Qt框架,允许开发者创建功能丰富的桌面应用程序。在GitHub上,有许多关于PyQt5的示例项目,这些demo旨在帮助初学者快速上手并理解PyQt5的工作原理,同时也为...

    Github使用教程.zip_zip压缩包

    Github使用教程.zip 身为程序员,怎么能不会使用github呢

    【最新版】Refined-GitHub-for-Safari.zip【亲测可用】最好的Github扩展的Safari版本

    【最新版】Refined-GitHub-for-Safari.zip是一款专为Safari浏览器设计的优化工具,旨在提升用户在GitHub上的浏览体验。这款扩展是经过精心打磨的,特别强调了其在Safari上的适用性和可用性,确保用户在Mac OS操作...

    GitHubDesktop(GitHub Win桌面版)离线安装包

    GitHub Desktop 是 GitHub 为开发者提供的一款跨平台的开源版本控制系统客户端,它简化了Git的使用流程,使得在Windows操作系统上管理Git仓库变得更加直观和便捷。本文将深入介绍GitHub Desktop及其最新版v3.3.4.0的...

    github 客户端

    **GitHub 客户端** GitHub 是全球最大的开源代码托管平台,它不仅提供了在线代码仓库服务,还有一款名为 GitHub Desktop 的客户端...如果你经常在 GitHub 上进行项目开发,那么 GitHub Desktop 客户端绝对值得一试。

    5个好玩的github游戏区开源项目

    对于游戏爱好者来说,GitHub 上有许多有趣的开源游戏项目,能够让我们深入了解游戏开发的过程,甚至参与其中。以下是五个涵盖 C++, Java, JavaScript 和 Rust 语言的开源游戏项目,它们不仅好玩,还能帮助我们提升...

Global site tag (gtag.js) - Google Analytics