Leon Sans 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Leon Sans 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Leon Sans 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Leon Sans 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Leon Sans 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 其他开源开源字体
开发厂商
地区 不详
提 交 者 threeC
适用人群 未知
收录时间 2019-10-24

软件简介

Leon Sans 是一种几何无衬线字体,表面看去平平无奇,但最特别的地方在于,字体是由代码构成的。有了这些代码,它可以随意变身。它允许动态更改字体粗细,并在 HTML 5 的画布元素中创建自定义动画、效果或形状。

动态更改粗细:

五彩缤纷(给炫彩的艺术字调粗细):

妙笔生花:

字如雨下:

字体抖动:

线上 Demo 的功能一共十几种。文本由代码表示:text,字体大小有代码表示:size,粗细有代码:weight,字间距有代码表示:tracking......

另外,每一种特效都有各自的代码,也都有可以调节的参数。比如,瑟瑟发抖叫做 wave,抖动频率用 fps 来调。

只要用这一串代码,就可以把灵动的字体,在 H5 上显示了:

let leon, canvas, ctx;

const sw = 800;
const sh = 600;
const pixelRatio = 2;

function init() {
    canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");

    canvas.width = sw * pixelRatio;
    canvas.height = sh * pixelRatio;
    canvas.style.width = sw + 'px';
    canvas.style.height = sh + 'px';
    ctx.scale(pixelRatio, pixelRatio);

    leon = new LeonSans({
        text: 'The quick brown\nfox jumps over\nthe lazy dog',
        color: ['#000000'],
        size: 80,
        weight: 200
    });

    requestAnimationFrame(animate);
}

function animate(t) {
    requestAnimationFrame(animate);

    ctx.clearRect(0, 0, sw, sh);

    const x = (sw - leon.rect.w) / 2;
    const y = (sh - leon.rect.h) / 2;
    leon.position(x, y);

    leon.draw(ctx);
}

window.onload = () => {
    init();
};

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (2)

加载中
不支持中文的
2020/12/23 14:57
回复
举报
试了两个字体,发现不支持中文
2020/10/12 17:49
回复
举报
更多评论
暂无内容
发表了博客
2020/11/28 22:11

和leon一起学Vim

为何学vim? 所有的UnixLike系统都会内建vi文书编辑器,其他的文书编辑器则不一定会存在。 但是目前我们使用比较多的是vim编辑器。vim具有程序编辑的能力,可以主动的以字体颜色辨别语法的正确性,方便程序设计。 什么是vim? Vim是从vi发展出来的一个文本编辑器。代码补完、编译及错误跳转等方便编程的功能特别丰富,在...

0
0
2020/12/22 18:43

Avery-其他包装-Leon Avery

Avery-其他包装-Leon Avery 发布:2020-12-22 18:43:46.589444 作者:Leon Avery ### 作者邮箱:lavery3@vcu.edu ### 首页:https://pypi.python.org/pypi/Avery ### 文档:None ### 下载链接 UNKNOWN This is a c......

0
0
2020/12/23 11:56

clapperboard-命令行快板-Santiago de Leon Sync Crop

clapperboard-命令行快板-Santiago de Leon 发布:2020-12-23 11:56:56.016008 作者:Santiago de Leon 作者邮箱:sdeleon28@gmail.com 首页:https://github.com/sdeleon28/clapperboard 文档:None 下载链接 https:......

0
0
2020/12/22 15:42

alem-A revision wrapper of alembic-Leon Huayra

alem-A revision wrapper of alembic-Leon Huayra 发布:2020-12-22 15:42:18.499157 作者:Leon Huayra ### 作者邮箱:hffilwlqm@gmail.com ### 首页:https://github.com/Asphaltt/alem.py ### 文档:None ### 下......

0
0
发表了博客
2020/11/28 22:11

和Leon一起从头学Git(六)

一、什么是Github? github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就是代码要公开。 Github由ChrisWanstrath,PJHyett与TomPreston-Werner三位开发者在2008年4月创办。迄今拥有59名全职员工,主要提供基于git的版本托管服务。 正是Github,让协作化编程成为现实。...

0
0
发表了博客
2020/11/28 22:11

和Leon一起从头学Git(五)

一、提交历史 在使用Git提交了若干更新之后,又或者克隆了某个项目,想回顾下提交历史,我们可以使用gitlog命令查看。 命令格式:git log 举例使用gitlog命令列出历史提交记录如下: $gitlog commit88afe0e02adcdfea6844bb627de97da21eb10af1 Merge:14b4dcad7e7346 Author:Leon1023<liangzc1124@163.com> Date:SunMar11...

0
0
发表了博客
2020/11/28 22:12

和Leon一起从头学Git(四)

Git 分支管理 几乎每一种版本控制系统都以某种形式支持分支。使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同时继续工作。 有人把 Git 的分支模型称为"必杀技特性",而正是因为它,将 Git 从版本控制系统家族里区分出来。 1、列出分支 命令格式: git branch 没有参数时,git branch 会列出你在本地的分...

0
0
发表了博客
2020/11/28 22:12

和Leon一起从头学Git(一)

一、Git 的安装与配置 Git 目前支持 Linux/Unix、Solaris、Mac和 Windows 平台上运行。 Git 各平台安装包下载地址为:http://git-scm.com/downloads 1、Linux 平台上安装 Git 的工作需要调用 curl,zlib,openssl,expat,libiconv 等库的代码,所以需要先安装这些依赖工具。不同的Linux发行版使用的包管理工具不一,下面...

0
0
发表了博客
2020/11/28 22:11

和Leon一起从头学Git(二)

一、使用Git的一般情景 从远程库repo克隆Git项目资源作为工作目录。 在克隆的资源上添加或修改文件。 如果其他人修改了,你可以更新资源。 在提交前查看修改。 提交修改。 在修改完成后,如果发现错误,可以撤回提交并再次修改并提交。 图片发自简书App 二、创建Git仓库 1、使用已有目录作为Git仓库 使用方法 使用当前目...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
2 评论
21 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部