离线时@import webfont必然失败，因需联网获取css及字体文件；phpmyadmin默认用系统字体，未修改即无加载问题；自托管需本地@font-face声明、正确路径、字体名前置且权限/mime配置到位。
离线环境无法加载 Google Fonts，但 phpMyAdmin 本身不依赖 WebFont；如果你在本地修改了界面 CSS 强行引入 @import url('https://fonts.googleapis.com/...')，那必然失败——这不是配置问题，是根本不可行。
为什么离线时 @import WebFont 一定失败
浏览器遇到 @import url('https://...') 会发起网络请求，离线状态下 DNS 查询失败或连接被拒，整个 CSS 规则会被忽略（或降级为部分解析失败），font-family 声明不会生效。phpMyAdmin 默认用系统字体（system-ui, sans-serif），没动过样式就不存在“加载失败”一说。
常见误操作：从某博客复制了一段美化 CSS，里面含 Google Fonts 引入，直接贴进 phpmyadmin/css/custom.css 或内联 <style></style>，结果字体没变、控制台还报 net::ERR_INTERNET_DISCONNECTED。
- WebFont 的
@import/@font-face必须联网才能获取 CSS 描述文件和字体二进制文件 - 离线环境里，唯一可行路径是自托管字体文件（.woff2/.woff）并用本地
@font-face声明 - phpMyAdmin 没有内置字体替换机制，所有字体变更都靠你手动改 CSS
自托管 WebFont 的正确路径写法
把 Inter 或 Roboto 等字体文件（建议优先选 .woff2）放进 phpMyAdmin 目录下，比如：phpmyadmin/fonts/inter-var-latin.woff2。然后在 phpmyadmin/css/custom.css 里写：
@font-face {
font-family: 'Inter Variable';
src: url('./fonts/inter-var-latin.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
body {
font-family: 'Inter Variable', system-ui, sans-serif;
}
关键点：
-
url('./fonts/...')是相对路径，必须相对于custom.css所在位置（即 css/ 目录），不是相对于 HTML 页面 - 若把字体放到了
phpmyadmin/static/fonts/，就得写url('../static/fonts/...')，而不是瞎猜./fonts/ - 务必检查浏览器 Network 面板：请求的完整 URL 是否 200，路径是否和你项目实际目录结构一致
- Webpack/Vite 不介入 phpMyAdmin 的静态资源加载，不用管构建配置，只看 HTTP 请求是否命中真实文件
字体声明顺序错导致 fallback 覆盖 WebFont
即使字体文件成功加载，font-family 写成 system-ui, 'Inter Variable', sans-serif 也会让浏览器跳过下载——它看到 system-ui 已可用，就不再触发 @font-face 下载。
必须把自定义字体名放在最前：
- ✅ 正确：
font-family: 'Inter Variable', system-ui, sans-serif; - ❌ 错误：
font-family: system-ui, 'Inter Variable', sans-serif; - 每个字体名必须用英文单引号包裹，空格、连字符、大小写全敏感（
'Inter Variable'≠'Inter'） - 末尾保留
sans-serif，否则旧系统可能回退到Times New Roman
离线环境最容易被忽略的两个细节
一是字体文件权限：Linux 下若 phpMyAdmin 运行用户（如 www-data）对 fonts/ 目录无读取权限，请求返回 403；二是 MIME 类型缺失：Apache/Nginx 若未配置 .woff2 的 Content-Type: font/woff2，部分浏览器（尤其是旧版 Firefox）会拒绝加载。这两项不报明显错误，但字体就是不出现。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
