拒绝一个个点开！用 Python 写个超实用的本地字体预览工具#

你一定经历过这样的崩溃时刻：

下载了一个庞大的字体包（里面有几十上百个 .ttf 或 .otf 文件），想要挑一个适合当前项目的字体，结果发现：

系统预览太慢：必须双击每一个文件，等待系统字体查看器弹出来。
无法对比：一次只能看一个，关掉这个才能看下一个，完全没法做直观的对比。
文案固定：系统预览通常只显示 “The Quick Brown Fox” 或者 “天地玄黄”，根本没法看到你项目里实际要用的文案（比如标题）是什么效果。
垃圾文件干扰：如果在 macOS 下解压的文件，经常混杂着 ._ 开头的垃圾文件，很烦人。

痛点总结： 面对一堆字体文件，筛选难、预览难、对比难。

为了解决这个问题，我花半小时写了一个 Python 脚本。它不需要安装任何第三方库，就能瞬间把当前文件夹变成一个可视化的字体网页，支持自定义文案预览，还能一键调用系统安装。

它可以做什么？#

这个脚本（view_fonts.py）只有不到 100 行代码，但功能非常硬核：

零依赖：只用 Python 标准库，不用 pip install 任何东西，即拷即用。
批量扫描：自动扫描当前目录及子目录下的所有字体文件（.ttf, .otf, .woff 等）。
Web 可视化：直接在浏览器中渲染字体，利用 CSS 的 @font-face 实现最真实的预览。
自定义预览：网页顶栏有一个输入框，输入什么文字，下面几百个字体就立刻显示什么文字。
一键安装/打开：看到喜欢的字体，点击旁边的“安装/查看”按钮，直接调用系统（Windows/Mac/Linux）的原生程序打开该文件，方便你点击“安装”。
智能过滤：自动忽略 macOS 产生的 ._ 隐藏文件，界面清清爽爽。

效果预览#

运行脚本后，浏览器打开 http://localhost:8899，你将看到如下界面：

控制栏：可以输入想要预览的文案，拖动滑块调整字体大小。
卡片流：每一个字体都是一张卡片，显示文件名、路径，以及大大的预览区域。

代码实现#

新建一个文件 view_fonts.py，将以下代码复制进去：

1
import os
2
import http.server
3
import socketserver
4
import urllib.parse
5
import sys
6
import platform
7
import subprocess
8

9
# === 配置 ===
10
PORT = 8899
11
EXTENSIONS = ('.ttf', '.otf', '.woff', '.woff2')
12

13
class FontPreviewHandler(http.server.SimpleHTTPRequestHandler):
14
    def do_GET(self):
15
        # 解码 URL (处理中文路径)
16
        req_path = urllib.parse.unquote(self.path)
17

18
        # === 接口：请求打开文件 (实现“点击安装”的前一步) ===
19
        if req_path.startswith('/api/open'):
20
            # 解析参数，获取文件路径
21
            query = urllib.parse.urlparse(req_path).query
22
            params = urllib.parse.parse_qs(query)
23
            if 'path' in params:
24
                file_rel_path = params['path'][0] # 获取相对路径
25
                # 拼接回绝对路径
26
                abs_path = os.path.abspath(os.path.join(os.getcwd(), file_rel_path))
27

28
                print(f"尝试打开文件: {abs_path}")
29
                self.open_file_in_system(abs_path)
30

31
                self.send_response(200)
32
                self.end_headers()
33
                self.wfile.write(b"OK")
34
            return
35

36
        # === 页面：主页 ===
37
        if req_path == '/':
38
            self.send_response(200)
39
            self.send_header('Content-type', 'text/html; charset=utf-8')
40
            self.end_headers()
41

42
            font_files = []
43
            current_dir = os.getcwd()
44

45
            # 扫描文件
46
            for root, dirs, files in os.walk(current_dir):
47
                for file in files:
48
                    # 1. 过滤掉 macos 的垃圾文件 (以 ._ 开头)
49
                    if file.startswith('._'):
50
                        continue
51

52
                    if file.lower().endswith(EXTENSIONS):
53
                        full_path = os.path.join(root, file)
54
                        rel_path = os.path.relpath(full_path, current_dir)
55
                        # Web 路径需要转义，但保留原始路径用于“打开”功能
56
                        web_path = urllib.parse.quote(rel_path.replace('\\', '/'))
57

58
                        font_files.append({
59
                            'name': file,
60
                            'web_path': web_path,   # 给浏览器加载字体用
61
                            'raw_path': rel_path.replace('\\', '/'), # 给 Python 打开文件用
62
                            'id': f'font_{len(font_files)}'
63
                        })
64

65
            html_content = self.generate_html(font_files)
66
            self.wfile.write(html_content.encode('utf-8'))
67
        else:
68
            # === 静态资源：加载字体文件 ===
69
            super().do_GET()
70

71
    def open_file_in_system(self, filepath):
72
        """跨平台打开文件"""
73
        try:
