欢迎您,请 登录 或 立即注册

同城信息网

搜索
热搜: 活动 交友
查看: 2276|回复: 0
收起左侧

设想必备!这能够是你见过最好玩的字体(附免费下载)

[复制链接]

6881

主题

456

回帖

7357

积分

超级版主

Rank: 8Rank: 8

积分
7357
发表于 2019-11-3 18:33:54 | 显示全部楼层 |阅读模式 |北京市 北京百度网讯科技有限公司BGP节点
这个字体叫 Leon Sans,概况看去平平无奇。

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

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

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

s1.gif


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

s2.gif


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

s3.gif


外形 (Shapes) 、结果 (Effects) 、动画 (Animations) ,特技丰厚任君挑选。

魔法字体,是名叫 Jongmin Kim 的韩国小伙伴,为了庆贺宝宝出世而设想的。不外,这不是独乐乐,是率土同庆:由于代码开源了,GitHub 已经有 6200 星。

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

都能怎样玩

最根基的操纵,就是改变粗细 (Weight) 。

s4.gif


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

s5.gif


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

稍略不服整,就会稍微的发抖。剧烈的弯折,就是触电了,烧糊了:

s6.gif


拔电,再也不动了。

不外还好,可以随手把它埋在春季里 (误) :

s7.gif


固然,埋法不止这一种。

也可以把字母截断,酿成粉红色的「多米诺骨牌」,每张牌的宽窄还能自在挑选:

s8.gif


还可以让笔墨看上去,在安静中流淌:

s9.gif


线上 Demo 的功用一共十几种,大师也可以自行实验。假如 Demo 还不能满足你的设想,那就去食用代码吧。

字体是代码组成的

文本有代码暗示:text,字体巨细有代码暗示:size,粗细有代码:weight,字间距有代码暗示:tracking……

s10.gif


每一种特技也都有各自的代码,支持参数调理。

比如,瑟瑟发抖叫做 wave,发抖频次用 fps 来调。

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

letleon, canvas, ctx;constsw = 800;constsh = 600;constpixelRatio = 2;

functioninit() {canvas = document.('canvas');document.body.(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 = newLeonSans({text: 'The quick brownnfox jumps overnthe lazy dog',color: ['#000000'],size: 80,weight: 200});

requestAnimationFrame(animate);}

functionanimate(t) {requestAnimationFrame(animate);

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

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

leon.draw(ctx);}

window. = =>{init;};

假如想把天生进程的动画也显现出来,就加一行:

<src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></>GitHub 项目页有个完整列表,各类功用的设备方式都能查到。说不定,排列组合会有欣喜呢。

大师也去玩一波吧。

本文来自 AI 新媒体量子位(ID:QbitAI),作者 栗体,AppSo 经授权公布。




上一篇:玩游戏的老人们
下一篇:你会怎么度过每个周末?
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

 
在线客服
点击这里给我发消息 点击这里给我发消息 点击这里给我发消息

扫码小程序,到平台发布信息。
快速回复 返回顶部 返回列表