、CSS字體樣式

定義字體系列，大小，粗細和文字樣式

（一）字體系列（font-family）

（二）字體大小（font-size）

（三）字體粗細（font-weight）

（四）字體樣式（font-style）

（五）字體復合屬性（font）

 p {
    font: font-style font-weight font-size/line-height font-family;
  }

不能更換順序，必須保留font-size和font-family

二、CSS文本屬性

定義文本外觀，如：文本顏色，對齊文本，裝飾文本，文本縮進，行間距等

（一）文本顏色（color）

（二）對齊文本（text-align）

(三）裝飾文本（text-decoration）

（四）文本縮進（text-indent）

（五）行間距（line-height）

三、格式化代碼

1. Emmet語法
   前身為Zen coding,它使用縮寫來提高html/css的編寫速度，VSCode內部已經集成該語法，快速生成HTML結構語法和CSS樣式語法

2. 快速生成HTML結構語法

• 生成標簽，直接輸入標簽按Tab鍵即可
• 生成多個相同的標簽，標簽加星號*鍵按Tab鍵
• 父子級關系的標簽，可以用大于號>和enter鍵
• 兄弟關系的標簽，可以用加號+和enter鍵
• 生成帶有類名或id名字，可寫成標簽加.類名/#名加Tab鍵（p.one生成
• ）
• 生成.div類名是有順序的，可用自增符號￥
• 生成標簽的內部寫內容，可用{}表示

3.快速生成CSS樣式語法

• CSS基本采取簡寫形式即可（w 200 加Tab生成width: 200px;）
• 單詞首字母加Tab鍵

4.快速格式化代碼

• Shift+Alt+F/右鍵-格式化代碼
• 保存頁面時自動格式化代碼（在設置中的文本編輯器中找到格式，勾選Format On Save即可，也可把Format On Type勾選上）

5.去掉li前面的項目符號

1、使用CSS屬性指定和改變字體外觀，常見的屬性有：

font-style: italic; 定義字體的風格

font-weight: bold; 定義字體粗細

font-size: 20px; 定義字體大小

line-height: 30px; 定義一段文字的行高

還可以使用簡寫形式，把所有屬性值放到font屬性中，如：

p {

 font: italic bold 20px/30px 微軟黑體;

}

2、Font-family 屬性可以設置文字字體樣式，比如常用的中文字體有：微軟雅黑，黑體，宋體等；常用的英文字體有：Verdana，arial，Times New Roman等。Font-family 后面可以定義一個字體，也可以定義一個字體列表。為什么需要使用字體列表呢？因為我們無法控制用戶計算機上安裝什么字體，不僅如此，往往操作系統也不一樣，比如在蘋果的Mac電腦上有的字體，在微軟的Windows上就不一定有，所以最好為字體指定一個可選的字體列表。字體列表實際上就是一個字體有限列表，如下，第一個微軟雅黑是我希望使用的，瀏覽器會盡力加載這個字體，如果用戶電腦上沒有這個字體就使用第二個備用字體，依次類推，字體列表最后面應該制定一個通用字體系列。

p{

 font-family: 微軟雅黑, 黑體, Arial, Helvetica, sans-serif;

}

3、什么是通用字體系列？在CSS中定義了5個通用字體系列：

· Sans-serif字體系列：無襯線字體，筆畫粗細一致，在計算機屏幕上更容易閱讀

· Serif字體系列：有襯線字體，筆畫末端有裝飾性的線條或凸起，報紙正文中使用的字體

· Monospace字體系列：等寬字體，每個字母寬度一致，用于顯示軟件代碼示例

· Cursive字體系列：手寫體

· Fantasy字體系列：裝飾性字體，設計感較強

所以，候選字體列表中的字體通常來自于同一個字體系列，這樣當瀏覽器找不到優先定義的字體使用備用字體時，頁面展示的效果不會有太大的變化。如果前面指定的特定字體都沒有找到，瀏覽器就從sans-serif字體系列中找一個默認的字體。

4、font-size 調整字體大小的方法有三種：

1）使用像素px，如：

注意：20和單位px之間不能有空格，文字的大小就是文字的最低部分和最高部分之間時20像素

2）使用%定義字體大小就是相對于父元素的字體大小，如：p標簽時body的子標簽，body定義的字體大小是20px，所以子標簽p的字體大小是父標簽的150%即30px。

3）使用em調整字體大小，類似于百分數，也是一個相對的度量單位，使用em的時候要指定一個比例因子，p標簽是父標簽字體大小的1.2倍即24px。

5、font-weight 屬性可以改變字體的粗細，bold為粗體，normal為去掉粗體的樣式。

字體的粗細還有lighter為稍細，bolder稍粗，或者使用數字100、200-900，但是這些都沒有得到字體和瀏覽器的廣泛支持，通常并不適用，了解即可。

6、font-style為字體增加風格

有三個可能的值：normal（正常），italic（斜體字符），oblique（傾斜文本）；其中italic是專門為正常字體設計的斜體字符，oblique沒有專門的斜體字符，由瀏覽器負責把正常的字體傾斜顯示，因為不是所有的字體定義了斜體字符，所以使用italic定義字體風格時，瀏覽器找不到這個字體的斜體字符，就通過oblique把正常的字體傾斜顯示，有時候看著是一樣的，有時候則不同，除非非要區分斜體和傾斜文本，不然可以選擇一種使用。

7、line-height 調整行高，定義一個盒子內每一行文字之間的距離。

每天進步一點點，跟著教頭學開發。

.什么是字體圖標

可以看作一種特殊字體，其展示的是圖標，而不再是文字，其擁有字體的特性，比如大小、顏色、透明效果、陰影等，字體圖標加載快、不變形。也可以看作是矢量格式的圖標。

2.字體圖標常用免費資源

（1）iconmoon字體圖標庫：https://icomoon.io/app

（2）阿里iconfont字體圖標庫：https://www.iconfont.cn/

（3）font-awesome字體圖標庫：

3.字體圖標使用步驟

以iconmoon為例

（1）選擇需要的圖標并下載

1）在fonts文件夾下有四種類型的字體文件，每種字體文件兼容瀏覽器的種類不同

a）.tff格式（TrueTypeFont），美國蘋果公司和微軟公司共同開發的，在Windows和Mac操作系統中為默認字體；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。

b）.woff格式（Web Open Font Format-Web開放字體格式），是一種網頁所采用的字體格式標準，使用zlib壓縮，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。

c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微軟設計用來在網頁使用的字體格式，是OpenType字體的壓縮格式，IE專用，IE4+支持該字體。

d）.svg格式（Scalable Vector Graphics-可縮放的矢量圖形），它是一種用XML定義的語言，用來描述二維矢量及矢量/柵格圖形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支持該字體。

其他字體

e）.otf格式（Open Type Font），Microsoft和Adobe公司開發的，.otf格式比.ttf更為強大，可以把PostScript字體嵌入到TrueType中。

2）字體轉換

https://www.fontke.com/tool/convfont/

（2）字體圖標的引入

1）把字體放到項目的相應位置

將下載解壓后的fonts文件夾放到項目路徑下

2）在html頁面中引入字體

利用CSS的@font-face屬性，引入外部字體；

在style.css文件中有如下代碼，為固定用法，注意url中字體路徑，其它可以不變。

在html的style標簽中引入如下代碼：

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?8l3wc0');
  src:  url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
    url('fonts/icomoon.woff?8l3wc0') format('woff'),
    url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

3）為元素用該字體

span {
        font-family: "icomoon";
    }

4）為元素添加內容

復制demo.html中需要的圖標，如下，將其作為元素的內容。

<span>?</span> 

（3）新增字體圖標的引入

當利用iconmoon選用字體圖標時，如果有新增的字體圖標需要加入，則需要用到.json文件，如下，在原先選擇的基礎上，再選擇新選擇的字體圖標，然后再下載使用。