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空白 - 空白字符变量字体。
• 火花 - 具有类似目的的替代字体。

？