wavefont

Wellenfont

Eine Schrift zum Rendern vertikaler Balkendaten: Wellenformen, Spektren, Diagramme, Histogramme, Spalten usw.

Spielplatz • Google-Schriftarten • V-Fonts • Waveareaa

Verwendung

Platzieren Sie Wavefont [Rond, Yela, Wght] .Woff2 in Ihr Projektverzeichnis und verwenden Sie diesen Code:

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

Bereiche

Wellenfont -Balken entsprechen Werten von 0 bis 100, zugewiesenen Zeichen: Zugeordneter Zeichen:

• 0-9 Zeichen dienen für eine vereinfachte manuelle Eingabe mit Schritt 10 (Balkenhöhe = Anzahl).
• A-Za-Z für manuelle Eingabe mit Schritt 2, weicher an den Kanten A und Z (Balkenhöhe = Anzahl des Buchstabens).
• U + 0100-017F für 0..127 Werte mit Schritt 1 ( char = String.fromCharCode(0x100 + value) ).

Variable Achsen

Etikett	Reichweite	Standard	Bedeutung
wght	1 - 1000	400	Barbreite oder Kühnheit.
ROND	0 - 100	100	Grenzradius oder Rundheit (Prozent).
YELA	-100 - 100	-100	Ausrichtung: unten, Mitte oder Oberseite.

Achsen über CSS einstellen:

. 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 */
}

Merkmale

• Bereiche, Werte und Breite sind mit LineFont kompatibel, sodass Schriftarten die visuelle Kohärenz des Aufrechterhaltens umgeschaltet werden können.
• Sichtbare Wurkodien fallen unter die Kennzeichen der Unicode -Kategorie, dh. Als Wort von regexp erkannt und kann mit Strg + → oder doppelter Klick ausgewählt werden. Z.B. Wellenformsegmente getrennt durch oder - sind durch Doppelklick ausgewählt.
• Charaktere außerhalb der sichtbaren Bereiche sind auf 0 , z. , t etc.
• -–._* Karte auf 1 Wert, | Karten zum maximalen Wert, ▁▂▃▄▅▆▇█ Karte zu entsprechenden Balken.
• Akzent akut ́ (u+0301) verschiebt die Stange 1-Schritt nach oben, Circumflex-Akzent ̂ (U+0302) 10 Schritt nach oben. Z.B. u0101u0302u0302u0301u0301u0301 verschiebt 23 Schritte.
• Accent Grab ̀ (U+0300) verschiebt die Stange 1-Schritt nach unten, Caron ̌ (U+030c) verschiebt 10 Schritte nach unten, z. u0101u030cu0300u0300u0300 verschiebt 13 Schritte nach unten.
• Die Pflegespanne beträgt -20..120, daher ist Leitungshöhe = 1,4 eine minimale nicht überlappende Auswahl.

JS -Paket

Optionales WaveFont -Paket enthält eine Funktion, die die Zeichenfolge aus Werten für Ihre Bequemlichkeit berechnet.

 import wf from 'wavefont'

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

Gebäude

make build

• Tests
• Glyphen
• Text
• Wasserfall

Siehe auch

• LineFont-Schriftart zum Rendern linearer Daten.

Referenzen

• Google -Schriftartenhandbuch.
• Unified Font-Objekt-Spezifikation-Unified Human Lesbares Format zum Speichern von Schriftarten.
• Feature -Datei Spezifikation - Definieren von Openentyp -Schriftfunktionen.
• Adobe-Variable-Font-Prototyp-Beispiel Variable Schriftart.
• Designspace XML Spec-Human-Lesbares Format zur Beschreibung von variablen Schriftarten.
• Adobe leer - leere Zeichen variable Schriftart.
• Funken - alternative Schriftart mit ähnlichem Zweck.

?