宿州网站建设推广,卖芒果的网络营销策划,网页设计介绍说明,建设一个网站的费用全世界只有3.14 % 的人关注了爆炸吧知识转自#xff1a;量子位#xff0c;作者#xff1a;栗体这个字体叫 Leon Sans#xff0c;表面看去平平无奇。但事实上#xff0c;它并不是普通的字体#xff0c;体内蕴藏着魔力。Leon Sans 最特别的地方在于#xff0c;字体是由代码… 全世界只有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};如果想把生成过程的动画也显示出来就加一行1script srchttps://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js/scriptGitHub 项目页有个完整列表各种功能的设置方法都能查到。说不定排列组合会有惊喜呢。大家也去玩一波吧。GitHub https://github.com/cmiscm/leonsans官网传送门https://leon-kim.com/
