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

试试这个简单的方法

将 class 添加到文本的最佳方法是使用 <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

我不知道你的样式是否在外部样式表中，目前我假设没有，所以在你的 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 元素

Answer 3

使用 slightly-reworked 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 元素分开，则可以对每个元素应用 class。

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

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

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

Answer 4

只需将您的文本包裹在 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>

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

How To Use CSS To Add Multiple Fonts In One Paragraph?

html

css

fonts

使用 span