换到子主题后导航栏图标全变成小方框,控制台一排 404,请求的是父主题目录下的 fonts/icon.woff2,那个目录已经被清理掉了。日志里能对上时间点,这种反而好排。
父主题样式表里 @font-face 的 src 用的是相对路径,子主题复用父主题样式时,相对路径按子主题 style.css 的位置解析,指向了不存在的目录。图标字体没加载,码位就渲染成方框。这一点先确认清楚,后面就不用反复试。
@font-face {
font-family: 'theme-icons';
src: url('../assets/fonts/icon.woff2') format('woff2');
}
「字体图标 404」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。
报错里带路径的,先去看那个路径在不在、权限对不对。同一份配置存在多处的,先确认改的是被加载的那一份。
处理上按这个顺序:把字体文件复制到子主题 assets/fonts 目录,保留原文件名;在子主题样式里重写 @font-face,src 用绝对路径拼接;确认响应头里 woff2 的 MIME 是 font/woff2,类型不对也会被拦。
结果对不对很好判断,导航图标恢复显示,Network 面板里字体请求返回 200。
