明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

HTML與CSS完成字體加粗的3種方法

發(fā)表時間：2023-08-29 來源：明輝站整理相關軟件相關文章人氣：

[摘要]大家在瀏覽網(wǎng)站時有沒有注意到，頁面中有些文字或字體加粗了，正在學習HTML和CSS的小伙伴，你知道HTML如何給文字加粗嗎？CSS怎么設置字體加粗呢？這篇文章給大家總結了給字體和文字加粗的三種方法，包括HTML中的加粗標簽以及CSS字體加粗樣式，有一定的參考價值，感興趣的朋友可以參考一下。給字體和...
大家在瀏覽網(wǎng)站時有沒有注意到，頁面中有些文字或字體加粗了，正在學習HTML和CSS的小伙伴，你知道HTML如何給文字加粗嗎？CSS怎么設置字體加粗呢？這篇文章給大家總結了給字體和文字加粗的三種方法，包括HTML中的加粗標簽以及CSS字體加粗樣式，有一定的參考價值，感興趣的朋友可以參考一下。

給字體和文字加粗有三種方法，一種是CSS中的font-weight: bold樣式，一種是HTML中的<strong></strong>標簽，最后一種是HTML中的<b></b>標簽。

方法1：用CSS中font-weight: bold樣式給字體加粗

font-weight屬性可以設置字體的粗細，當屬性值為normal時，表示正常的字體，相當于number為400；當屬性值為bold時，可以給字體粗體，相當于number為700，也相當于<b>標簽的效果。

實例描述：創(chuàng)建兩個p標簽，給其中一個標簽一個class類名，便于對其進行CSS樣式設置。將font-weight: bold屬性添加到有類名的p 標簽上，對比兩個p標簽，看看有什么不同，具體代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{font-weight: bold;}
</style>
</head>
<body>
<p>床前明月光</p>
<p class="aa">低頭思故鄉(xiāng)</p>
</body>
</html>

如下圖所示，“低頭思故鄉(xiāng)”這段文字被加粗了。

x1.jpg

方法2：用html中的<strong>加粗標簽

<strong>標簽可以使字體加粗，且所有主流瀏覽器都支持此方法。

實例描述：直接用html中的<strong>標簽，即可實現(xiàn)文字加粗效果，具體代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>床前明月光</p>
<strong>疑是地上霜</strong>
</body>
</html>

如圖所示，對比p標簽和strong標簽的內(nèi)容，發(fā)現(xiàn)strong標簽的內(nèi)容加粗了。

x2.jpg

方法3：用html中的<b>加粗標簽

<b> 標簽可以定義一個粗體的文本，且所有主流瀏覽器都支持 <b> 標簽。

實例描述：<b></b>標簽和<strong>標簽一樣，都可以給文字加粗，并且使用簡單方便，具體代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>床前明月光</p>
<b>舉頭望明月</b>
</body>
</html>

如下圖所示，b標簽的里面的文字加粗了

x3.jpg

總結：以上給大家介紹了給文字加粗的三種方法，分別是CSS中的font-weight: bold樣式和HTML中的<strong>標簽、<b>標簽，直接用html標簽比較方便，至于選擇哪種方法，還要看個人習慣和工作需要，希望這篇文章對你有所幫助！

【相關教程推薦】

1、html和CSS給文字添加刪除線的三種方法（圖文）

2. HTML教程

3. HTML在線手冊

以上就是HTML和CSS實現(xiàn)字體加粗的三種方法的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！


網(wǎng)站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。