wavefont

Wavfont

Jenis huruf untuk rendering data batang vertikal: bentuk gelombang, spektrum, diagram, histogram, kolom dll.

Taman Bermain • Google Fonts • V-Font • Wavearea

Penggunaan

Tempatkan WaveFont [Rond, Yela, WGHT] .woff2 ke direktori proyek Anda dan gunakan kode ini:

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

Rentang

Bilah Wavefont sesuai dengan nilai dari 0 hingga 100, yang ditetapkan untuk karakter yang berbeda:

• 0-9 chars untuk input manual yang disederhanakan dengan langkah 10 (tinggi bar = angka).
• A-ZA-Z untuk input manual dengan langkah 2, dilunakkan di tepi A dan Z (tinggi bar = jumlah huruf).
• U + 0100-017f untuk 0..127 nilai dengan langkah 1 ( char = String.fromCharCode(0x100 + value) ).

Sumbu variabel

Menandai	Jangkauan	Bawaan	Arti
wght	1 - 1000	400	Lebar bar, atau keberanian.
ROND	0 - 100	100	Radius perbatasan, atau kebulatan (persen).
YELA	-100 - 100	-100	Alignment: Bawah, tengah atau atas.

Untuk menyesuaikan sumbu melalui 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 */
}

Fitur

• Rentang, nilai dan lebar kompatibel dengan linefont, sehingga font dapat dialihkan menjaga koherensi visual.
• Charcodes yang terlihat berada di bawah karakter penandaan kategori Unicode, yaitu. dikenali sebagai word oleh regexp dan dapat dipilih dengan ctrl + → atau klik dua kali. Misalnya. segmen bentuk gelombang dipisahkan oleh atau - dapat dipilih dengan klik dua kali.
• Karakter di luar rentang yang terlihat dipotong ke 0 , mis.. , t dll
• -–._* Peta ke 1 nilai, | Peta ke nilai maksimal, ▁▂▃▄▅▆▇█ peta ke batang yang sesuai.
• Accent Acute ́ (U+0301) menggeser batang 1-langkah ke atas, aksen sirkumflex ̂ (u+0302) 10 langkah ke atas. Misalnya. u0101u0302u0302u0301u0301u0301 bergeser 23 langkah ke atas.
• Accent Grave ̀ (u+0300) menggeser batang 1 langkah ke bawah, caron ̌ (u+030c) bergeser 10 langkah ke bawah, mis. u0101u030cu0300u0300u0300 bergeser 13 langkah ke bawah.
• Span Caret adalah -20..120, jadi line-height = 1.4 adalah seleksi minimal yang tidak tumpang tindih.

Paket JS

Paket WaveFont Opsional memperlihatkan fungsi yang menghitung string dari nilai untuk kenyamanan Anda.

 import wf from 'wavefont'

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

Bangunan

make build

• Tes
• Mesin terbang
• Teks
• Air terjun

Lihat juga

• LineFont-Font-Face untuk Rendering Linear Data.

Referensi

• Panduan Google Fonts.
• SPEC OBYEK FONT SPEC-Format yang dapat dibaca manusia terpadu untuk menyimpan data font.
• Fitur File Spec - mendefinisikan fitur font opentype.
• Adobe-variable-font-prototipe-contoh font variabel.
• DesignSpace XML Spec-Format yang dapat dibaca manusia untuk menggambarkan font variabel.
• Adobe Blank - Karakter kosong Variabel font.
• Sparks - Font alternatif dengan tujuan yang sama.

?