本文轉自量子位，作者栗體

這個字體叫 Leon Sans，表面看去平平無奇。

但事實上，它并不是普通的字體，體內蘊藏著魔力。

Leon Sans 最特別的地方在于，字體是由代碼構成的。有了這些代碼，它可以隨意變身。

比如，在暗夜里閃耀出七色的光影：

比如，在春天里枝繁葉茂，花也開好了：

比如，雨點打在地上匯成了河：

形狀 (Shapes) 、效果 (Effects) 、動畫 (Animations) ，特技豐盛任君選擇。

魔法字體，是名叫 Jongmin Kim 的韓國小伙伴，為了慶祝寶寶Leon降生而設計的，字體取名Leon Sans。

不過，這不是獨樂樂，是普天同慶：代碼開源了，GitHub 已經有 6.9k 星，200+ Fork。

除此之外，有線上 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};

如果想把生成過程的動畫也顯示出來，就加一行TweenMax的庫：

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 上发现了一款骚气满满的字体！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。