HTML和CSS實作字型加粗的三種方法
- yulia原創
- 2018-10-31 15:05:4917517瀏覽
大家在瀏覽網站時有沒有註意到，頁面中有些文字或字體加粗了，正在學習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>如下圖所示，“低頭思故鄉”這段文字被加粗了。
方法2：用html中的加粗標籤
標籤可以讓字型加粗，且所有主流瀏覽器都支援此方法。
實例描述：直接用html中的標籤，即可實現文字加粗效果，具體程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>床前明月光</p> <strong>疑是地上霜</strong> </body> </html>
如圖所示，對比p標籤和strong標籤的內容，發現strong標籤的內容加粗了。
方法3：用html中的加粗標籤
標籤可以定義一個粗體的文本，且所有主流瀏覽器都支援 標籤。
實例描述：標籤和標籤一樣，都可以給文字加粗，並且使用簡單方便，具體代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>床前明月光</p> <b>举头望明月</b> </body> </html>
如下圖所示，b標籤的裡面的文字加粗了
#總結：以上給大家介紹了給文字加粗的三種方法，分別是CSS中的font-weight: bold樣式和HTML中的標籤、標籤，直接用html標籤比較方便，至於選擇哪種方法，還要看個人習慣和工作需要，希望這篇文章對你有幫助！
【相關教學推薦】
2. HTML教學
3. HTML線上手冊
以上是HTML和CSS實作字型加粗的三種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！