Leon Sans de Jongmin Kim

Leon Sans es una fuente increíble. Un sans-serif geométrico hecho completamente en código (javascript) por Jongmin Kim. Cada punto de dibujo tiene valores de coordenadas que puedes modificar para crear formas, efectos o animaciones personalizadas.

Permite manipularla como una fuente variable, para cambiar el peso de la fuente dinámicamente. Pero además, puedes crear animaciones, efectos o formas personalizadas en el elemento HTML5 <canvas>. Diseñó la fuente para celebrar el nacimiento de su bebé León.

Ejemplos

Vea más ejemplos en el repositorio de Github de Leon Sans o en el sitio web leon-kim.com/examples/

Comprueba, por ejemplo, el efecto de la lluvia.

Uso

Descargue el archivo js minificado en la carpeta dist e inclúyalo en su html

<script src="js/leon.js"></script>

Genera LeonSans y lo dibuja en el elemento Canvas de HTML5.

this.canvas = document.createElement('canvas');
document.body.appendChild(this.canvas);
this.ctx = this.canvas.getContext("2d");

this.leon = new LeonSans({
    text: 'The quick brown\nfox jumps over\nthe lazy dog',
    color: ['#000000'],
    size: 160,
    weight: 200
});

requestAnimationFrame(animate);

function animate(t) {
    requestAnimationFrame(animate);
    this.ctx.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight);
    const x = (document.body.clientWidth - this.leon.rect.w) / 2;
    const y = (document.body.clientHeight - this.leon.rect.h) / 2;
    this.leon.position(x, y);
    this.leon.draw(this.ctx);
}

Lista de opciones

Nombre	Tipo	Descripción
text	cadena	El texto que debe mostrarse.
size	entero	El tamaño del texto.
weight	número	El peso de la fuente: 1 - 900. [Por defecto: 1]
color	matriz	Los colores de cada personaje. [Por defecto: ['#000000']]
colorful	matriz	Los colores para el efecto de color. [Por defecto: ['#c5d73f', '#9d529c', '#49a9db', '#fec330', '#5eb96e', '#fc5356', '#f38f31']]
tracking	entero	El espacio entre los caracteres de un bloque de texto. [Por defecto: 0]
leading	entero	La distancia entre cada línea de texto. [Por defecto: 0]
align	cadena	Cómo se alinea horizontalmente el contenido del texto del elemento: left, center, right. [Por defecto: left]
pathGap	número	El espacio entre cada coordenada de los puntos de una línea de cada carácter: 0 - 1. [Por defecto: 0.5]
amplitude	número	La amplitud del efecto de la onda: 0 - 1. [Por defecto: 0.5]
maxWidth	número	La anchura de la frase de texto.
breakWord	booleano	Las palabras se rompen al llegar al final de una línea. [Por defecto: false]
fps	número	El FPS para el efecto de onda. [Por defecto: 30]
isPath	booleano	true para obtener los valores de las coordenadas de los puntos de una línea de cada carácter. [Por defecto: false]
isWave	booleano	true para el efecto de las olas. [Por defecto: false]

 

Propiedades

Nombre	Tipo	Descripción
lineWidth	número	El grosor de las líneas del personaje.
scale	número	La escala del carácter. scale es 1 cuando el tamaño de la fuente es 500.
drawing	array	Los valores del objeto de dibujo para cada personaje. 0 es el comienzo de la animación, 1 es el final del estado de la animación.
data	matriz	Un objeto de los datos brutos del texto.
paths	matriz	Los valores de las coordenadas de los puntos de una línea de cada carácter.
drawingPaths	matriz	Los valores de las coordenadas de los puntos de una línea de cada personaje para dibujar la animación en WebGL. Tiene 1px de distancia de cada camino.
wavePaths	array	Los valores de las coordenadas de los puntos de una línea para el efecto de la onda.
rect	Objeto	El tamaño del texto y su posición: {x: x position, y: y position, w: width, h: height}.

 

Métodos

Nombre	Descripción
on()	Añade el evento update.
off()	Eliminar el evento update.
position(x, y)	Establece la posición del texto.
updateDrawingPaths()	Actualizar las rutas para dibujar en WebGL (PIXI.js). Es muy caro, sólo llama cuando lo necesita.
drawPixi(graphics)	Dibujar texto en WebGL con PIXI.js.
draw(ctx)	Dibuja el texto en el elemento Canvas.
drawColorful(ctx)	Dibuja el efecto de color.
wave(ctx, t)	Dibuja el efecto de las olas.
pattern(ctx, w, h)	Dibujar formas rectangulares en cada punto de la trayectoria
grid(ctx)	Dibujar la cuadrícula para cada tipo.
point(ctx)	Dibuja círculos en cada punto de dibujo y líneas para cada tipo.
box(ctx)	Dibuja un cuadro de contorno para el texto.
reset()	Restablece todos los valores.
destroy()	Destruye.