StatiCrypt自定义字体：为密码界面添加独特的排版风格

2026-02-05 04:04:15作者：钟日瑜

你是否正在使用StatiCrypt保护静态网页内容，却觉得默认的密码输入界面过于单调？想要让品牌风格在用户访问的第一刻就得到展现？本文将详细介绍如何通过修改lib/password_template.html文件，为StatiCrypt生成的密码保护页面添加自定义字体，打造独特的视觉体验。

了解StatiCrypt密码界面结构

StatiCrypt的密码保护界面完全由lib/password_template.html文件控制。这个模板包含了页面的HTML结构和内联CSS样式，决定了用户访问受保护页面时看到的密码输入表单的外观和布局。

模板中的关键样式定义位于<style>标签内，其中第106行定义了全局字体族：

.staticrypt-content {
    height: 100%;
    margin-bottom: 1em;
    background: /*[|template_color_secondary|]*/ 0;
    font-family: "Arial", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

默认使用的是Arial无衬线字体，这正是我们需要修改的地方。

自定义字体的两种实现方式

方式一：使用系统字体栈

如果你的目标用户设备上可能已安装特定字体，可以直接使用系统字体栈。修改lib/password_template.html中的font-family属性：

font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;

这种方式的优势是无需额外加载资源，页面加载速度快，但无法保证所有用户都能看到一致的字体效果。

方式二：引入外部字体（推荐）

为确保所有用户看到一致的字体效果，推荐使用Web字体。我们可以通过国内CDN引入开源字体，例如思源黑体：

首先，在lib/password_template.html的<head>标签内添加字体引入代码（建议放在现有<style>标签之前）：

<link href="https://fonts.lug.ustc.edu.cn/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">

然后修改font-family属性：

font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;

这里使用了中国科学技术大学的开源软件镜像站提供的字体CDN服务，确保国内用户的访问速度和稳定性。

完整修改步骤

备份原始模板：在修改前建议备份lib/password_template.html文件，防止意外情况需要恢复。
引入字体资源：在模板的<head>区域添加字体CDN链接，如上文所示。
修改字体样式：找到.staticrypt-content选择器，更新font-family属性。
调整其他元素字体（可选）：如果需要对特定元素（如标题、按钮）使用不同字体，可以添加额外的CSS规则：

.staticrypt-title {
    font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
    font-weight: 700;
}

.staticrypt-decrypt-button {
    font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
    font-weight: 500;
}