Iron-based life form descended from T-72
md`
# FontoMeter
`
html`
fonts
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=B612+Mono:wght@400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code" rel="stylesheet">
`
{
const svg = html`${onml.stringify(
onml.gen.svg(900, 256).concat([
['text', {
id: 'TUT',
x: 16,
y: 64,
fill: '#000',
'font-family': 'B612 Mono',
'font-size': '32px'
},
'0123456789ABCDEFGHIJKLMNOPQRST'
]
])
)}`;
let text = document.getElementById('TUT') || svg.children[0];
const res = [];
for(let size = 10; size <= 48; size++) {
text.style.fontSize = size + 'px';
const {width, height} = text.getBBox();
res.push({size, width, height});
}
console.log(res);
return svg;
}
html`
css
<style>
body {
background: #ccc;
}
.b612 {
font-family: 'B612 Mono';
font-size: 24px;
font-smooth: never;
-webkit-font-smoothing: none;
}
.robot {
font-family: 'Roboto Mono';
font-size: 24px;
font-smooth: never;
-webkit-font-smoothing: none;
}
.fira {
font-family: 'Fira Code';
font-size: 24px;
font-smooth: never;
-webkit-font-smoothing: none;
}
canvas {
text-rendering: geometricPrecision;
}
text {
margin: 0px;
padding: 0px;
font-smooth: never;
font-smooth: never;
-webkit-font-smoothing: none;
}
</style>
`
html`
<span class="b612">Almost before we knew it, we had left the ground.</span>
`
{
const cnvs = document.createElement('canvas');
cnvs.width = 240;
cnvs.height = 320;
const ctx = cnvs.getContext('2d');
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, cnvs.width, cnvs.height);
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 8; j++) {
ctx.fillStyle = '#000';
ctx.fillRect(6 + i * 23, 1 + j * 40, 21, 38);
}
}
ctx.fillStyle = '#fff';
ctx.font = "36px B612 Mono";
[
'0123456789',
'ABCDEFGHIJ',
'KLMNOPQRST',
'UVWXYZabcd',
'efghijklmn',
'opqrstuvwx',
'yz+-*/=.,:',
'?!\u03a9\u00b5\u00b1\u00b0φ[]\''
].map((line, i) => {
ctx.fillText(line, 5, 30 + i * 40);
});
return cnvs;
}
onml = require('onml')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
