如何使用 CSS 在一个段落中添加多个字体？

Question

我正在尝试将标题和文本合并到一个段落中。但是，标题应该有不同于文本的字体。我可以使用很多<div> 来让它工作，但这样做很难。我希望在没有很多<div> 的情况下做到这一点，但我认为没有任何<div> 可能是不可能的。这是我的代码：

<div class="blue">
<p class="font2">
Bits
</p>
<br>
<p class="font1">
Een bit is een kleine schakelaar die open of gesloten is. 
De bit krijgt de waarde 1 of 0 als de schakelaar open of gesloten is.
De enen en nullen kunnen worden gezien als ja en nee of aan en uit.
Computers gebruiken deze waarden om informatie op te slaan en te lezen.
</p>
</div>

感谢您的帮助！

我还想问另一个问题：

 #menu1 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 20px; color: #FFFFFF; padding: 5px 5px;} 
    #menu1 a:hover {background-color: #0088FF} 
    #menu1 li {display: inline-block;} 
    #menu1 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

这是我的代码。我正在尝试将所有内容都放在一个 #menu1 之下，因为我正在处理多个菜单并且我不想丢失我的概述。

感谢您的帮助！

Answer 1

用 span 试试这个简单的方法

向文本添加类的最佳方法是使用 <span> 并更改样式使用 font-family:

.bold {
  font-family: cursive
}

.italic {
  font-family: fantasy
}

.underline {
  font-family: monospace
}

.italic {
  font-family: serif
}

<div class="blue">
  <p class="font2">
    Bits
  </p>
  <br>
  <p class="font1">
    <span class="bold">Een bit is een kleine schakelaar die open of gesloten is.</span>
    <span class="italic">De bit krijgt de waarde 1 of 0 als de schakelaar open of gesloten is.</span>
    <span class="underline">De enen en nullen kunnen worden gezien als ja en nee of aan en uit.</span>
    <span class="boldit">Computers gebruiken deze waarden om informatie op te slaan en te lezen.</span>
  </p>
</div>

Answer 2

稍微修改 HTML 以改进结构，您可能会有更好的运气。例如：

<h2>Bits</h2>

<p>
Een bit is een kleine schakelaar die open of gesloten is. 
De bit krijgt de waarde 1 of 0 als de schakelaar open of gesloten is.
De enen en nullen kunnen worden gezien als ja en nee of aan en uit.
Computers gebruiken deze waarden om informatie op te slaan en te lezen.
</p>

h2 应该是适当的级别。

现在，您可以通过定位h2 和p 来随意设置样式。如果您希望将它们分组，出于语义原因，您可以将两者包装在 section 元素中。否则，如果您希望将每个元素与文档中的其他 h2 / p 元素分开设置样式，则可以对每个元素应用一个类。

现在，您希望对每个元素应用什么样式？例如，您可以从：

h2 { font-family: sans-serif; }
 p { font-family: serif; }

根据另一个答案和这个问题的标题，说您希望段落中的每个句子具有潜在的不同风格是否正确？

Answer 3

只需将您的文本包装在 span 中并添加一个 class，默认情况下它是 inline，不会断行：

<p>some text <span class="font1">with a headline</span> and some other text in the same paragraph with <span class="font2">another headline</span></p>

Answer 4

我不知道你的样式是否在外部样式表中，在这一点上我假设没有，所以在你的 head 标签中放置：

<style>
.font1{
   font-family:arial /* put whatever font you want here */
}
.font2{
   font-family:helvetica /* put whatever font you want here */
}
</style>

如果你不是，你应该外化你的样式，我会考虑使用 h1、h2、h3 标签等而不是 p 元素作为标题