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個字符用於使用步驟10的簡化手冊輸入（bar Height = number）。
• A-ZA-Z用於步驟2的手動輸入，在邊緣A和Z處軟化（bar高度=字母數）。
• 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類別，即。通過REGEXP識別為單詞，可以使用CTRL + →或雙擊。例如。波形片段分開 或-可通過雙擊選擇。
• 可見範圍之外的字符被剪輯為0 ，例如。 ， t等
• -–._*映射到1個值， |映射到最大值， ▁▂▃▄▅▆▇█映射到相應的條。
• 重音急性́ （U+0301）移動桿1步上，繞過cockent ̂ （u+0302）10步。例如。 u0101u0302u0302u0301u0301u0301移動23個步驟。
• 口音墳墓̀ （u+0300）將桿1步向下移動，卡倫̌ （u+030c）向下10步，例如。 u0101u030cu0300u0300u0300向下移13個步驟。
• Caret跨度為-20..120，因此Line-Height = 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 - 字體面呈現線性數據。

參考

• Google字體指南。
• 統一字體對象規範 - 統一的人類可讀格式，用於存儲字體數據。
• 功能文件規格 - 定義Opentype字體功能。
• Adobe-variable-font-prototype-示例變量字體。
• Designspace XML規格 - 用於描述可變字體的人類可讀格式。
• Adobe空白 - 空白字符變量字體。
• 火花 - 具有類似目的的替代字體。

？