.什么是字體圖標(biāo)

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

2.字體圖標(biāo)常用免費(fèi)資源

（1）iconmoon字體圖標(biāo)庫：https://icomoon.io/app

（2）阿里iconfont字體圖標(biāo)庫：https://www.iconfont.cn/

（3）font-awesome字體圖標(biāo)庫：

3.字體圖標(biāo)使用步驟

以iconmoon為例

（1）選擇需要的圖標(biāo)并下載

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

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

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

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

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

其他字體

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

2）字體轉(zhuǎn)換

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

（2）字體圖標(biāo)的引入

1）把字體放到項(xiàng)目的相應(yīng)位置

將下載解壓后的fonts文件夾放到項(xiàng)目路徑下

2）在html頁面中引入字體

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

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

在html的style標(biāo)簽中引入如下代碼：

@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）為元素添加內(nèi)容

復(fù)制demo.html中需要的圖標(biāo)，如下，將其作為元素的內(nèi)容。

<span>?</span> 

（3）新增字體圖標(biāo)的引入

當(dāng)利用iconmoon選用字體圖標(biāo)時(shí)，如果有新增的字體圖標(biāo)需要加入，則需要用到.json文件，如下，在原先選擇的基礎(chǔ)上，再選擇新選擇的字體圖標(biāo)，然后再下載使用。

網(wǎng)頁中文字作為信息的主要載體，非常重要，之前學(xué)習(xí)過HTML中關(guān)于文本、段落等格式的知識(shí)，這些只是簡單排版，如果想制作更好看的文本樣式，就的使用css 字體和文本樣式了。

css字體

css 字體屬性主要包括字體系列、字體大小、字體風(fēng)格等其它樣式。

1、設(shè)置字體系列 —— font-family

這個(gè)屬性用來設(shè)置網(wǎng)頁使用哪種類型的字體顯示文本，語法如下：

font-family: "字體1"，"字體2"，"字體3"...

font-family 屬性可以定義多個(gè)字體，瀏覽器會(huì)從前到后優(yōu)先選擇使用字體，當(dāng)瀏覽器不支持第一個(gè)字體，則會(huì)嘗試使用第二個(gè)字體，以此類推。如果瀏覽器不支持所有字體，則使用默認(rèn)字體。

如下示例：

2、字體樣式—— font-style

字體樣式有三種：

• 正常 - 正常顯示文本
• 斜體 - 以斜體字顯示的文字
• 傾斜的文字 - 文字向一邊傾斜（不管是斜體字還是正常的字體）

如下示例：

這里有2種斜體，它們有什么區(qū)別？

italic 和 oblique 都是向右傾斜的文字, 但區(qū)別在于 italic 是指斜體字，而 oblique 是傾斜的文字，對(duì)于沒有斜體的字體應(yīng)該使用 oblique 屬性值來實(shí)現(xiàn)傾斜的文字效果。

3、字體大小 —— font-size

“font-size”屬性來設(shè)置字體大小，它的值可以使用預(yù)定義關(guān)鍵字、絕對(duì)大小、相對(duì)大小。

預(yù)定義關(guān)鍵字

預(yù)定義關(guān)鍵字有 xx-small、x-small、small、medium、large、x-large、xx-large，尺寸按順序依次增大。它的可選范圍只有這幾種，且不同瀏覽器廠商定義的預(yù)定義關(guān)鍵字對(duì)應(yīng)的字體大小不一致，所以相同的屬性值，在不同瀏覽器看到的大小不一樣，建議不要使用這種方式。

絕對(duì)大小

絕對(duì)大小使用比如：px(像素)、pt(點(diǎn)，1pt 相當(dāng)于 1/72in)、in(英寸)、cm(厘米)、mm(毫米)等單位設(shè)置字體大小。

如下示例：

絕對(duì)大小不會(huì)隨著頁面大小改變而改變，如果要想使文字大小自適應(yīng)不同的屏幕或設(shè)備就需要使用相對(duì)大小。

相對(duì)大小：

相對(duì)大小使用 em、%、rem等來設(shè)置大小，它們都是相對(duì)于某個(gè)參考基準(zhǔn)的字體大小，來計(jì)算當(dāng)前字體的大小，只是參考基準(zhǔn)不同而已。

如果你不指定一個(gè)字體的大小，默認(rèn)大小和普通文本段落一樣，是16像素（1em = 16px,100%=16px）。

em和%都是相對(duì)于父級(jí)元素的字體大小，其子級(jí)元素會(huì)在其父級(jí)元素的計(jì)算結(jié)果上繼續(xù)計(jì)算大小，如下示例：

如上p元素的字體大小是36px，而不是12px * 200%等于24px，它是在其父級(jí)div元素的計(jì)算結(jié)果上繼續(xù)計(jì)算的值。

使用em 或 %雖然可以方便修改文字大小，但是當(dāng)元素嵌套很深的時(shí)候，就變得比較復(fù)雜，深層的元素文字大小就變得不可控，所以css3 新增加了rem 來設(shè)置字體大小。

rem 是相對(duì)于根元素 （html 元素） font-size屬性的值，每一層級(jí)都會(huì)參考html根元素的字體大小來計(jì)算，這樣一來，無論嵌套多少層，字體大小的計(jì)算就變得統(tǒng)一了。

