如何使用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

我不知道你的样式是否在外部样式表中，目前我假设没有，所以在你的头标签中放入：

<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 元素

Answer 5

sdfdsffsdsfsdfdfxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx