a typefont for hex encoded values
Checksum font is experimental typeface that would be able to reflect checksum encoding with styling in addition to the upper and lower case characters.
"Contextual Alternates" OpenType layout feature: It formats hexadecimal numbers (starting with 0x) with shorter uppercase letters, so they are at the same height as the numbers.
Note
You can control those alternates in your editor’s settings, e.g. in Visual Studio Code by adding "editor.fontLigatures": "'calt'" to your settings.json.
Checksum leverages Apple’s Scancardium3 font characteristics. That font is responsible for enabling iPhones to be able to scan Gift Card Serial numbers without a QR Code: it detects the string because of the typeface match. We want to do something similar for webpages to enable users to scan an address or tx hash string without the clutter of QR and also enable stronger visual aides to provide better accessibility to hard of sight users.
Prevent FOUT or FOIT. Use Font Loading API or Web Font Loader:
<link rel="preload" href=(path to WOFF2 font) as="font" type="font/woff2" crossorigin="anonymous">
<script>
window.WebFontConfig = {
custom: {
families: ['Checksum'],
},
};
</script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/webfontloader.js" integrity="sha256-4O4pS1SH31ZqrSO2A/2QJTVjTPqVe+jnYgOWUVr7EEc=" crossorigin="anonymous"></script>
@font-face {
font-family: 'KaTeX_Main';
src: url(https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/KaTeX_Main-Regular.woff2) format('woff2'), url(https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/KaTeX_Main-Regular.woff) format('woff'), url(https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/KaTeX_Main-Regular.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'KaTeX_Math';
src: url(https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/KaTeX_Math-BoldItalic.woff2) format('woff2'), url(https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/KaTeX_Math-BoldItalic.woff) format('woff'), url(https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/KaTeX_Math-BoldItalic.ttf) format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'KaTeX_Math';
src: url(https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/KaTeX_Math-Italic.woff2) format('woff2'), url(https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/KaTeX_Math-Italic.woff) format('woff'), url(https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/KaTeX_Math-Italic.ttf) format('truetype');
font-weight: normal;
font-style: italic;
}
.notdef .null CR space one two three four five six seven eight nine zero A B C D E F G H I J K L M N O P Q R S T U V W X Y Z hyphen