在本地开发网页时，有时会遇到明明写好了@font-face规则，字体文件也放在正确路径，但页面字体就是显示不正常，甚至退回系统默认字体。这种现象很多时候并不是代码错误，而是Chrome扩展在后台干扰了字体加载流程。
为什么Chrome扩展会干扰本地字体
Chrome扩展通常通过内容脚本（content script）向页面注入CSS或JS。以下几种做法最容易影响本地网页字体：
- 注入全局CSS，使用通配符选择器重写font-family，覆盖页面设定
- 通过JS修改document.body.style或插入<style>标签改变字体规则
- 利用网络请求监听拦截localhost或file协议下的字体文件请求
- 启用实验性API强制替换页面渲染字体
如何快速定位问题扩展
使用隐身窗口排查
打开Chrome隐身窗口（默认不加载扩展），访问同一本地页面。如果字体恢复正常，基本可以确定是扩展导致。
逐个关闭扩展验证
在地址栏进入扩展管理页，逐个关闭扩展并刷新本地页面，观察字体变化。
开发者工具观察
打开DevTools的Network面板，筛选Font类型请求。若发现字体请求被扩展相关脚本取消或重定向，可锁定来源。
禁用或限制扩展的方案
临时禁用
在扩展管理页关闭对应扩展开关即可，适合调试阶段。
按网站启用
部分扩展支持设置仅在指定网站运行。进入扩展详情，将本地网址加入排除列表。
代码层规避
提高本地样式优先级，使用内联样式或!important减少被覆盖概率：
/* 提升本地字体优先级 */
@font-face {
font-family: 'MyLocalFont';
src: url('fonts/my.woff2') format('woff2');
}
body {
font-family: 'MyLocalFont' !important;
}
使用启动参数隔离
可用独立用户数据目录启动Chrome，避免加载任何扩展：
chrome --user-data-dir=/tmp/dev_profile --disable-extensions
小结
Chrome扩展干扰本地字体加载多因内容脚本注入引起。通过隐身窗口、扩展管理和DevTools能快速定位，采取禁用、按站限制或代码规避即可解决。