This article from the qubit, the author chestnut body, if there is infringement, can be deleted.

Making the font

This font is called Leon Sans, and it looks plain on the surface.

But in fact, it’s not just any typeface. There’s magic in it.

Making 1 font

The most unusual thing about Leon Sans is that fonts are made up of code. With this code, it can change at will.

For example, seven colors of light and shadow shine in the dark:

Making type 2

For example, in the spring the trees are in full bloom and the flowers are in full bloom:

Making 3 font

For example, the raindrops hit the ground and formed a river:

4 making font

You can choose from a variety of special Effects like Shapes, Effects and Animations.

The magic font was designed by Jongmin Kim, a South Korean friend, to celebrate the birth of the baby.

But it’s not just one thing, it’s one thing: the code is open source, and GitHub already has 6,200 stars.

In addition, the Demo can be played on cable.


How can you play it

The most basic operation is to change the Weight.

Making font 5

Give weight not only to standard fonts, but also to colorful artsy fonts:

Making font 6

Then, make it harder and make the font shiver. It turns the lines into twists and turns.

Slightly uneven, there will be a slight shake. Severe bending is electrocution or burning:

Making font 7

Unplug it and it won’t work again.

Fortunately, it can be conveniently buried in spring.

Making font 8

Of course, there’s more to it than that.

You can also cut the letters into pink “dominoes” and choose the width of each card:

Making font 9

It can also make the text seem to flow in peace:

Making font 10

There are more than ten kinds of functions in the online Demo, you can also try it yourself:

image

If the Demo doesn’t satisfy your imagination, try the code:

Tracking tracking is used to track the size of the text. Tracking is used to track the weight of the text. Tracking is used to track the weight of the text.

Dead simple font, 11

In addition, each stunt has its own code and parameters that can be adjusted.

For example, a shiver is called a wave, and the shaking frequency is tuned to an FPS.

As long as you use this line of code, you can put the smart font, on the H5 display:

 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 = (a)= > { 41 init(); 42}; Copy the code

If you want to animate the generation process, add a line:

1<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
Copy the code

The GitHub project page has a complete list of how to set up various features. Maybe permutations will surprise you.

Let’s go have a good time.

Making portal: https://github.com/cmiscm/leonsans

Portal: https://leon-kim.com/

Above, is today’s share, feel good, but also please like, thank you.