遇到这个问题确实让人头疼——中文字体无故变成默认黑体,英文字符要么显示为方块,要么直接回退到系统字体。更令人困惑的是,打开开发者工具检查,没有报错、没有警告,看似一切正常,但自定义字体就是加载不出来。真正的根源往往隐藏在那些容易被忽视的细节里:路径解析错误、协议限制问题,或者字体格式的兼容性差异。

要彻底排查这类Web字体加载失败的问题,需要从三个关键方向入手。
确认字体文件是否真正被请求并返回成功
打开百度浏览器,访问目标网页后按F12进入开发者工具,切换到Network选项卡,然后刷新页面。在筛选框输入类型关键词,比如woff2、ttf或font,观察对应字体资源请求的状态码和响应内容长度。
如果看到状态码为404,说明浏览器根本没有找到该字体文件;如果显示0或(failed),则很可能是file://协议限制或者跨域拦截造成的——直接把HTML拖拽到百度浏览器中打开,无法加载任何woff2或ttf字体。
点击那个字体请求,在Headers里检查Content-Type字段。正常情况下应为font/woff2、font/ttf或application/font-woff;如果返回的是text/plain或者空值,说明服务器未正确配置MIME类型,百度浏览器将拒绝解析该字体。
验证@font-face中url()路径是否相对于CSS文件位置
路径问题实际上是一个经典的陷阱,验证它有两种比较直接的方法。
方法一:手动校验路径基准。打开开发者工具的Elements选项卡,找到任意应用了自定义字体的元素,在Styles面板里点击对应@font-face规则旁边的CSS文件名,跳转到源码,然后仔细查看src: url()里的路径。
这里有一个关键点:url()的起点不是HTML文件所在的目录,而是CSS文件的物理位置。举个例子,CSS文件位于/static/css/app.css,字体文件位于/static/fonts/icon.woff2,则必须写成url('../fonts/icon.woff2')。如果误写成url('/fonts/icon.woff2'),百度浏览器会尝试请求https://当前域名/fonts/icon.woff2,而不是项目里的真实路径。
方法二:直接在地址栏访问字体URL。从Network面板里复制字体请求的完整地址(在Headers → Request URL中获取),粘贴到新标签页打开。如果页面打不开或返回403,说明路径或者服务器权限配置存在问题。
检查百度浏览器对woff2格式的实际支持与降级策略
基于Chromium的百度浏览器,内核版本通常在115到122之间,原生支持woff2格式。但有一个细节需要特别留意。
首先确认一下内核版本:在地址栏输入about:version,查看“WebKit内核版本”或“Blink版本”。主流版本没有兼容性问题,但@font-face声明中最好仍然提供多格式的fallback方案:
src: url('icon.woff2') format('woff2'), url('icon.woff') format('woff'), url('icon.ttf') format('truetype');
另一个必须警惕的问题是:绝对不要使用local()声明。比如写成src: local('MyIcon'), url('icon.woff2'),百度浏览器会直接跳过整个@font-face规则,这条规则相当于白写了,导致字体加载彻底失败。