rem 是CSS3新增的一個(gè)相對(duì)單位，IE9 以下版本的老瀏覽器卻不支持它，這也是很多編程人員尚未使用 rem 的原因。

在定義字體大小時(shí)，建議在 html 元素中定義絕大多數(shù)元素所需要的字體大小，并讓所有子元素繼承 html 的字體大小。如果某個(gè)子元素要改變字體大小，則使用相對(duì)尺寸 em 或 % 或 rem 重新定義。

4、復(fù)合屬性—— font

font 屬性可以看成是字體的簡寫，它可以定義字體系列、大小、風(fēng)格、粗細(xì)、等樣式，語法如下：

 font："font-style font-variant font-weight font-size/line-height font-family"

其中font-size和font-family的值是必需的。如果缺少了其他值，將使用瀏覽器的默認(rèn)值。

如下示例：

除了以上設(shè)置，font還有其它的屬性值，如下：

這些屬性，只有部分瀏覽器支持，具體使用時(shí)請(qǐng)查看瀏覽器是否支持。

5、其它字體屬性

字體還有 font-weight（設(shè)置粗細(xì)的屬性）、font-variant（設(shè)置小型大寫字母的字體顯示文本）如下示例：

font-weight 字體粗細(xì)：有normal、lighter、bold、數(shù)值三種，數(shù)值范圍從 100 ~ 900 依次變粗，900 相當(dāng)于 bold。

font-variant值有normal（標(biāo)準(zhǔn)字體顯示）、small-caps（瀏覽器會(huì)顯示小型大寫字母的字體）、inherit（繼承父元素的設(shè)置）

如下示例：

font-variant 屬性設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會(huì)被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。

css 文本樣式

css 文本屬性主要設(shè)置比如字符間隔，文本顏色、單詞間隔、行高、文字修飾、對(duì)齊方式等效果。

1、文字顏色 —— color

color 使用以“#”開頭16進(jìn)制的顏色代碼或顏色關(guān)鍵詞（如red、blue），如下示例：

2、字符間隔 —— letter-spacing

設(shè)置字符水平間距，如下示例：

3、單詞間隔 —— word-spacing

設(shè)置單詞之間的間距，如下示例：

這里注意中文比較特殊，一個(gè)中文字不等同于英文的一個(gè)單詞。

4、行高 —— line-height

設(shè)置字體行之間垂直間距，如下示例：

5、文字修飾 —— text-decoration

可以設(shè)置文字下劃線、刪除線等樣式，如下示例：

還可以定義波浪線效果，如下示例：

6、水平對(duì)齊 —— text-align

有三種水平方向的對(duì)齊方式，居左，居中、居右，如下示例：

7、垂直對(duì)齊—— vertical-align

vertical-align 屬性設(shè)置一個(gè)元素的垂直對(duì)齊方式。

該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。允許指定負(fù)長度值和百分比值。這會(huì)使元素降低而不是升高。在表單元格中，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式。

如下示例，對(duì)齊圖片：

還有很多其它屬性，在此不每個(gè)都介紹了，可參考如下：

8、文字大小寫轉(zhuǎn)換—— text-transform

可用于所有字句變成大寫或小寫字母，或每個(gè)單詞的首字母大寫。如下示例：

9、文本縮進(jìn) —— text-indent

文本縮進(jìn)屬性是用來指定文本的第一行的縮進(jìn)。如下示例：

文本縮進(jìn)可以使用絕對(duì)值如：px、pt、cm等，也可以是相對(duì)單位 %。且可以是負(fù)值，如果是負(fù)值，就相當(dāng)于變成向左縮進(jìn)了。

10、空白處理 —— white-space

white-space屬性指定元素內(nèi)的空白怎樣處理。如下示例：

11、文字陰影 —— text-shadow

text-shadow 可以設(shè)置文字陰影效果，比如內(nèi)陰影或外陰影，語法：

text-shadow: x坐標(biāo) y坐標(biāo) 模糊大小 顏色;

其中x/y 坐標(biāo)相對(duì)于文本左上角的偏移量，如下示例：

12、文本溢出 —— text-overflow

text-overflow 屬性指定當(dāng)文本溢出時(shí)包含它的元素應(yīng)該如何顯示。可以設(shè)置文本被剪切、顯示省略號(hào) (...) 或顯示自定義字符串（不是所有瀏覽器都支持）。

text-overflow 需要配合以下兩個(gè)屬性使用：

• overflow: hidden;

如下示例：

總結(jié)

本篇講述了文字和文本的大部分樣式設(shè)置，掌握這些css用法非常重要，網(wǎng)頁大部分都是文本，要想制作一個(gè)漂亮的頁面，這些是必須要學(xué)會(huì)的，且要學(xué)會(huì)融會(huì)貫通。

本篇主要講了以下內(nèi)容：

1. 字體系列、大小、樣式、粗細(xì)等樣式的設(shè)置。
2. 字體font簡寫屬性的使用。
3. 文本顏色、字符間隔、單詞間隔、行高等設(shè)置。
4. 文本修飾、大小寫轉(zhuǎn)換、文本縮進(jìn)、空白處理等。
5. 文本水平對(duì)齊、垂直對(duì)齊。
6. 文本陰影及文本溢出。

以上都是最基本的，要多加練習(xí)，才能夠理解學(xué)會(huì)使用。感謝關(guān)注，祝學(xué)習(xí)愉快！

上篇：前端入門——css 盒子模型