wavefont

espalda

Un tipo de letra para representar datos de barras verticales: formas de onda, espectros, diagramas, histogramas, columnas, etc.

Parque infantil • Fuentes de Google • Fonts V • Wavearea

Uso

Coloque WaveFont [Rond, Yela, WGHT] .Woff2 en su directorio de proyecto y use este código:

 < style >
@font-face {
	font-family: wavefont;
	font-display: block;
	src: url(./Wavefont[ROND,YELA,wght].woff2) format('woff2');
}
.wavefont {
	--wght: 400;
	font-family: wavefont;
	font-variation-settings: 'wght' var(--wght), 'ROND' 30, 'YELA' 0;
}
</ style >

<!-- Set values manually -->
< textarea id =" waveform " class =" wavefont " cols =" 100 " >
abcdefghijklmnopqrstuvwwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
</ textarea >

< script >
// Set values programmatically (more precise)
waveform . textContent = Array . from ( { length : 100 } , ( _ , i ) => String . fromCharCode ( 0x100 + i ) ) . join ( '' )
</ script > 

Rangos

Las barras de ondas corresponden a valores de 0 a 100, asignados a diferentes caracteres:

• 0-9 Los caracteres son para entrada manual simplificada con el paso 10 (altura de la barra = número).
• A-ZA-Z para entrada manual con el paso 2, suavizado en los bordes A y Z (altura de la barra = número de letra).
• U + 0100-017F para 0..127 valores con paso 1 ( char = String.fromCharCode(0x100 + value) ).

Ejes variables

Etiqueta	Rango	Por defecto	Significado
wght	1 - 1000	400	Ancho de barra o audacia.
ROND	0 - 100	100	Radio fronterizo, o redondez (porcentaje).
YELA	-100 - 100	-100	Alineación: parte inferior, central o superior.

Para ajustar los ejes a través de CSS:

. wavefont {
  font-variation-settings : 'wght' var ( --wght , 40 ) , 'ROND' var ( --rond , 0 ) , 'YELA' var ( --align , 0 );
  letter-spacing : 1 ch ; /* 1ch unit === 1 bar width */
}

Características

• Los rangos, los valores y el ancho son compatibles con LineFont, por lo que se pueden cambiar las fuentes preservando la coherencia visual.
• Los charcodes visibles se encuentran en la categoría de Marcado de personajes Unicode, es decir. Reconocido como palabra por regexp y se puede seleccionar con ctrl + → o doble clic. P.ej. segmentos de forma de onda separados por o - se pueden seleccionar con doble clic.
• Los personajes fuera de los rangos visibles se recortan a 0 , por ejemplo. , t etc.
• -–._* Mapa a 1 valor, | Mapas al valor máximo, ▁▂▃▄▅▆▇█ Mapa a las barras correspondientes.
• Acento agudo ́ (U+0301) Cambia la barra de 1 paso hacia arriba, acento circunflejo ̂ (U+0302) 10 pasos arriba. P.ej. u0101u0302u0302u0301u0301u0301 cambia 23 pasos hacia arriba.
• Acento Grave ̀ (U+0300) Cambia la barra de 1 paso hacia abajo, Caron ̌ (U+030C) cambia 10 pasos hacia abajo, por ejemplo. u0101u030cu0300u0300u0300 cambia 13 pasos hacia abajo.
• El tramo de careto es -20..120, por lo que la línea de línea de línea = 1.4 es una selección mínima no superpuesta.

Paquete JS

El paquete opcional de WaveFont expone una función que calcula la cadena de los valores para su conveniencia.

 import wf from 'wavefont'

// get characters for values from 0..127 range
wf ( 0 , 1 , 50 , 99 , 127 , ... ) // ĀāIJţŤ... 

Edificio

make build

• Pruebas
• Glifos
• Texto
• Cascada

Ver también

• LineFont-Fuente de fuente para representar datos lineales.

Referencias

• Guía de fuentes de Google.
• Especificación de objeto de fuente unificada-Formato unificado legible para humanos para almacenar datos de fuentes.
• Especificación del archivo de características - Definición de funciones de fuente OpenType.
• Adobe-Variable-Font-Prototipo-Fuente variable de ejemplo.
• DesignSpace XML Spec-Formato legible por humanos para describir fuentes variables.
• Adobe en blanco - Fuente variable de caracteres en blanco.
• Chispas: fuente alternativa con un propósito similar.

?