、 設置字體樣式的基本標簽是<font></font>，被其包含的文本為樣式作用區。在初學者的HTML代碼編寫中，<font></font>容易被多重嵌套，如<font 屬性1=值1><font 屬性2=值2>文本</font></font>。還有一種情況是標簽嵌套錯位，如<font><p>文本</font></p>。為了規范代碼的編寫，避免不必要的錯誤，讀者在初學時一定要謹慎。

2、設置文字的顏色 color 是標簽的屬性之一，用于設置文字顏色。color是<font></font>標簽的屬性之一，用于設置文字顏色。例子如：淺紅色文字：<font color="#dd0000">51UM博客即湯湯個人博客網站，是一個和草根站長們一起學習分享網站SEO優化技術、web前端開發為主的個人博客網站。</font>

3、設置文字的尺寸 size 也是標簽的屬性，用于設置文字大小。size 的值為1-7， 默認為3。我們可以 size 屬性值之前加上“+”“-”字符，來指定相對于字 、 號初始值的增量或減量。例子如： size為1：<font size="-2">HTML學習</font>

4、使文字傾斜，用雙標簽<i></i>可使被作用文字傾斜，達到特殊的效果，例如文章的日期。<em></em>被稱為強調標簽，也是斜體，目前使用比<i></i>標簽更頻繁，其編寫方法如下：

<i>這是斜體文字</i>

<em>這也是斜體文字</em>

5、 使文字加粗，用雙標簽<b></b>可使被作用文字加粗，是文字更加醒目，例如文章的標題部分。<strong></strong>被稱為特別強調標簽，也是文字加粗，目前使用比<b></b>標簽更頻繁，其編寫方法如下：

<b>這是粗體文字</b>

<strong>這也是粗體文字</strong>

除注明外的文章,均為來源：湯久生博客(QQ:1917843637),轉載請保留本文地址，謝謝！

技術等級】初級

【承接文章】《強大的CSS選擇器，CSS的核心技術，前端小白必備功底》

本文重點講解CSS技術中有關字體樣式的屬性以及這些屬性的取值。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。

從本文開始，小海老師將帶領大家認識CSS技術中的所有屬性。我把CSS技術中的各個屬性進行了分類，首先我們從與字體樣式有關的屬性開始。

CSS中與字體有關的屬性包括以下六個：

• font-family

• font-size

• font-weight

• font-style

• font-variant

• color

一、字體樣式屬性：

CSS利用font-family屬性來設置字體或字體列表。

1、設置字體：

.sty01{font-family:黑體;}

上述代碼定義了用戶自定義類sty01，該樣式設置字體為“黑體”。利用class屬性取值為sty01樣式的HTML標記對中的文字將以“黑體”的字體顯示。

2、設置字體列表：

.sty02{font-family:漢儀綜藝體簡,微軟雅黑,黑體;}

上述代碼定義了用戶自定義類sty02，該樣式設置了一個字體列表。利用class屬性取值為sty02樣式的HTML標記對中的文字，首先以“漢儀綜藝體簡”的字體顯示，目標瀏覽器所在的設備若沒有安裝該字體，則自動以“微軟雅黑”的字體顯示；目標瀏覽器所在的設備若也沒有安裝“微軟雅黑”字體，則自動以“黑體”的字體顯示。

注意：為了防止CSS文件的中文字體名稱不符合字符集的要求，所以習慣上都是用中文字體的外文名稱來書寫font-family屬性的取值，下面我就為大家羅列幾個常用的字體名稱。

• 設置字體為 微軟雅黑：.style1{font-family:Microsoft YaHei;}

• 設置字體為 宋體：.style2{font-family:SimSun;}

• 設置字體為 幼圓：.style3{font-family:YouYuan;}

• 設置字體為 黑體：.style4{font-family:SimHei;}

• 設置字體為 楷體：.style5{font-family:KaiTi;}

更多中文字體的西文名稱，小海老師會在后續的文章中詳細羅列。

二、字號大小屬性：

CSS利用font-size屬性來設置文本的字號效果

1、絕對大小：

• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

上述取值中：medium為默認值，medium以上的取值越來越小，medium以下的取值越來越大。

2、相對大小：

• smaller，比上一級元素的字體大小小一號。

• larger，比上一級元素的字體大小大一號。

代碼實例：

<div style=“font-size:14px;”>

<span style=“font-size:larger;”>段落文字內容</span>

</div>

上述代碼中“段落文字內容”的字體大小顯示為比14px字號大一號的外觀。

3、帶有單位的長度值：

代碼實例：.s1{font-size:16px;}

上述代碼定義了用戶自定義類s1，該樣式設置字號為16px大小。

4、百分比：

設置字體字號為上一級元素的百分比大小。

代碼實例：.s2{font-size:10%;}

上述代碼定義了用戶自定義類s2，該樣式設置字號是上一級元素的字體大小的20%。

三、字體粗細屬性

CSS利用font-weight屬性來設置文本的粗細效果

• normal，普通粗細，粗細度約為400。

• bold，粗體，粗細度約為700。

• bolder，更粗體，粗細度約為900。

• lighter，更細體，粗細度約為500。

• 100、200、300、400、500、600、700、800、900：9個粗細等級。

但是現在的瀏覽器都無法將字體的粗細渲染的如此細膩，也就是說這9個等級的粗細度并沒有明顯的差異。

四、字體斜體屬性

CSS利用font-style屬性來設置文本的斜體效果

• normal，普通，字體顯示為不斜體。

• italic，斜體，設置字體為斜體。

• oblique，傾斜體，當特殊字體沒有斜體效果時，可以使用該取值將字體傾斜。

五、設置字體是否為小型大寫字母

CSS技術利用font-variant屬性來設置是否為小型大寫字母

• normal，普通，字體顯示為正常。

• small-caps，小型大寫字母。

六、設置字體的顏色

CSS技術利用color屬性來設置文本顏色

• 十六進制顏色代碼。
  

實例：h1{color:#ff0000;}

含義：重定義HTML中的h1標記對為紅色。

• 十進制顏色代碼。

實例：h2{color:rgb(0,255,0);}

含義：重定義HTML中的h2標記對為綠色。

• 顏色英文單詞。

實例：h3{color:blue;}

含義：重定義HTML中的h3標記對為藍色。

文章預告

下一次小海老師會為大家講解CSS中有關文本段落的屬性，結合前面HTML的內容，可以對頁面中的段落進行更為細致的調整。千萬不要錯過哦。

小海聲明

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。