deployed at 2023-11-26T05:16:36.144580+00:00

TakWolf · Nov 26, 2023 · d180b10 · d180b10
commit d180b10
Show file tree

Hide file tree

Showing 42 changed files with 2,734 additions and 0 deletions.
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+fusion-pixel-font.takwolf.com
diff --git a/alphabet-10px-monospaced.html b/alphabet-10px-monospaced.html
diff --git a/alphabet-10px-proportional.html b/alphabet-10px-proportional.html
diff --git a/alphabet-12px-monospaced.html b/alphabet-12px-monospaced.html
diff --git a/alphabet-12px-proportional.html b/alphabet-12px-proportional.html
diff --git a/alphabet-8px-monospaced.html b/alphabet-8px-monospaced.html
diff --git a/alphabet-8px-proportional.html b/alphabet-8px-proportional.html
diff --git a/demo-10px.html b/demo-10px.html
diff --git a/demo-12px.html b/demo-12px.html
diff --git a/demo-8px.html b/demo-8px.html
diff --git a/fusion-pixel-10px-monospaced-ja.woff2 b/fusion-pixel-10px-monospaced-ja.woff2
diff --git a/fusion-pixel-10px-monospaced-ko.woff2 b/fusion-pixel-10px-monospaced-ko.woff2
diff --git a/fusion-pixel-10px-monospaced-latin.woff2 b/fusion-pixel-10px-monospaced-latin.woff2
diff --git a/fusion-pixel-10px-monospaced-zh_hans.woff2 b/fusion-pixel-10px-monospaced-zh_hans.woff2
diff --git a/fusion-pixel-10px-monospaced-zh_hant.woff2 b/fusion-pixel-10px-monospaced-zh_hant.woff2
diff --git a/fusion-pixel-10px-proportional-ja.woff2 b/fusion-pixel-10px-proportional-ja.woff2
diff --git a/fusion-pixel-10px-proportional-ko.woff2 b/fusion-pixel-10px-proportional-ko.woff2
diff --git a/fusion-pixel-10px-proportional-latin.woff2 b/fusion-pixel-10px-proportional-latin.woff2
diff --git a/fusion-pixel-10px-proportional-zh_hans.woff2 b/fusion-pixel-10px-proportional-zh_hans.woff2
diff --git a/fusion-pixel-10px-proportional-zh_hant.woff2 b/fusion-pixel-10px-proportional-zh_hant.woff2
diff --git a/fusion-pixel-12px-monospaced-ja.woff2 b/fusion-pixel-12px-monospaced-ja.woff2
diff --git a/fusion-pixel-12px-monospaced-ko.woff2 b/fusion-pixel-12px-monospaced-ko.woff2
diff --git a/fusion-pixel-12px-monospaced-latin.woff2 b/fusion-pixel-12px-monospaced-latin.woff2
diff --git a/fusion-pixel-12px-monospaced-zh_hans.woff2 b/fusion-pixel-12px-monospaced-zh_hans.woff2
diff --git a/fusion-pixel-12px-monospaced-zh_hant.woff2 b/fusion-pixel-12px-monospaced-zh_hant.woff2
diff --git a/fusion-pixel-12px-proportional-ja.woff2 b/fusion-pixel-12px-proportional-ja.woff2
diff --git a/fusion-pixel-12px-proportional-ko.woff2 b/fusion-pixel-12px-proportional-ko.woff2
diff --git a/fusion-pixel-12px-proportional-latin.woff2 b/fusion-pixel-12px-proportional-latin.woff2
diff --git a/fusion-pixel-12px-proportional-zh_hans.woff2 b/fusion-pixel-12px-proportional-zh_hans.woff2
diff --git a/fusion-pixel-12px-proportional-zh_hant.woff2 b/fusion-pixel-12px-proportional-zh_hant.woff2
diff --git a/fusion-pixel-8px-monospaced-ja.woff2 b/fusion-pixel-8px-monospaced-ja.woff2
diff --git a/fusion-pixel-8px-monospaced-ko.woff2 b/fusion-pixel-8px-monospaced-ko.woff2
diff --git a/fusion-pixel-8px-monospaced-latin.woff2 b/fusion-pixel-8px-monospaced-latin.woff2
diff --git a/fusion-pixel-8px-monospaced-zh_hans.woff2 b/fusion-pixel-8px-monospaced-zh_hans.woff2
diff --git a/fusion-pixel-8px-monospaced-zh_hant.woff2 b/fusion-pixel-8px-monospaced-zh_hant.woff2
diff --git a/fusion-pixel-8px-proportional-ja.woff2 b/fusion-pixel-8px-proportional-ja.woff2
diff --git a/fusion-pixel-8px-proportional-ko.woff2 b/fusion-pixel-8px-proportional-ko.woff2
diff --git a/fusion-pixel-8px-proportional-latin.woff2 b/fusion-pixel-8px-proportional-latin.woff2
diff --git a/fusion-pixel-8px-proportional-zh_hans.woff2 b/fusion-pixel-8px-proportional-zh_hans.woff2
diff --git a/fusion-pixel-8px-proportional-zh_hant.woff2 b/fusion-pixel-8px-proportional-zh_hant.woff2
diff --git a/index.html b/index.html
@@ -0,0 +1,385 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>缝合像素字体 / Fusion Pixel Font</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        @font-face {
+            font-family: fusion-pixel-12px-monospaced-latin;
+            src: url("fusion-pixel-12px-monospaced-latin.woff2?r=0.33801323186344034");
+        }
+        @font-face {
+            font-family: fusion-pixel-8px-proportional-latin;
+            src: url("fusion-pixel-8px-proportional-latin.woff2?r=0.33801323186344034");
+        }
+        .font-8px-proportional :lang(en) {
+            font-family: fusion-pixel-8px-proportional-latin, sans-serif;
+        }
+        @font-face {
+            font-family: fusion-pixel-8px-proportional-zh_hans;
+            src: url("fusion-pixel-8px-proportional-zh_hans.woff2?r=0.33801323186344034");
+        }
+        .font-8px-proportional :lang(zh-hans) {
+            font-family: fusion-pixel-8px-proportional-zh_hans, sans-serif;
+        }
+        @font-face {
+            font-family: fusion-pixel-8px-proportional-zh_hant;
+            src: url("fusion-pixel-8px-proportional-zh_hant.woff2?r=0.33801323186344034");
+        }
+        .font-8px-proportional :lang(zh-hant) {
+            font-family: fusion-pixel-8px-proportional-zh_hant, sans-serif;
+        }
+        @font-face {
+            font-family: fusion-pixel-8px-proportional-ja;
+            src: url("fusion-pixel-8px-proportional-ja.woff2?r=0.33801323186344034");
+        }
+        .font-8px-proportional :lang(ja) {
+            font-family: fusion-pixel-8px-proportional-ja, sans-serif;
+        }
+        @font-face {
+            font-family: fusion-pixel-8px-proportional-ko;
+            src: url("fusion-pixel-8px-proportional-ko.woff2?r=0.33801323186344034");
+        }
+        .font-8px-proportional :lang(ko) {
+            font-family: fusion-pixel-8px-proportional-ko, sans-serif;
+        }
+        .font-8px-proportional .title {
+            font-size: 32px;
+            font-weight: normal;
+            line-height: 48px;
+            text-shadow: 2px 2px #4b4b4b;
+        }
+        .font-8px-proportional .text {
+            font-size: 16px;
+            line-height: 24px;
+            text-shadow: 2px 2px #4b4b4b;
+        }
+        .font-8px-proportional .copyright {
+            font-size: 16px;
+            line-height: 24px;
+            text-shadow: 2px 2px #4b4b4b;
+        }
+        .font-8px-proportional .link-group {
+            margin-top: 4px;
+            margin-bottom: 4px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+        .font-8px-proportional .link-tab {
+            margin-left: 8px;
+            margin-right: 8px;
+            font-size: 16px;
+            line-height: 24px;
+            text-shadow: 2px 2px #4b4b4b;
+        }
+        @font-face {
+            font-family: fusion-pixel-10px-proportional-latin;
+            src: url("fusion-pixel-10px-proportional-latin.woff2?r=0.33801323186344034");
+        }
+        .font-10px-proportional :lang(en) {
+            font-family: fusion-pixel-10px-proportional-latin, sans-serif;
+        }
+        @font-face {
+            font-family: fusion-pixel-10px-proportional-zh_hans;
+            src: url("fusion-pixel-10px-proportional-zh_hans.woff2?r=0.33801323186344034");
+        }
+        .font-10px-proportional :lang(zh-hans) {
+            font-family: fusion-pixel-10px-proportional-zh_hans, sans-serif;
+        }
+        @font-face {
+            font-family: fusion-pixel-10px-proportional-zh_hant;
+            src: url("fusion-pixel-10px-proportional-zh_hant.woff2?r=0.33801323186344034");
+        }
+        .font-10px-proportional :lang(zh-hant) {
+            font-family: fusion-pixel-10px-proportional-zh_hant, sans-serif;
+        }
+        @font-face {
+            font-family: fusion-pixel-10px-proportional-ja;
+            src: url("fusion-pixel-10px-proportional-ja.woff2?r=0.33801323186344034");
+        }
+        .font-10px-proportional :lang(ja) {
+            font-family: fusion-pixel-10px-proportional-ja, sans-serif;
+        }
+        @font-face {
+            font-family: fusion-pixel-10px-proportional-ko;
+            src: url("fusion-pixel-10px-proportional-ko.woff2?r=0.33801323186344034");
+        }
+        .font-10px-proportional :lang(ko) {
+            font-family: fusion-pixel-10px-proportional-ko, sans-serif;
+        }
+        .font-10px-proportional .title {
+            font-size: 40px;
+            font-weight: normal;
+            line-height: 64px;
+            text-shadow: 2px 2px #4b4b4b;
+        }
+        .font-10px-proportional .text {
+            font-size: 20px;
+            line-height: 32px;
+            text-shadow: 2px 2px #4b4b4b;
+        }
+        .font-10px-proportional .copyright {
+            font-size: 20px;
+            line-height: 32px;
+            text-shadow: 2px 2px #4b4b4b;
+        }
+        .font-10px-proportional .link-group {
+            margin-top: 5px;
+            margin-bottom: 5px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+        .font-10px-proportional .link-tab {
+            margin-left: 10px;
+            margin-right: 10px;
+            font-size: 20px;
+            line-height: 32px;
+            text-shadow: 2px 2px #4b4b4b;
+        }
+        @font-face {
+            font-family: fusion-pixel-12px-proportional-latin;
+            src: url("fusion-pixel-12px-proportional-latin.woff2?r=0.33801323186344034");
+        }
+        .font-12px-proportional :lang(en) {
+            font-family: fusion-pixel-12px-proportional-latin, sans-serif;
+        }
+        @font-face {
+            font-family: fusion-pixel-12px-proportional-zh_hans;
+            src: url("fusion-pixel-12px-proportional-zh_hans.woff2?r=0.33801323186344034");
+        }
+        .font-12px-proportional :lang(zh-hans) {
+            font-family: fusion-pixel-12px-proportional-zh_hans, sans-serif;
+        }
+        @font-face {
+            font-family: fusion-pixel-12px-proportional-zh_hant;
+            src: url("fusion-pixel-12px-proportional-zh_hant.woff2?r=0.33801323186344034");
+        }
+        .font-12px-proportional :lang(zh-hant) {
+            font-family: fusion-pixel-12px-proportional-zh_hant, sans-serif;
+        }
+        @font-face {
+            font-family: fusion-pixel-12px-proportional-ja;
+            src: url("fusion-pixel-12px-proportional-ja.woff2?r=0.33801323186344034");
+        }
+        .font-12px-proportional :lang(ja) {
+            font-family: fusion-pixel-12px-proportional-ja, sans-serif;
+        }
+        @font-face {
+            font-family: fusion-pixel-12px-proportional-ko;
+            src: url("fusion-pixel-12px-proportional-ko.woff2?r=0.33801323186344034");
+        }
+        .font-12px-proportional :lang(ko) {
+            font-family: fusion-pixel-12px-proportional-ko, sans-serif;
+        }
+        .font-12px-proportional .title {
+            font-size: 48px;
+            font-weight: normal;
+            line-height: 72px;
+            text-shadow: 2px 2px #4b4b4b;
+        }
+        .font-12px-proportional .text {
+            font-size: 24px;
+            line-height: 36px;
+            text-shadow: 2px 2px #4b4b4b;
+        }
+        .font-12px-proportional .copyright {
+            font-size: 24px;
+            line-height: 36px;
+            text-shadow: 2px 2px #4b4b4b;
+        }
+        .font-12px-proportional .link-group {
+            margin-top: 6px;
+            margin-bottom: 6px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+        .font-12px-proportional .link-tab {
+            margin-left: 12px;
+            margin-right: 12px;
+            font-size: 24px;
+            line-height: 36px;
+            text-shadow: 2px 2px #4b4b4b;
+        }
+        @keyframes background-scrolling {
+            100% {
+                background-position: 128px 128px;
+            }
+        }
+        body {
+            color: white;
+            background-color: #7247cb;
+            background-image: linear-gradient(45deg, mediumpurple 25%, transparent 25%, transparent 75%, mediumpurple 75%), linear-gradient(-45deg, mediumpurple 25%, transparent 25%, transparent 75%, mediumpurple 75%);
+            background-size: 128px 128px;
+            background-attachment: fixed;
+            animation: background-scrolling 4s infinite linear;
+        }
+        a {
+            color: white;
+        }
+        .options-group {
+            height: 36px;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            background-color: rebeccapurple;
+            box-shadow: 0 1px 8px rgba(75, 75, 75, 0.8);
+        }
+        .option {
+            height: 100%;
+            margin-left: 24px;
+            margin-right: 24px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            color: white;
+            font-family: fusion-pixel-12px-monospaced-latin, sans-serif;
+            font-size: 24px;
+            line-height: 36px;
+        }
+        .option input[type="radio"] {
+            display: none;
+        }
+        .option input[type="radio"] + span {
+            width: 10px;
+            height: 10px;
+            margin-left: 12px;
+            margin-right: 12px;
+            border-width: 2px;
+            border-color: white;
+            border-style: solid;
+        }
+        .option input[type="radio"]:checked + span {
+            background-color: white;
+        }
+        #page {
+            margin-top: 64px;
+            margin-bottom: 24px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+    </style>
+
+    <script>
+        (function () {
+            let hm = document.createElement('script');
+            hm.src = 'https://hm.baidu.com/hm.js?3fff78ad08b6161b903a61bceb25adb1';
+            let s = document.getElementsByTagName('script')[0];
+            s.parentNode.insertBefore(hm, s);
+        })();
+    </script>
+
+    <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
+    <script>LA.init({id: 'KDw2RWLvwgZA8EM4', ck: 'KDw2RWLvwgZA8EM4'})</script>
+
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-9J2VKMZMSN"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+        gtag('js', new Date());
+        gtag('config', 'G-9J2VKMZMSN');
+    </script>
+</head>
+<body>
+    <form class="options-group">
+        <label class="option">
+            <input id="radio-font-size-8" name="font_size" type="radio" onchange="onFontSizeChange('8');">
+            <span></span>
+            8px
+        </label>
+        <label class="option">
+            <input id="radio-font-size-10" name="font_size" type="radio" onchange="onFontSizeChange('10');">
+            <span></span>
+            10px
+        </label>
+        <label class="option">
+            <input id="radio-font-size-12" name="font_size" type="radio" onchange="onFontSizeChange('12');">
+            <span></span>
+            12px
+        </label>
+    </form>
+    <div id="page">
+        <h1 class="title" lang="zh-hans">缝合像素字体 / Fusion Pixel Font</h1>
+        <br>
+        <div class="text" lang="zh-hans">★ 开源的泛中日韩像素字体 ★</div>
+        <div class="link-group" lang="en">
+            <a class="link-tab" href="https://github.com/TakWolf/fusion-pixel-font" target="_blank">github</a>
+            <a class="link-tab" href="https://discord.gg/3GKtPKtjdU" target="_blank">discord</a>
+        </div>
+        <br>
+        <div class="text" lang="zh-hans">我们度过的每个平凡的日常，也许就是连续发生的奇迹。</div>
+        <div class="text" lang="zh-hant">我們度過的每個平凡的日常，也許就是連續發生的奇蹟。</div>
+        <div class="text" lang="ja">日々、私たちが過ごしている日常は、実は奇跡の連続なのかもしれない。</div>
+        <div class="text" lang="en">THE QUICK BROWN FOX JUMPS OVER A LAZY DOG.</div>
+        <div class="text" lang="en">the quick brown fox jumps over a lazy dog.</div>
+        <div class="text" lang="en">0123456789</div>
+        <div class="text" lang="en">★☆☺☹♠♡♢♣♤♥♦♧☀☼♩♪♫♬☂☁⚓✈⚔☯</div>
+        <br>
+        <div class="link-group" lang="en">
+            <a class="link-tab" href="playground.html" target="_blank">playground</a>
+        </div>
+        <div class="link-group" lang="en">
+            <span class="link-tab">8px</span>
+            <a class="link-tab" href="alphabet-8px-monospaced.html" target="_blank">alphabet-monospaced</a>
+            <a class="link-tab" href="alphabet-8px-proportional.html" target="_blank">alphabet-proportional</a>
+            <a class="link-tab" href="demo-8px.html" target="_blank">demo</a>
+        </div>
+        <div class="link-group" lang="en">
+            <span class="link-tab">10px</span>
+            <a class="link-tab" href="alphabet-10px-monospaced.html" target="_blank">alphabet-monospaced</a>
+            <a class="link-tab" href="alphabet-10px-proportional.html" target="_blank">alphabet-proportional</a>
+            <a class="link-tab" href="demo-10px.html" target="_blank">demo</a>
+        </div>
+        <div class="link-group" lang="en">
+            <span class="link-tab">12px</span>
+            <a class="link-tab" href="alphabet-12px-monospaced.html" target="_blank">alphabet-monospaced</a>
+            <a class="link-tab" href="alphabet-12px-proportional.html" target="_blank">alphabet-proportional</a>
+            <a class="link-tab" href="demo-12px.html" target="_blank">demo</a>
+        </div>
+        <br>
+        <div class="copyright" lang="en">© 2022 TakWolf</div>
+    </div>
+    <script>
+        let page = document.getElementById('page');
+
+        let configs = {
+            fontSize: 12,
+        };
+
+        function applyConfigs() {
+            localStorage.setItem('configs:index', JSON.stringify(configs));
+            page.className = 'font-' + configs.fontSize + 'px-proportional';
+        }
+
+        function onFontSizeChange(fontSize) {
+            configs.fontSize = fontSize;
+            applyConfigs();
+        }
+
+        (function () {
+            let json = localStorage.getItem('configs:index');
+            if (json) {
+                Object.assign(configs, JSON.parse(json));
+            }
+            document.getElementById('radio-font-size-' + configs.fontSize).checked = true;
+            applyConfigs();
+        })();
+    </script>
+</body>
+</html>