phpmyadmin sql编辑器字体需通过css修改,因底层使用codemirror 5且无$cfg['fontfamily']配置项;推荐在自定义theme css中添加.codemirror{font-family:... !important; font-size:... !important},并注意等宽字体链与跨平台兼容性。
phpmyadmin 的 sql 编辑器字体不能通过界面设置直接改,必须修改 codemirror 配置或 css —— 因为它底层用的是 codemirror 5,而字体控制权在它的 font-family 和 font-size css 规则里。
为什么 config.inc.php 里的 $cfg['FontFamily'] 不生效?
phpMyAdmin 并没有 $cfg['FontFamily'] 这个配置项(常见误传)。所谓“字体设置”实际是 CodeMirror 渲染层的样式,PHP 层配置只影响连接、语言、主题等,不触达编辑器 DOM 样式。
- 搜索 config.inc.php 发现
$cfg['FontFamily']→ 肯定是错的,删掉,避免干扰 - 真正生效的是浏览器加载的
codemirror.css或自定义主题 CSS 中的.CodeMirror类规则 - phpMyAdmin 5.2.0+ 会把
./themes/original/css/codemirror/下所有theme-*.css合并注入,这是唯一可控入口
手动覆盖 CodeMirror 字体的两种可靠方式
推荐优先用「主题 CSS 注入」,比改原始文件更安全、可复用;「直接 patch codemirror.css」适合快速验证但易被升级覆盖。
-
方式一(推荐):在自定义主题 CSS 里加字体声明
比如你已启用$cfg['CodemirrorTheme'] = 'dracula';,就编辑./themes/original/css/codemirror/theme-dracula.css,在文件末尾追加:
.CodeMirror {
font-family: "Fira Code", "SFMono-Regular", Menlo, monospace !important;
font-size: 14px !important;
}
-
方式二(临时调试):直接改 phpMyAdmin 自带的 codemirror.css
路径通常是./js/codemirror/lib/codemirror.css,找到.CodeMirror块,插入同上font-family和font-size,保存后清浏览器缓存 - 注意:
!important必须加,否则 phpMyAdmin 的内联样式或 theme CSS 可能覆盖它
字体选型和兼容性注意事项
别随便套用系统字体名,尤其 Windows/macOS/Linux 之间差异大;CodeMirror 是等宽编辑器,必须用等宽字体,否则 SQL 对齐错乱。
- 安全组合(跨平台可用):
"Fira Code", "JetBrains Mono", "Source Code Pro", Consolas, "Liberation Mono", monospace - 避免用
"Microsoft YaHei"或"PingFang SC"单独作为首项——它们不是等宽字体,中文字符会挤在一起 - 如果要支持中文,确保字体链中至少有一个含中文的等宽字体(如
"YaHei Consolas Hybrid"),且 Web 服务器能加载(无需 @font-face,依赖系统已安装) -
font-size建议设为13px–15px:太小伤眼,太大拖慢滚动,且 phpMyAdmin 左侧导航栏宽度固定,字号过大可能触发横向滚动条
改完没反应?重点排查这三处
字体不生效几乎全是缓存或权限问题,跟配置逻辑无关。
- 浏览器强制刷新:
Ctrl+Shift+R(Windows/Linux)或Cmd+Shift+R(macOS),禁用 Dark Reader 等覆盖样式插件 - PHP OPcache 缓存了 config 或 CSS 文件:执行
sudo systemctl restart php*-fpm(Ubuntu/Debian)或sudo service php-fpm restart(CentOS) - 文件权限不对:
theme-dracula.css必须是644,且 Web 用户(如www-data)有读取权限;检查ls -l ./themes/original/css/codemirror/
真正麻烦的不是加字体,而是让不同操作系统、不同浏览器、不同中文环境下的等宽字体链稳定 fallback —— 多试几次 font-family 顺序,用 DevTools 实时看 computed style 才算落地。
php免费学习视频:立即使用
踏上前端学习之旅,开启通往精通之路!从前端基础到项目实战,循序渐进,一步一个脚印,迈向巅峰!











