multipleof4/stain.otf
1
0
Fork 0
mirror of https://github.com/multipleof4/stain.otf.git synced 2026-01-13 16:17:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Add font viewer and comparison page

Browse Source
This commit is contained in:
multipleof4
2025-11-09 08:34:58 -08:00
parent 5f8cec5e32
commit a81744ae4e
1 changed files with 43 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
index.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stain Font Viewer</title>
<style>
@font-face {
font-family: 'Stain';
src: url('./dist/Stain.otf') format('opentype');
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background-color: #fcfcfc; color: #333;
padding: 2em; line-height: 1.6;
}
h1, h2 { font-weight: 400; }
textarea {
width: 100%; height: 100px; font-size: 1.5em;
border: 1px solid #ccc; border-radius: 4px; padding: 0.5em;
box-sizing: border-box; margin-bottom: 1em;
}
.display { font-size: 3em; padding: 0.2em; border: 1px dashed #ddd; }
.stain { font-family: 'Stain', sans-serif; }
.candara { font-family: Candara, Calibri, 'Segoe UI', sans-serif; }
</style>
</head>
<body>
<h1>Stain Font</h1>
<textarea id="input" placeholder="Type here...">ABC abc</textarea>
<h2>Stain Font</h2>
<p class="display stain" id="stain-display">ABC abc</p>
<h2>Comparison (Candara / System Sans-Serif)</h2>
<p class="display candara" id="candara-display">ABC abc</p>
<script>
const i = document.getElementById('input');
const sd = document.getElementById('stain-display');
const cd = document.getElementById('candara-display');
i.oninput = () => sd.textContent = cd.textContent = i.value || i.placeholder;
</script>
</body>
</html>