Posts mit Tag "fonts"

Mit font-variant-numeric kann man steuern, wie Zahlen gerendert werden.

Beispiele:

normal: 1234567890
ordinal: 1st 2nd 3rd
slashed-zero: 0 1 2 3
lining-nums: 1234567890
oldstyle-nums: 1234567890
proportional-nums: 1234567890
tabular-nums: 1234567890
diagonal-fractions: 1/2 3/4 5/6
stacked-fractions: 1/2 3/4 5/6

Code:

<ul>
	<li>normal: <span style="font-variant-numeric: normal;">1234567890</span>
	<li>ordinal: <span style="font-variant-numeric: ordinal;">1st 2nd 3rd</span>
	<li>slashed-zero: <span style="font-variant-numeric: slashed-zero;">0 1 2 3</span>
	<li>lining-nums: <span style="font-variant-numeric: lining-nums;">1234567890</span>
	<li>oldstyle-nums: <span style="font-variant-numeric: oldstyle-nums;">1234567890</span>
	<li>proportional-nums: <span style="font-variant-numeric: proportional-nums;">1234567890</span>
	<li>tabular-nums: <span style="font-variant-numeric: tabular-nums;">1234567890</span>
	<li>diagonal-fractions: <span style="font-variant-numeric: diagonal-fractions;">1/2 3/4 5/6</span>
	<li>stacked-fractions: <span style="font-variant-numeric: stacked-fractions;">1/2 3/4 5/6</span>
</ul>

tabular-nums kann man gut dafür verwenden, wenn man eine Nicht-Monospace-Font hat, aber die Zahlen an einer Stelle gleich breit haben muss. Das muss die Font natürlich unterstützen.

Mit font-variant-position kann man auch Texte in sub/sup setzen, ohne die HTML-Tags <sub>/<sup> zu verwenden.

Aus der Blogserie “Fonts mit viel Funktionalität”: Ein Z80-Disassembler in einer Font.

Wir hatten ja schon öfters interessante Ideen für die Verwendung von Fontfeatures. Heute: Eine Font mit eingebauten Syntax-Highlighting.

Und hier ein ganzes Spiel in einer Font.

Hack der Woche: linefont - eine Schriftart, mit der man Zeitreihen plotten kann. Font-Stacks sind ja mittlerweile super komplex und Fonts selbst auch eigene Programme. Für diese Schriftart muss man mit ein bisschen JS aus einer Zeitreihe die Schriftzeichen generieren, die dann mit der Font gerendert werden müssen.

Ich bin mir sicher, das würde auch ohne diesen Zwischenschritt gehen und man könnte das auch so machen, dass man einfach die Werte kommasepariert aufschreibt. Es gibt ja auch Schriftarten, die profanität zensieren. Oder ein Kunstprojekt, als die NSA-Geschichte vor 10 Jahren hochkam.

Hier eine Demo.

Ist natürlich a11y-Hölle, aber vielleicht ganz nützlich für interne Tools, wenn man keine Lust hat, ein ganzes Frontend-Plotting-Framework einzubinden, wenn man nur ne kleine Zeitreihe plotten will.

Lesser Known Coding Fonts (2019)