wavefont

WaveFont

垂直バーをレンダリングするための書体データ：波形、スペクトル、図、ヒストグラム、列など。

遊び場• Googleフォント• Vフォント• 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 charは、ステップ10（bar height = number）の単純化された手動入力用です。
• A-ZA-Zステップ2の手動入力の場合、エッジAおよびZで軟化します（bar height =文字の数）。
• ステップ1（ char = String.fromCharCode(0x100 + value) ）の0..127値のu + 0100-017f 。

可変軸

タグ	範囲	デフォルト	意味
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 */
}

特徴

• 範囲、値、幅はラインフォントと互換性があるため、フォントを切り替えて視覚的な一貫性を保存できます。
• 可視されたシャルコードは、文字unicodeカテゴリ、すなわちマークに分類されます。 regexpによって単語として認識され、 Ctrl + →またはダブルクリックで選択できます。例えば。で区切られた波形セグメント または-ダブルクリックして選択可能です。
• 可視範囲外の文字は、たとえば0にクリップされます。 、 tなど
• -–._* 1値にマッピング、 |最大値へのマップ、 ▁▂▃▄▅▆▇█対応するバーへのマッピング。
• アクセント急性́ （u+0301）はバーを1段階上にシフトし、circurflex accent ̂ （u+0302）10ステップアップ。例えば。 u0101u0302u0302u0301u0301u0301シフト23ステップアップ。
• アクセント墓̀ （u+0300）シフトバー1ステップダウン、キャロン̌ （u+030c）は10ステップ下にシフトします。 u0101u030cu0300u0300u0300シフト13ステップダウン。
• CARET SPANは-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

• テスト
• グリフ
• 文章
• 滝

参照してください

• ラインフォント - 線形データをレンダリングするためのフォントフェース。

参照

• Google Fontsガイド。
• Unified Font Object Spec-フォントデータを保存するための統一された人間読み取り可能な形式。
• 機能ファイル仕様 - Opentypeフォント機能の定義。
• Adobe-Variable-Font-Prototype-変数フォントの例。
• DesignSpace XML Spec-可変フォントを記述するための人間読み取り可能な形式。
• Adobe Blank-ブランク文字変数フォント。
• 火花 - 同様の目的を持つ代替フォント。

？