0010 CSS字體樣式屬性：font-size、font-family、Unicode字體、font-weight、font-style、綜合設置、color、 text-align、line-height、text-indent、text-decoration、、、

CSS字體樣式屬性、調試工具

目標

• 應用
  • 使用css字體樣式完成對字體的設置
  • 使用css外觀屬性給頁面元素添加樣式
  • 使用常用的emment語法
  • 能夠使用開發人員工具代碼調試

1.font字體

1.1 font-size:大小

• 作用：

  font-size屬性用於設置字號

p {  
    font-size:20px; 
}

• 單位：

  • 可以使用相對長度單位，也可以使用絕對長度單位。
  • 相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。

注意：

• 我們文字大小以后，基本就用px了，其他單位很少使用
• 谷歌瀏覽器默認的文字大小為16px
• 但是不同瀏覽器可能默認顯示的字號大小不一致，我們盡量給一個明確值大小，不要默認大小。一般給body指定整個頁面文字的大小

1.2 font-family:字體

• 作用：

  font-family屬性用於設置哪一種字體。

p{ font-family:"微軟雅黑";}

• 網頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文本的字體設置為微軟雅黑
• 可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體， 如果都沒有，則以我們電腦默認的字體為准。

p{font-family: Arial,"Microsoft Yahei", "微軟雅黑";}

常用技巧：

1. 各種字體之間必須使用英文狀態下的逗號隔開。
2. 中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位於中文字體名之前。
3. 如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。
4. 盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

CSS Unicode字體

• 為什么使用 Unicode字體

  • 在 CSS 中設置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。
  • xp 系統不支持 類似微軟雅黑的中文。

• 解決：

  • 方案一： 你可以使用英文來替代。 比如 font-family:"Microsoft Yahei"。

  • 方案二： 在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。

    font-family: "\5FAE\8F6F\96C5\9ED1";   表示設置字體為“微軟雅黑”。
    

字體名稱	英文名稱	Unicode 編碼
宋體	SimSun	\5B8B\4F53
新宋體	NSimSun	\65B0\5B8B\4F53
黑體	SimHei	\9ED1\4F53
微軟雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷體_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隸書	LiSu	\96B6\4E66
幼園	YouYuan	\5E7C\5706
華文細黑	STXihei	\534E\6587\7EC6\9ED1
細明體	MingLiU	\7EC6\660E\4F53
新細明體	PMingLiU	\65B0\7EC6\660E\4F53

為了照顧不同電腦的字體安裝問題，我們盡量只使用宋體和微軟雅黑中文字體

---

1.3 font-weight:字體粗細

• 在html中如何將字體加粗我們可以用標簽來實現
  • 使用 b 和 strong 標簽是文本加粗。
• 可以使用CSS 來實現，但是CSS 是沒有語義的。

屬性值	描述
normal	默認值（不加粗的）
bold	定義粗體（加粗的）
100~900	400 等同於 normal，而 700 等同於 bold 我們重點記住這句話

提倡：

我們平時更喜歡用數字來表示加粗和不加粗。

1.4 font-style:字體風格

• 在html中如何將字體傾斜我們可以用標簽來實現
  • 字體傾斜除了用 i 和 em 標簽，
• 可以使用CSS 來實現，但是CSS 是沒有語義的

font-style屬性用於定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：

屬性	作用
normal	默認值，瀏覽器會顯示標准的字體樣式 font-style: normal;
italic	瀏覽器會顯示斜體的字體樣式。

小技巧：

平時我們很少給文字加斜體，反而喜歡給斜體標簽（em，i）改為普通模式。

1.5 font:綜合設置字體樣式 (重點)

font屬性用於對字體樣式進行綜合設置

• 基本語法格式如下：

選擇器 { font: font-style  font-weight  font-size/line-height  font-family;}

• 注意：
  • 使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。
  • 其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。
  • 如果font采用綜合寫法，在綜合寫法中，沒有指定line-height，而前面沒有指定，則會覆蓋前面的line-height。

		p {
			width: 120px;
			height: 30px;
			/* line-height: 30px; */  /* 不生效，會被下面的font: 900 16px "arial" 覆蓋掉， */
			text-align: center;
			background-color: lightskyblue;
			/* 要么寫成 font: 900 16px/30px "arial"，要么在下面加一行 line-height: 30px; */
			font: 900 16px "arial"; 
			line-height: 30px;
			border-radius: 15px;
			color: white;
		}

1.6 font總結

屬性	表示	注意點
font-size	字號	我們通常用的單位是px 像素，一定要跟上單位
font-family	字體	實際工作中按照團隊約定來寫字體
font-weight	字體粗細	記住加粗是 700 或者 bold 不加粗 是 normal 或者 400 記住數字不要跟單位
font-style	字體樣式	記住傾斜是 italic 不傾斜 是 normal 工作中我們最常用 normal
font	字體連寫	1. 字體連寫是有順序的 不能隨意換位置 2. 其中字號 和 字體 必須同時出現

2. CSS外觀屬性

2.1 color:文本顏色

• 作用：

  color屬性用於定義文本的顏色，

• 其取值方式有如下3種：

表示表示	屬性值
預定義的顏色值	red，green，blue，還有我們的御用色 pink
十六進制	#FF0000，#FF6600，#29D794
RGB代碼	rgb(255,0,0)或rgb(100%,0%,0%)

• 注意

  我們實際工作中， 用 16進制的寫法是最多的，而且我們更喜歡簡寫方式比如 #f00 代表紅色

2.2 text-align:文本水平對齊方式

• 作用：

  text-align屬性用於設置文本內容的水平對齊，相當於html中的align對齊屬性。
  【1、盒子內的文字水平居中是 text-align: center, 而且還可以讓 行內元素和行內塊居中對齊。 2、塊級盒子水平居中 左右margin 改為 auto 。】

• 其可用屬性值如下：

屬性	解釋
left	左對齊（默認值）
right	右對齊
center	居中對齊

• 注意：

  是讓盒子里面的內容水平居中， 而不是讓盒子居中對齊。

---

2.3 line-height:行間距

• 作用：

  line-height屬性用於設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。

• 單位：

  • line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際工作中使用最多的是像素px

• 技巧：

一般情況下，行距比字號大7.8像素左右就可以了。
line-height: 24px;

2.4 text-indent:首行縮進

• 作用：

  text-indent屬性用於設置首行文本的縮進，

• 屬性值

  • 其屬性值可為不同單位的數值、em字符寬度的倍數、或相對於瀏覽器窗口寬度的百分比%，允許使用負值,
  • 建議使用em作為設置單位。

1em 就是一個字的寬度 如果是漢字的段落， 1em 就是一個漢字的寬度

p {
      /*行間距*/
      line-height: 25px;
      /*首行縮進2個字  em  1個em 就是1個字的大小*/
      text-indent: 2em;  
 }

2.5 text-decoration 文本的裝飾

text-decoration 通常我們用於給鏈接修改裝飾效果

值	描述
none	默認。定義標准的文本。 取消下划線（最常用）
underline	定義文本下的一條線。下划線 也是我們鏈接自帶的（常用）
overline	定義文本上的一條線。（不用）
line-through	定義穿過文本下的一條線。（不常用）

2.6 CSS外觀屬性總結

屬性	表示	注意點
color	顏色	我們通常用 十六進制 比如 而且是簡寫形式 #fff
line-height	行高	控制行與行之間的距離
text-align	水平對齊	可以設定文字水平的對齊方式
text-indent	首行縮進	通常我們用於段落首行縮進2個字的距離 text-indent: 2em;
text-decoration	文本修飾	記住 添加 下划線 underline 取消下划線 none