wavefont

WaveFont

Um tipo de letra para renderizar dados de barras verticais: formas de onda, espectros, diagramas, histogramas, colunas etc.

Playground • Fontes do Google • V-Fonts • Wavearea

Uso

Coloque o WaveFont [Rond, Yela, WGHT] .Woff2 no diretório do projeto e 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 > 

Intervalos

As barras de ondas correspondem a valores de 0 a 100, atribuídos a diferentes caracteres:

• 0-9 Os chars são para entrada manual simplificada com a etapa 10 (altura da barra = número).
• A-ZA-Z para entrada manual com a etapa 2, amolecida nas bordas A e Z (altura da barra = número de letra).
• U + 0100-017f para 0..127 valores com a etapa 1 ( char = String.fromCharCode(0x100 + value) ).

Eixos variáveis

Marcação	Faixa	Padrão	Significado
wght	1 - 1000	400	Largura da barra, ou ousadia.
ROND	0 - 100	100	Raio de fronteira, ou redondeza (porcentagem).
YELA	-100 - 100	-100	Alinhamento: inferior, centro ou superior.

Para ajustar os eixos via 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

• Os intervalos, valores e largura são compatíveis com o LineFont, para que as fontes possam ser comutadas preservando a coerência visual.
• Os charcodos visíveis se enquadram na categoria Unicode de personagens de marcação , ou seja. reconhecido como palavra por regexp e pode ser selecionado com ctrl + → ou clique duas vezes. Por exemplo. segmentos de forma de onda separados por ou - são selecionáveis clique duas vezes.
• Os caracteres fora dos intervalos visíveis são cortados para 0 , por exemplo. , t etc.
• -–._* mapear para 1 valor, | Mapas para o valor máximo, ▁▂▃▄▅▆▇█ mapa para barras correspondentes.
• Acenter agudo ́ (u+0301) muda a barra de 1 etapa para cima, sotaque circunflexo ̂ (u+0302) 10 etapas para cima. Por exemplo. u0101u0302u0302u0301u0301u0301 Deslocamentos 23 Passos para cima.
• Grave ̀ (U+0300) STACT STIPS barra 1 etapa para baixo, Caron ̌ (U+030C) Desliza 10 etapas para baixo, por exemplo. u0101u030cu0300u0300u0300 Shifts 13 etapas abaixo.
• O intervalo de cuidados é -20..120, então altura da linha = 1,4 é uma seleção mínima de não sobreposição.

Pacote js

O pacote Opcional WaveFont expõe uma função que calcula a string dos valores para sua conveniência.

 import wf from 'wavefont'

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

Prédio

make build

• Testes
• Glifos
• Texto
• Cachoeira

Veja também

• LineFont-Fontra da fonte para renderizar dados lineares.

Referências

• Guia do Google Fontes.
• Especificação de objeto de fonte unificada-formato unificado para o ser humano para armazenar dados de fontes.
• Arquivo de recurso Spec - Definindo recursos da fonte OpenType.
• Adobe-variável-font-protótipo-Exemplo de fonte variável.
• Designspace XML Spec-Formato legível pelo homem para descrever fontes variáveis.
• Adobe em branco - caracteres em branco Font Variável.
• Sparks - fonte alternativa com propósito semelhante.

?