GitHub 標星 6200:一種字體,變成千姿百態藝術字,可尖可圓可開花,隔壁設計師饞哭了

軟件

10-29 14:07

本文來自 量子位(ID:QbitAI),作者 栗體,AppSo 經授權發布。

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

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

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

比如,在暗夜里閃耀出七色的光影:

比如,在春天里枝繁葉茂,花也開好了:

比如,雨點打在地上匯成了河:

GitHub標星6200:一種字體,變成千姿百態藝術字,可尖可圓可開花,隔壁設計師饞哭了

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

魔法字體,是名叫 Jongmin Kim 的韓國小伙伴,為了慶祝寶寶降生而設計的。不過,這不是獨樂樂,是普天同慶:因為代碼開源了,GitHub 已經有 6200 星。

除此之外,還有線上 Demo 可以玩耍。

都能怎么玩

最基本的操作,就是改變粗細 (Weight) 。

GitHub標星6200:一種字體,變成千姿百態藝術字,可尖可圓可開花,隔壁設計師饞哭了

不止給標準字體調粗細,也給炫彩的藝術字調粗細:

GitHub標星6200:一種字體,變成千姿百態藝術字,可尖可圓可開花,隔壁設計師饞哭了

然后,加大一點難度,讓字體瑟瑟發抖。就是把線條變得曲折。

稍稍不平整,就會輕微的抖動。劇烈的彎折,就是觸電了,燒糊了:

GitHub標星6200:一種字體,變成千姿百態藝術字,可尖可圓可開花,隔壁設計師饞哭了

拔電,再也不動了。

不過還好,可以順手把它埋在春天里 (誤) :

GitHub標星6200:一種字體,變成千姿百態藝術字,可尖可圓可開花,隔壁設計師饞哭了

當然,埋法不止這一種。

也可以把字母截斷,變成粉紅色的「多米諾骨牌」,每張牌的寬窄還能自由選擇:

GitHub標星6200:一種字體,變成千姿百態藝術字,可尖可圓可開花,隔壁設計師饞哭了

還可以讓文字看上去,在平靜中流淌:

GitHub標星6200:一種字體,變成千姿百態藝術字,可尖可圓可開花,隔壁設計師饞哭了

線上 Demo 的功能一共十幾種,大家也可以自行試驗。如果 Demo 還不能滿足你的想象,那就去食用代碼吧。

字體是代碼組成的

文本有代碼表示:text,字體大小有代碼表示:size,粗細有代碼:weight,字間距有代碼表示:tracking……

GitHub標星6200:一種字體,變成千姿百態藝術字,可尖可圓可開花,隔壁設計師饞哭了

每一種特技也都有各自的代碼,支持參數調節。

比如,瑟瑟發抖叫做 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>

GitHub 項目頁有個完整列表,各種功能的設置方法都能查到。說不定,排列組合會有驚喜呢。

大家也去玩一波吧。

GitHub 傳送門:https://github.com/cmiscm/leonsans

官網傳送門:https://leon-kim.com/

登錄,參與討論前請先登錄

評論在審核通過后將對所有人可見

正在加載中
福彩3d组3和组6的区别