内嵌CSS引入Glyphicons Halflings字体图标不生效问题排查

你的代码存在3个核心问题，逐一修正即可正常显示图标：

• 字体声明语法错误：@font-face是CSS专属的全局规则，必须单独在样式顶层声明，它的src属性不能写在普通元素的样式块里。你把字体加载路径直接塞到了伪元素的样式规则中，浏览器会直接忽略这条无效属性，根本不会加载对应的图标字体文件。
• 伪元素样式配置不全：Glyphicons图标字体要求字重必须为400、字体样式为normal，你只给伪元素配置了font-family和content，缺失必要的字体属性，会导致字形匹配失败渲染不出来。
• HTML结构不规范：代码末尾多写了一个</body>闭合标签，属于无效语法，虽然多数浏览器会自动容错，但极端场景下会触发渲染异常。

修复后完整代码 #

<html>
<head>
    <style>
        /* 全局单独声明字体，不要嵌套在其他选择器内 */
        @font-face {
            font-family: "Glyphicons Halflings";
            src: url(/fonts/glyphicons-halflings-regular.woff2) format("woff2");
            font-weight: 400;
            font-style: normal;
        }
        .header.expand .sign:after {
            font-family: "Glyphicons Halflings";
            font-weight: 400;
            font-style: normal;
            content: "\e253";
            /* 可根据自身布局需求调整显示模式 */
            display: inline-block;
        }
    </style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr class="header expand">
        <td><span class="sign"></span></td>
    </tr>
</table>
</body>
</html>

额外排查提示 #

如果修正语法后图标仍不显示，优先检查字体文件路径：你写的/fonts/xxx是站点根路径，只有HTML通过web服务部署在站点根目录时才能正常加载。如果是本地直接打开HTML文件，这个路径会指向系统盘根目录，必然找不到字体文件，可以将路径改为HTML同级目录的相对路径./fonts/xxx.woff2，也可以把字体文件转成base64编码直接内嵌到@font-face的src属性中，实现真正的单文件无外部依赖。

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