使用@font-face引入本地字体不生效搭配Bootstrap4.6字体显示异常如何解决

算力阿峰

2026-10-17

问题排查及修复方案

1. 字体家族名称拼写错误

你在@font-face中定义的字体名为fipps-regular，但实际调用时写的是flipps-regular（多了一个字母l），两者名称不匹配导致字体无法被正确识别调用。
修复方式：统一两侧的字体名称即可，比如将调用时的font-family值改为fipps-regular，或者将@font-face里的定义改为flipps-regular。

2. 字体文件路径错误

从给出的目录结构看，字体文件存放在Media/Fonts/Flipp/目录下，你写的路径../media/fonts/flipps/存在两处问题：

大小写不匹配：绝大多数线上服务器对路径大小写敏感，实际目录名是大写开头的Media、Fonts，子文件夹名为Flipp，不是小写的media、fonts，也不是拼写错误的flipps
相对路径层级对应错误：style.css存放在Style目录下，../对应回到项目根目录，正确路径需要和实际目录结构完全匹配

修复后的@font-face代码示例：

@font-face{
    font-family: fipps-regular;
    src: url(../Media/Fonts/Flipp/fipps-regular-webfont.woff2) format('woff2'),
         url(../Media/Fonts/Flipp/fipps-regular-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}