首頁 > 文章 > web前端 > HTML和CSS實作字型加粗的三種方法

HTML和CSS實作字型加粗的三種方法

yulia原創: 2018-10-31 15:05:4917375瀏覽

大家在瀏覽網站時有沒有註意到，頁面中有些文字或字體加粗了，正在學習HTML和CSS的小夥伴，你知道HTML如何為文字加粗嗎？ CSS要怎麼設定字體加粗呢？這篇文章為大家總結了為字體和文字加粗的三種方法，包括HTML中的加粗標籤以及CSS字體加粗樣式，有一定的參考價值，有興趣的朋友可以參考一下。

為字型和文字加粗有三種方法，一種是CSS中的font-weight: bold樣式，一種是HTML中的標籤，最後一種是HTML中的標籤。

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

font-weight屬性可以設定字體的粗細，當屬性值為normal時，表示正常的字體，相當於number為400；當屬性值為bold時，可以給字體粗體，相當於number為700，也相當於標籤的效果。

實例描述：建立兩個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">低头思故乡</p>
</body>
</html>

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

HTML和CSS實作字型加粗的三種方法

方法2：用html中的加粗標籤

標籤可以讓字型加粗，且所有主流瀏覽器都支援此方法。

實例描述：直接用html中的標籤，即可實現文字加粗效果，具體程式碼如下：

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

如圖所示，對比p標籤和strong標籤的內容，發現strong標籤的內容加粗了。

HTML和CSS實作字型加粗的三種方法

方法3：用html中的加粗標籤

標籤可以定義一個粗體的文本，且所有主流瀏覽器都支援 標籤。

實例描述：標籤和標籤一樣，都可以給文字加粗，並且使用簡單方便，具體代碼如下：

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

如下圖所示，b標籤的裡面的文字加粗了

HTML和CSS實作字型加粗的三種方法

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

【相關教學推薦】

1、html和CSS為文字新增刪除線的三種方法（圖文）

2. HTML教學

3. HTML線上手冊

以上是HTML和CSS實作字型加粗的三種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：div是什麼意思？ div標籤怎麼用下一篇：div是什麼意思？ div標籤怎麼用

看更多