74
            if platform.system() == 'Darwin':       # macOS
75
                subprocess.call(('open', filepath))
76
            elif platform.system() == 'Windows':    # Windows
77
                os.startfile(filepath)
78
            else:                                   # Linux
79
                subprocess.call(('xdg-open', filepath))
80
        except Exception as e:
81
            print(f"打开文件失败: {e}")
82

83
    def generate_html(self, fonts):
84
        css_rules = []
85
        html_cards = []
86

87
        for f in fonts:
88
            css_rules.append(f"""
89
                @font-face {{ font-family: '{f['id']}'; src: url('{f['web_path']}'); }}
90
            """)
91

92
            # 注意：这里增加了一个“安装/打开”按钮
93
            html_cards.append(f"""
94
                <div class="font-card">
95
                    <div class="font-info">
96
                        <div class="info-left">
97
                            <span class="font-filename">{f['name']}</span>
98
                            <span class="font-path">{f['raw_path']}</span>
99
                        </div>
100
                        <button class="install-btn" onclick="openFile('{f['raw_path']}')">安装 / 查看</button>
101
                    </div>
102
                    <div class="preview-area" style="font-family: '{f['id']}';">
103
                        天地玄黄 宇宙洪荒 The Quick Brown Fox
104
                    </div>
105
                </div>
106
            """)
107

108
        full_html = f"""
109
        <!DOCTYPE html>
110
        <html>
111
        <head>
112
            <title>字体预览 v2.0</title>
113
            <style>
114
                body {{ font-family: system-ui, sans-serif; background: #f0f2f5; padding: 20px; max-width: 1200px; margin: 0 auto; color: #333; }}
115
                .controls {{ position: sticky; top: 0; background: #fff; padding: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); z-index: 100; border-radius: 8px; margin-bottom: 20px; display: flex; gap: 15px; align-items: center; }}
116
                input[type="text"] {{ flex: 1; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 6px; }}
117

118
                .font-list {{ display: grid; gap: 20px; }}
119
                .font-card {{ background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #e1e4e8; transition: transform 0.2s; }}
120
                .font-card:hover {{ box-shadow: 0 4px 12px rgba(0,0,0,0.12); border-color: #2196f3; }}
121

122
                .font-info {{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }}
123
                .info-left {{ display: flex; flex-direction: column; }}
124
                .font-filename {{ font-weight: bold; font-size: 14px; color: #1f2937; }}
125
                .font-path {{ font-size: 12px; color: #9ca3af; margin-top: 2px; }}
126

127
                /* 按钮样式 */
128
                .install-btn {{
129
                    background: #2563eb; color: white; border: none; padding: 8px 16px;
130
                    border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500;
131
                    transition: background 0.2s;
132
                }}
133
                .install-btn:hover {{ background: #1d4ed8; }}
134
                .install-btn:active {{ transform: scale(0.98); }}
135

136
                .preview-area {{ font-size: 32px; word-break: break-all; line-height: 1.4; padding: 10px 0; }}
137

138
                {''.join(css_rules)}
139
            </style>
140
        </head>
141
        <body>
142
            <div class="controls">
143
                <input type="text" id="input-text" placeholder="输入文字预览..." value="天地玄黄 宇宙洪荒 The Quick Brown Fox">
144
                <label>大小: <input type="range" id="size-range" min="12" max="120" value="36"></label>
145
                <span style="font-size:14px; color:#666">共 {len(fonts)} 个字体</span>
146
            </div>
147

148
            <div class="font-list">
149
                {''.join(html_cards)}
150
            </div>
151

152
            <script>
153
                const input = document.getElementById('input-text');
154
                const range = document.getElementById('size-range');
155
                const previews = document.querySelectorAll('.preview-area');
156

157
                input.addEventListener('input', (e) => {{
158
                    const val = e.target.value || 'Preview Text';
159
                    previews.forEach(div => div.textContent = val);
160
                }});
161

162
                range.addEventListener('input', (e) => {{
163
                    previews.forEach(div => div.style.fontSize = e.target.value + 'px');
164
                }});
165

166
                // 调用 Python 接口打开文件
167
                function openFile(filePath) {{
168
                    // 对路径进行编码，防止中文乱码
169
                    const encodedPath = encodeURIComponent(filePath);
170
                    fetch(`/api/open?path=${{encodedPath}}`)
171
                        .then(res => {{
172
                            if(res.ok) console.log('已请求打开文件');
173
                        }})
174
                        .catch(err => console.error('打开失败', err));
175
                }}
176
            </script>
177
        </body>
178
        </html>
179
        """
180
        return full_html
181

182
# 启动
183
print(f"正在扫描 (已过滤 ._ 文件)...")
184
print(f"打开: http://localhost:{PORT}")
185
socketserver.TCPServer.allow_reuse_address = True
186
with socketserver.TCPServer(("", PORT), FontPreviewHandler) as httpd:
187
    try:
188
        httpd.serve_forever()
189
    except KeyboardInterrupt:
190
        pass