多div中使用多字体：字体类在div内不生效问题求助

核心问题：CSS语法错误 #

你的代码里每个@font-face规则都缺少闭合的大括号}，导致整个CSS块解析失败，后面的字体类选择器自然无法生效。

修正后的完整代码 #

<style>
@font-face {
    font-family: 'Alharbi';
    src: url('/fonts/Alharbi.ttf') format('truetype');
}
@font-face {
    font-family: 'Tahoma';
    src: url('/fonts/Tahoma.ttf') format('truetype');
}
@font-face {
    font-family: 'Kufyan';
    src: url('/fonts/Kufyan.ttf') format('truetype');
}

.Alharbi {
    font-family: 'Alharbi', sans-serif;
}
.Tahoma {
    font-family: 'Tahoma', sans-serif;
}
.Kufyan {
    font-family: 'Kufyan', sans-serif;
}
</style>

<div class="Alharbi text-center" style="padding:10px;width:100%;height:40px;">Alharbi Font In this Div</div>
<div class="Tahoma text-center" style="padding:10px;width:100%;height:40px;">Tahoma Font In this Div</div>
<div class="Kufyan text-center" style="padding:10px;width:100%;height:40px;">Kufyan Font In this Div</div>

额外优化与排查要点 #

• 新增format('truetype')声明：帮助浏览器识别字体格式，提升兼容性
• 添加回退字体（比如sans-serif）：当自定义字体加载失败时，页面不会出现乱码或默认字体断层
• 检查字体文件路径：确认/fonts/目录下确实存在对应的.ttf文件，路径大小写也要匹配（部分服务器区分大小写）
• 浏览器兼容性：如果需要支持旧版浏览器，可补充其他字体格式（如.woff、.woff2），进一步提升兼容性

内容的提问来源于stack exchange，提问作者khalid seleem