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

网上骚客 發表於 2020-7-23 19:24:00

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

<section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="font-size: 16px; color: rgba(0, 0, 0, 1); padding: 0 10px; line-height: 1.6; word-spacing: 0; letter-spacing: 0; word-wrap: break-word; text-align: left; margin-top: -10px; font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif"><blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(255, 0, 0, 1); background: rgba(0, 0, 0, 0.05); color: rgba(106, 115, 125, 1); padding: 5px 10px 5px 12px; margin-bottom: 20px; margin-top: 20px">
本文转自量子位，作者栗体，如有侵权，则可删除。
</blockquote>
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/2745efef-b1f6-4792-a201-ddd6d38a92ef.gif"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">github字体</figcaption></figure>
这个字体叫 Leon Sans，表面看去平平无奇。
但事实上，它并不是普通的字体，体内蕴藏着魔力。
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/bb316a70-6a8e-4a93-9cba-6637660235f8.gif"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">github字体1</figcaption></figure>
Leon Sans 最特别的地方在于，字体是由代码构成的。有了这些代码，它可以随意变身。
比如，在暗夜里闪耀出七色的光影：
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/e0d3c84c-4f46-420e-8528-20fc9d6a6b04.gif"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">github字体2</figcaption></figure>
比如，在春天里枝繁叶茂，花也开好了：
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/410587ac-f3a1-4836-9991-34e99e2e8bf6.gif"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">github字体3</figcaption></figure>
比如，雨点打在地上汇成了河：
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/4602b446-f9e8-4cd9-875a-17f7f278b726.gif"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">github字体4</figcaption></figure>
形状 (Shapes) 、效果 (Effects) 、动画 (Animations) ，特技丰盛任君选择。
魔法字体，是名叫 Jongmin Kim 的韩国小伙伴，为了庆祝宝宝降生而设计的。
不过，这不是独乐乐，是普天同庆：代码开源了，GitHub 已经有 6200 星。
除此之外，有线上 Demo 可以玩耍。
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/e2c0f12f-33e1-4148-a738-d93ebc32d743.jpg"></figure>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 20px">都能怎么玩</h3>
最基本的操作，就是改变粗细 (Weight) 。
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/427a3a6c-daa1-49a7-88bd-d5029be19192.gif"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">github字体5</figcaption></figure>
不止给标准字体调粗细，也给炫彩的艺术字调粗细：
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/5835846f-5dfa-4ed2-8669-76f158360f60.gif"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">github字体6</figcaption></figure>
然后，加大一点难度，让字体瑟瑟发抖。就是把线条变得曲折。
稍稍不平整，就会轻微的抖动。剧烈的弯折，就是触电了，烧糊了：
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/e32b072c-062b-49ab-beda-712643b924bf.gif"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">github字体7</figcaption></figure>
拔电，再也不动了。
不过还好，可以顺手把它埋在春天里 (误) ：
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/efaf4043-95c1-4365-b886-d9ba5625e418.gif"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">github字体8</figcaption></figure>
当然，埋法不止这一种。
也可以把字母截断，变成粉红色的 “多米诺骨牌”，每张牌的宽窄还能自由选择：
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/519a58e6-916c-450f-a7e4-deeed324b9d3.gif"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">github字体9</figcaption></figure>
还可以让文字看上去，在平静中流淌：
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/696e9854-f01b-4d05-bb76-8b83b4c3dadc.gif"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">github字体10</figcaption></figure>
线上 Demo 的功能一共十几种，大家也可以自己试一下：
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/37a2d99b-45f6-4765-aaf6-02a820b27c0b.png"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">image</figcaption></figure>
如果，Demo 还不能满足你的想象，那就去食用代码吧：
字体是代码组成的
文本有代码表示：text，字体大小有代码表示：size，粗细有代码：weight，字间距有代码表示：tracking……
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/3d9f8552-54c2-4f67-8f46-1d39000fe395.gif"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">github字体11</figcaption></figure>
另外，每一种特技都有各自的代码，也都有可以调节的参数。
比如，瑟瑟发抖叫做 wave，抖动频率用 fps 来调。
只要用这一串代码，就可以把灵动的字体，在 H5 上显示了：
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch"> 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}; </code></pre>
如果想把生成过程的动画也显示出来，就加一行：
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch">1<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> </code></pre>
GitHub 项目页有个完整列表，各种功能的设置方法都能查到。说不定，排列组合会有惊喜呢。
大家也去玩一波吧。
GitHub 传送门：https://github.com/cmiscm/leonsans
官网传送门：https://leon-kim.com/
<hr data-tool="mdnice编辑器" style="height: 1px; margin: 10px 0; border-top: 1px solid rgba(0, 0, 0, 1); border-right: none; border-bottom: none; border-left: none">
以上，便是今日分享，觉得不错，还请点个赞，谢谢。
<figure data-tool="mdnice编辑器" style="margin: 10px 0"><img src="https://imgkr.cn-bj.ufileos.com/e2c0f12f-33e1-4148-a738-d93ebc32d743.jpg"></figure>
</section>

</div>
<div id="MySignature" role="contentinfo">
AI视频 AI绘画 AI编程 AI数字人综合学习资料https://pan.quark.cn/s/a43dba5a3b8e 
来源：https://www.cnblogs.com/codexs/p/13368201.html

頁: [1]

琼殿技术论坛's Archiver

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