页头 logo 是一段特殊字体的文字,销售同事的 Windows 电脑上显示成五个方框,手机上换成另一种衬线体,只有设计师自己的机器正常。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,文字 logo 依赖本机字体,没装就回退到系统默认,字重和字宽全变。网页字体如果加载失败,同样会退回成方框。
「字体 logo 回退」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。
.logo {
font-family: "BrandSans", "PingFang SC", sans-serif;
}
权限不要一口气开到最大,先加到够用再往上试,范围小才好收。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。
具体做法是,把文字 logo 转成 SVG 路径 彻底不依赖字体;暂时不能转就加 font-display: swap 并配两档回退字体;logo 位置别用图标字体拼 那个最容易变方框;在没装字体的机器上截一次图确认。
最后用这个标准收尾,换一台没装品牌字体的电脑打开 logo 字形完整 没有方框。
