CSS字体系列仅适用于同一类中的某些元素

-1

我已经做了一个简单的待办事项列表，我可以在每次用户输入并按Enter键时将新项目追加到现有列表中。CSS字体系列仅适用于同一类中的某些元素

我想改变字体，我将我的字体家族应用到Body标签中。但它只适用于我现有的元素，但不适用于已添加的新元素。

$("input").on("keypress", function(e) { 
 
    var newToDo = $(this).val(); 
 
    if (e.which == 13) { 
 
    $("ul").append('<li><span><i class="fa fa-bomb" aria-hidden="true"> ' + newToDo + '</li>'); 
 
    $(this).val(""); 
 
    } 
 
})

body { 
 
    font-family: Roboto; 
 
} 
 

 
body { 
 
    background: #36D1DC; 
 
    /* fallback for old browsers */ 
 
    background: -webkit-linear-gradient(to right, #5B86E5, #36D1DC); 
 
    /* Chrome 10-25, Safari 5.1-6 */ 
 
    background: linear-gradient(to right, #5B86E5, #36D1DC); 
 
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,700,500"> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> 
 
<div id="container"> 
 

 
    <h1>TO DO LIST <i class="fa fa-bolt" aria-hidden="true"></i></h1> 
 
    <input placeholder="Add New Todo" /> 
 
    <ul> 
 
    <li><span><i class="fa fa-bomb" aria-hidden="true"></i></span> TEST 1</li> 
 
    <li><span><i class="fa fa-bomb" aria-hidden="true"></i></span> TEST 2</li> 
 
    <li><span><i class="fa fa-bomb" aria-hidden="true"></i></span> TEST 3</li> 
 
    </ul> 
 

 

 
</div>

问题： 1.为什么由用户输入创建新条目，使用不同的字体，尽管我试图通过身体标记使用相同的字体。

POC，我已经尝试过： 1.确保没有重写，通过在所有CSS分配相同的字体。例如所有的类，ID都会有“font-family：Roboto;”

来源

2017-04-09 csamleong

如果我理解正确，那可能是因为没有正确设置append，因为它缺少一些关闭html标签（关闭i和span）。更新该行是：

$("ul").append('<li><span><i class="fa fa-bomb" aria-hidden="true"></i></span> ' + newToDo + '</li>');

我认为（无码演示）如你不关闭i它包装应用[字体真棒你的文字，用户输入的字体

来源

2017-04-09 20:58:24 Deanmv

好的发现 - 也强调了为什么OP实际上包含一个概念证明的例子，而不是在答案中的代码转储，它更容易诊断实际问题。 – Terry

@Deanmv我想这可能是另一件事，已经覆盖了我的字体类型，忽略了。感谢你的回答。 – csamleong

@Terry谢谢你的建议，我已删除不必要的代码，以便我的问题可以更简洁以备将来参考。 – csamleong

您最初的列表项目在<i>元素之外有其文本（“测试1”）。

当你虽然你错过了关闭</i>和</span>标签，因此文本被认为是<i>内，它的字体是由font-awesome.css的.fa规则集插入项目。

来源

2017-04-09 21:10:49

CSS字体系列仅适用于同一类中的某些元素

回答

相关问题