JetBrainsLxgwNerdMono/verify-2-1.html at master · sspig0127/JetBrainsLxgwNerdMono · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JetBrainsLxgwNerdMono 2:1 Ratio Verification</title>
    <style>
        /* Font faces will be dynamically generated */
        body {
            margin: 0;
            padding: 0;
            background-color: #1e1e1e;
            color: #d4d4d4;
        }

        .controls {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #2d2d2d;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            z-index: 1000;
        }

        .controls label {
            margin-right: 20px;
            font-size: 14px;
        }

        .controls select {
            background-color: #3c3c3c;
            color: #d4d4d4;
            border: 1px solid #555;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
        }

        .controls select:hover {
            background-color: #4c4c4c;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
            padding-top: 15vh;
        }

        .content {
            font-family: monospace;
            font-size: 3vw;
            line-height: 1.8;
            white-space: pre;
            letter-spacing: 0;
            transition: font-family 0.3s ease;
        }

        .separator {
            color: #666;
        }

        .loading {
            text-align: center;
            padding: 20px;
            font-size: 16px;
            color: #888;
        }

        .error {
            color: #f44;
        }
    </style>
</head>
<body>
    <div class="controls">
        <label for="weight-select">字重 / Weight:</label>
        <select id="weight-select">
            <option value="">Loading...</option>
        </select>
    </div>

    <div class="container">
        <div class="content" id="display-text">----------------中英文2:1---------------
|ab|cd|ef|gh|ij|kl|mn|op|qr|st|uv|wx|yz|
|这|应|该|是|中|英|文|完|美|的|2:|1等距|
|A0|1!|2@|3#|4$|5%|6^|7&|8*|9(|0)|=+|[]|
|󰈹|󰊕||󰀘|󰊤|󰍉|󰏔|󰖟|󰚩|󰌠|󰃻|󰜴|󰒍|</div>
    </div>

    <script>
        const MANIFEST_PATH = 'output/fonts/fonts-manifest.json';
        const FONTS_DIR = 'output/fonts/';

        const weightSelect = document.getElementById('weight-select');
        const displayText = document.getElementById('display-text');

        // Store loaded font info
        let loadedFonts = [];

        // Dynamically inject @font-face rules
        function injectFontFaces(fonts, familyName) {
            const style = document.createElement('style');
            let css = '';

            fonts.forEach(font => {
                const fontFamilyName = `${familyName}-${font.style}`;
                css += `
                    @font-face {
                        font-family: '${fontFamilyName}';
                        src: url('${FONTS_DIR}${font.filename}') format('truetype');
                    }
                `;
            });

            style.textContent = css;
            document.head.appendChild(style);
        }

        // Populate select dropdown
        function populateSelect(fonts) {
            weightSelect.innerHTML = '';

            fonts.forEach((font, index) => {
                const option = document.createElement('option');
                option.value = font.style;
                option.textContent = font.display_name;
                if (index === 0) option.selected = true;
                weightSelect.appendChild(option);
            });

            // Apply first font
            if (fonts.length > 0) {
                applyFont(fonts[0].style);
            }
        }

        // Apply selected font
        function applyFont(style) {
            const manifest = loadedFonts;
            if (manifest && manifest.family_name) {
                displayText.style.fontFamily = `'${manifest.family_name}-${style}', monospace`;
            }
        }

        // Load manifest and initialize
        async function init() {
            try {
                const response = await fetch(MANIFEST_PATH);
                if (!response.ok) {
                    throw new Error(`Failed to load manifest: ${response.status}`);
                }

                const manifest = await response.json();
                loadedFonts = manifest;

                // Inject font faces
                injectFontFaces(manifest.fonts, manifest.family_name);

                // Populate dropdown
                populateSelect(manifest.fonts);

                // Update page title
                document.title = `${manifest.family_name} 2:1 Ratio Verification`;

            } catch (error) {
                console.error('Error loading fonts:', error);
                weightSelect.innerHTML = '<option value="" class="error">Error loading fonts</option>';

                // Fallback: try to detect fonts from common patterns
                fallbackMode();
            }
        }

        // Fallback mode when manifest is not available
        function fallbackMode() {
            const defaultFonts = [
                { style: 'Regular', display_name: 'Regular' },
                { style: 'Medium', display_name: 'Medium' },
                { style: 'Italic', display_name: 'Italic' },
                { style: 'MediumItalic', display_name: 'Medium Italic' }
            ];

            const familyName = 'JetBrainsLxgwNerdMono';
            loadedFonts = { family_name: familyName, fonts: defaultFonts };

            injectFontFaces(defaultFonts.map(f => ({
                ...f,
                filename: `${familyName}-${f.style}.ttf`
            })), familyName);

            populateSelect(defaultFonts);
        }

        // Event listener for weight change
        weightSelect.addEventListener('change', function() {
            applyFont(this.value);
        });

        // Initialize on page load
        init();
    </script>
</body>
</html>