如何用HTML中的不同标签使文字变粗(3种方法)

758 阅读3分钟

当你建立一个网站时,你可能想在某些文字上特别强调,让用户知道它的重要性。

在HTML中,你可以通过各种文本格式化标签来做到这一点。

在这篇文章中,我将带你了解如何通过加粗来强调某些文本。

在HTML中,有三种主要的方法可以用来将文本加粗。你可以使用<b> 标签、<strong> 标签,或者你可以在CSS中使用font-weight 属性。让我们更详细地看一下每种方法。

如何用HTML中的<b> 标签使文字变粗

HTML给我们提供了<b> 标签来使文本变粗。要用这个标签使文本变粗,你需要像这样把它包在文本周围:

<p><b>This text is bold</b>, but this text is not.</p>

bold-with-b-tag

正如你在图片中看到的那样,该标签使部分文字变得突出。

如何用HTML中的<strong> 标签使文本变粗

使用<strong> 标签,你不仅仅是让文本变粗,你是在呼吁人们特别注意它。

<strong> 这个标签也像 标签一样使文本变粗,但两者之间有一点区别。我将在文章后面讨论这个问题。<b>

就像<b> 标签一样,你需要把<strong> 标签包在文本周围,使文本与它一起变粗:

<p>
   Before paying to learn programming, check out
   <strong>freeCodeCamp</strong>.
</p>

bold-with-strong-tag

有了<strong> 标签,freeCodeCamp 文本就不仅仅是加粗了,它还有语义上的意义和强调。

如何用CSS的font-weight 属性使文本变粗

font-weight属性把lighterboldbolder 作为值。它也接受从100到900的数字。所以,使用它,你不仅可以使文本变粗,还可以使它比周围的文本更轻。

要用font-weight weight属性使一些文本变粗,你需要用它的类、id(如果有的话)或元素选择文本,然后应用你想要的值,下面是它的工作原理:

<p>This is a <span class="lighter">lighter text</span>.</p>

<p>This is a <span class="bold">bold text</span>.</p>

<p>This is a <span class="bolder">bolder text</span>.</p>
 .lighter {
    font-weight: lighter;
}

.bold {
    font-weight: bold;
}

.bolder {
    font-weight: bolder;
}

bold-with-fontweight

你应该使用<b>,<strong> 还是font-weight 来使文本变粗?

你可能想知道应该使用哪种方法来使文本变粗--<b><strong> ,还是CSS的font-weight 属性。

一般来说,你应该避免使用<b> ,因为它已经是一个样式。当你用<b> 标签将文本加粗时,你就明确地告诉浏览器在HTML中将文本加粗。

<strong> 这也使文本看起来是粗体的,但它是语义的。有了它,你就不是在为HTML做造型(HTML本来就不是用来做造型的),而是在告诉浏览器,让文本在外观上比周围的其他文本更强。

CSSfont-weight 属性可以让你更多地控制文字应该有多浅或多粗。lighter,bold, 和bolder 是一个开始,但你可以更进一步,应用数字/权重,如100 200 ,300,400,500,600,700,800, 和900 作为数值,这样就可以得到不同的轻度和粗度的变化。

结论

粗体字可以帮助你在HTML中强调某些字。在这篇文章中,你已经了解了可以使文字变粗的3种不同方法,以及哪种方法最好用。

谢谢你的阅读,并继续编码。