html、css文字加粗方法

通常來講前端加粗字體的方法有兩種，一個是html標籤加粗的方法，另外一個是css加粗字體的方法，還有一個是字體加粗方法。前兩個是咱們最經常使用的方法，後一個感受有點非主流的方法，也不知道我是怎麼想到這種方法的，有點爲本身的智商感到悲傷，下面給你們詳細的介紹一下。

1、標籤方法加粗文字

一、h(1~6標籤)書寫方式

<h1>h1標籤 -> CGLweb前端</h1>
<h2>h2標籤 -> CGLweb前端</h2>
<h3>h3標籤 -> CGLweb前端</h3>
<h4>h4標籤 -> CGLweb前端</h4>
<h5>h5標籤 -> CGLweb前端</h5>
<h6>h6標籤 -> CGLweb前端</h6>
二、頁面效果

h1標籤 -> CGLweb前端
h2標籤 -> CGLweb前端
h3標籤 -> CGLweb前端
h4標籤 -> CGLweb前端
h5標籤 -> CGLweb前端
h6標籤 -> CGLweb前端

二、strong標籤

<strong>strong標籤 -> CGLweb前端</strong>（www.gendan5.com）
strong標籤 -> CGLweb前端

三、b標籤

<b>b標籤 -> CGLweb前端</b>
b標籤 -> CGLweb前端

這其中咱們通常是使用strong來加粗的，緣由以下，b標籤如今已是廢棄標籤，因此咱們就不用了。

h標籤通常用在SEO優化的，因此除非是列表、二級菜單、詳情頁標題除外不建議使用。

由於有些瀏覽器對h標籤訂義的文字大小不同，因此咱們爲了每個瀏覽器上文字大小同樣，會設置同樣的fon-size。

2、CSS方法加粗文字

css有個文字加粗的屬性

font-weight:normal|bold|bolder|lighter|inherit|

一、normal:默認值。定義標準的字符。

二、bold:定義粗體字符。

三、bolder:定義更粗的字符。

四、lighter:定義更細的字符。

五、數字:|100|200|300|400|500|600|700|800|900定義由粗到細的字符。400 等同於 normal，而 700 等同於 bold。

六、inherit:規定從父元素繼承字體的粗細。

一、css書寫方式爲一下：

<style type="text/css">
.p_text_1{ font-weight:normal;}
.p_text_2{ font-weight:bold;}
.p_text_3{ font-weight:bolder;}
.p_text_4{ font-weight:lighter;}
.p_text_5{ font-weight:700;}
.p_text_6{ font-weight:inherit;}
</style>
二、頁面效果能夠本身試一下

其實感受css加粗的各類數值和屬性，以我24K合金眼睛來觀察了一下，並無什麼區別，只有加粗和不加粗的區別而已，但願有知道的道友指點一二。

2、字體加粗方法

一、書寫方式

<p style="font-family:'楷體';">CGLweb前端 -> font-family:'楷體'</p>
<p style="font-family:'黑體';">CGLweb前端 -> font-family:'黑體'</p>
<p style="font-family:'Impact';">CGLweb前端 -> font-family:Impact</p>
<p style="font-family:'仿宋';">CGLweb前端 -> font-family:'仿宋'</p>
<p style="font-family:'微軟雅黑';">CGLweb前端 -> font-family:'微軟雅黑'</p>
二、頁面效果

CGLweb前端 -> font-family:’楷體’

CGLweb前端 -> font-family:’黑體’

CGLweb前端 -> font-family:Impact

CGLweb前端 -> font-family:’仿宋’

CGLweb前端 -> font-family:’微軟雅黑’

這個方法在好久之前使用過，主要是用在英文會好點，我們就看Impact這個字體就能知道加粗是多麼的厲害了。

漢字的話由於考慮到電腦上缺失字體的緣由不建議使用，目前尚未在漢字上使用過。