wavefont

WAVEFONT

Шрифт для рендеринга данных вертикальных стержней: формы волны, спектр, диаграммы, гистограммы, столбцы и т. Д.

Игровая площадка • Google шрифты • V-Fonts • Wavearea

Использование

Поместите WaveFont [Rond, Yela, Wght] .woff2 в свой каталог проектов и используйте этот код:

 < 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 > 

Диапазоны

Стоки WaveFont соответствуют значениям от 0 до 100, присваиваемые разным символам:

• 0-9 ChARS предназначены для упрощенного ручного ввода с шагом 10 (высота бар = число).
• A-za-z для ручного ввода с шагом 2, смягченным по краям A и z (высота бар = количество букв).
• U + 0100-017F для значений 0..127 с шагом 1 ( char = String.fromCharCode(0x100 + value) ).

Переменные оси

Ярлык	Диапазон	По умолчанию	Значение
wght	1 - 1000	400	Ширина бар или смелость.
ROND	0 - 100	100	Радиус границы, или округлость (процент).
YELA	-100 - 100	-100	Выравнивание: внизу, центр или верх.

Чтобы регулировать оси через 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 */
}

Функции

• Диапазоны, значения и ширина совместимы с LineFont, поэтому шрифты могут быть переключены сохранения визуальной когерентности.
• Видимые Charcodes попадают под маркировку персонажей Unicode Category, т.е. распознается как слово regexp и может быть выбрано с помощью Ctrl + → или двойного щелчка. Например. сегменты формы волны, разделенные или - выбираются двойным щелчком.
• Персонажи за пределами видимых диапазонов обрезаны до 0 , например. , t т. д.
• -–._* Карта до 1 значения, | Карты до максимального значения, ▁▂▃▄▅▆▇█ Карта в соответствующие стержни.
• Акцент острый ́ (U+0301) Сдвигает стержень 1-ступенчатого вверх, окружной акцент ̂ (U+0302) на 10 шагов вверх. Например. u0101u0302u0302u0301u0301u0301 Сдвигает 23 шага вверх.
• Акцентная могила ̀ (U+0300) Сдвигает стержень 1-ступенчатого вниз, Caron ̌ (U+030C) Сдвигает 10 шагов вниз, например. u0101u030cu0300u0300u0300 Сдвигает 13 шагов вниз.
• Распания карета составляет -20..120, поэтому линейная высота = 1,4-минимальный непересекающийся выбор.

JS Package

Необязательный пакет WaveFont обнажает функцию, которая вычисляет строку из значений для вашего удобства.

 import wf from 'wavefont'

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

Здание

make build

• Тесты
• Глифы
• Текст
• Водопад

Смотрите также

• LineFont-Font-Face для рендеринга линейных данных.

Ссылки

• Google Fonts Guide.
• Унифицированный объект шрифта Spec-Unified человеческий, читаемый формат для хранения данных шрифта.
• Спецификация файла функции - определение функций шрифта OpenType.
• Adobe-Vaile-Font-Prototype-пример переменной шрифт.
• DesignSpace XML Spec-Человеческий, читаемый в формате для описания переменных шрифтов.
• Adobe Blank - пустые символы переменная шрифт.
• Спаркс - альтернативный шрифт с аналогичной целью.

?