JS动态拼接HTML时内联CSS字体样式不生效问题咨询

问题原因 #

你的代码存在引号嵌套冲突，这是导致样式失效的核心原因：
你为style属性设置了外层单引号包裹，但内部定义font-family: 'Inter'时又使用了单引号，浏览器解析时会把'Inter'的第一个单引号识别为整个style属性的结束符，后续的font-size、font-weight等属性直接被截断，不会生效。

修复方案 #

方法1：移除无必要的字体名引号（最简单） #

不含特殊字符、空格的字体名称不需要加引号包裹，直接修改span的style属性即可，修改后的完整代码如下：

if (geoBarData != null && geoBarData[geoBarDataKeyName].length > 0) {
    for (var i = 0; i < geoBarData[geoBarDataKeyName].length; i++) {
        var arrLstProdak = geoBarData[geoBarDataKeyName][i].item_group_list;

        var BranchName = geoBarData[geoBarDataKeyName][i].name;
        var innerDiv = "<div class='col-md-6 col-lg-6'>";
        innerDiv += "<div class='panel panel-default' >";
        // 仅修改了本行style部分，去掉了Inter的单引号
        innerDiv += "<div class='panel-heading' style='background-color:white;'><span  id='title-combo-" + i + "' style='font-family: Inter, sans-serif;font-size:30px;font-weight:800;'>" + BranchName + "</span></div>";
        innerDiv += "<div class='panel-body'>";
        innerDiv += "<div id='combo_chart_div-" + i + "' style='height: 300px;'></div>";
        innerDiv += "</div>";
        innerDiv += "</div>";
        innerDiv += "</div>";
        $("#div_combo_group").append(innerDiv);
    }
}

方法2：转义内部引号 #

如果必须保留字体名的引号，把内部的单引号替换为转义双引号即可：

style='font-family: \"Inter\", sans-serif;font-size:30px;font-weight:800;'

补充排查 #

如果修复后样式仍不生效，可打开浏览器开发者工具的元素面板，检查对应span元素的样式：

• 确认样式属性是否正常出现在元素的style属性中
• 确认属性是否被其他更高优先级的CSS规则（比如框架自带的.panel-heading span样式）覆盖，如果被覆盖可以给属性加!important提升优先级，比如font-size:30px !important;

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