wavefont

파동

수직 막대 데이터 렌더링 서체 : 파형, 스펙트럼, 다이어그램, 히스토그램, 열 등

놀이터 • Google Fonts • V-Fonts • WeaBearea

용법

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 숯은 10 단계 (막대 높이 = 숫자)를 가진 단순화 된 수동 입력 용입니다.
• 2 단계가있는 수동 입력의 경우 a-za-z , 가장자리 A 와 z 에서 부드러워졌습니다 (막대 높이 = 문자 수).
• 1 단계 ( char = String.fromCharCode(0x100 + value) )의 0..127 값에 대해 u + 0100-017f .

가변 축

꼬리표	범위	기본	의미
wght	1-1000​	400	막대 너비 또는 대담함.
ROND	0-10​	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 */
}

특징

• 범위, 값 및 너비는 라인 폰트와 호환되므로 글꼴을 보존하는 시각적 일관성을 전환 할 수 있습니다.
• 가시적 숯은 문자 표시 유니 코드 범주 (즉)에 속합니다. Regexp에 의해 단어로 인식되며 Ctrl + → 또는 더블 클릭으로 선택할 수 있습니다. 예를 들어. 파형 세그먼트가 분리되었습니다 또는 - 더블 클릭으로 선택할 수 있습니다.
• 가시 범위 외부의 문자는 0 으로 잘라냅니다. , t 등
• -–._* 1 값으로 맵핑, | MAPS MAX 값으로 맵, ▁▂▃▄▅▆▇█ 맵에 해당하는 막대에 맵을 표시합니다.
• 악센트 급성 ́ (U+0301) BAR 1 단계 UP, CILLFLEX ACCENT ̂ (U+0302) 10 단계 UP을 이동합니다. 예를 들어. u0101u0302u0302u0301u0301u0301 변속 23 단계.
• 악센트 묘지 ̀ (U+0300) 바로 1 단계 아래로 이동, Caron ̌ (u+030c)는 10 걸음을 내려갑니다. u0101u030cu0300u0300u0300 이동 13 스텝 다운.
• 간병 범위는 -20..120이므로 선-높이 = 1.4는 최소한의 겹치지 않는 선택입니다.

JS 패키지

선택적 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 글꼴 가이드.
• 통합 글꼴 객체 사양-글꼴 데이터를 저장하기위한 통합 된 사람이 읽을 수있는 형식.
• 기능 파일 사양 - OpenType 글꼴 기능 정의.
• Adobe-Variable-Font-Prototype- 예제 변수 글꼴.
• DesignSpace XML SPEC-가변 글꼴을 설명하기위한 사람이 읽을 수있는 형식.
• Adobe Blank - Blank 문자 가변 글꼴.
• 스파크 - 비슷한 목적을 가진 대체 글꼴.

?