この記事はQuantum Bits by Chestnut Bodyより転載したもので、著作権を侵害する場合は削除されることがあります。
このフォントはLeon Sansと呼ばれ、表面的には平凡に見えます。
でも実は、ただのフォントではなく、その中には魔法が隠されているのです。
Leon Sansの最大の特徴は、このフォントがコードで構成されていることです。このコードによって、フォントを自由に変形させることができます。
例えば、夜の闇の中で七色の光が輝いています：
例えば、春には枝が繁り、花がよく咲きます：
例えば、雨が地面に落ちて川ができます：
シェイプ、エフェクト、アニメーション、そして豊富なスタント。
キム・ジョンミンという小さな韓国人の友人がデザインした魔法のフォントは、赤ちゃんの誕生を祝うために作られました。
コードはオープンソースで、GitHubにはすでに6,200の星がついています。
これに加えて、オンラインデモもあります。
どのようにプレーするのですか？
最も基本的な操作は、厚みを変えることです。
標準的なフォントだけでなく、カラフルで芸術的なフォントでも太さを調整できます：
そして、もう少し難しくするために、フォントをうごめかせます。線を曲線的にするのです。
わずかな凹凸はわずかな揺れ。激しく曲がるのは感電や火傷：
プラグを抜いて、二度と動きません。
でも幸いなことに、春には手で埋めることができます：
もちろん、埋め方は一つではありません。
また、文字を切り捨ててピンクの「ドミノ」にすることもでき、各カードの幅も自由に選べます：
それはまた、言葉を穏やかに見つめ、流すことを可能にします：
オンラインデモには十数種類の機能が用意されていますので、ご自身で試してみてください：
しかし、もしデモがあなたの想像力を満足させないのであれば、先に進んでコードを消費してください：
フォントはコードで構成されています テキストはコード：テキスト、フォントサイズはコード：サイズ、太さはコード：ウェイト、ワードスペーシングはコード：トラッキング......。
さらに、各スタントには独自のコードとパラメータがあり、調整することができます。
例えば、震えは波と呼ばれ、震えの周波数はfpsで調整されます。
この文字列を使用するだけで、アニメーションフォントをH5に表示することができます：
1let leon, canvas, ctx;
2
3const sw = 800;
4const NY = 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 = NY * pixelRatio;
14 canvas.style.width = sw + 'px';
15 canvas.style.height = NY + 'px';
16 ctx.scale(pixelRatio, pixelRatio);
17
18 leon = new LeonSans({
19 text: 'The quick brown
fox jumps over
the lazy dog',
20 color: ['#'],
21 size: 80,
22 weight: 200
23 });
24
25 requestAnimationFrame(animate);
function 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);
window.onload = () => {
41 init();
42};
生成プロセスのアニメーションも表示したい場合は、行を追加してください：
1<script src="https://..////../..js"></>
GitHubのプロジェクトページには、様々な機能の設定方法の完全なリストがあります。多分、順列と組み合わせはあなたを驚かせるでしょう。
みんなも波乗りしましょうよ。
GitHub ポータル: https://github.com/leonsans
公式ポータル：https://leon-kim.com/
