我們學習CSS谷歌字體和CSS Icon 圖標。

　　我們在應用 font-family 屬性聲明樣式字體時，除了使用HTML中的標準字體外，還可以使用谷歌字體。谷歌字體是免費使用的，并且有1000多種字體可供選擇。我們再也不用擔心用戶電腦上是否安裝某個字體了。

　　要使用谷歌字體，只要在元素里添加一個特殊的樣式表鏈接，就可以在CSS里使用了。

　　創建一個 font-google-icons.html 文件，構建好基礎代碼，添加一個 h1 元素，三個 p 元素。填入一些文本。

　　在 head 元素里添加 link 元素，href屬性值為 google api 的 css 地址 (https://fonts.googleapis.com/css )。 在css 后邊，加一個問號 (?)，定義屬性 family 等于一個字體名稱，比如 Sofia。

　　再創建一個 mystyle-3.css 文件，定義 body 選擇器，聲明樣式 font-family，值為引號 Sofia，逗號 serif。

　　body {

　　font-family: "Sofia", serif;

　　}

　　在頁面里引入這個樣式文件。

　　在瀏覽器里查看效果，所有的文字都應用了 Sofia 這個字體。

　　要使用多個谷歌字體，只需用管道字符豎線(|)分隔字體名稱。修改一下樣式表鏈接的字體為Audiowide，豎線，Sofia，豎線，Trirong (Audiowide|Sofia|Trirong )(查效果看網址:https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple)

　　給三個 p 元素都定義 class 屬性，值分別為 a，b，c。

　　在樣式里，定義 p.a 選擇器，聲明樣式：font-family: "Audiowide", sans-serif。定義 p.b 選擇器，聲明樣式 font-family: "Sofia", sans-serif。定義 p.c 選擇器，聲明樣式 font-family: "Trirong", serif。

　　我們看，三個段落應用了不同的字體。

　　谷歌字體除了引用不同的字體外，還可以隨心所欲添加字體的樣式。

　　在鏈接的字體后面添加一個 &(讀作 and) 符號，定義 effect 等于 fire。

　　再給 h1 添加一個 class 屬性，值為 font-effect-fire。

　　我們看，標題燃起來火焰!

　　當然，和引用字體一樣，也可以通過管道符豎線(|)，引入多個效果。比如把 effect 的值改為 neon，豎線，outline，豎線，fire，豎線，shadow-multiple。(neon|outline|fire|shadow-multiple)

　　給三個P標簽分別添加class屬性，值分別是font-effect-neon\font-effect-outline\font-effect-shadow-multiple

　　再看一下效果，太酷炫了!

　　除了谷歌字體，還可以通過使用一個圖標庫，很容易地將圖標添加到我們的HTML頁面中。

　　首先給大家介紹一個圖標庫網站，fontawesome.com (讀作 fontawesome 點 com)，點擊 sign in 圖標。如果沒有賬號，點擊 sign up，注冊一個。輸入一個你的郵箱地址，點擊發送驗證郵件。進入到你的郵箱，打開郵件，點擊一下驗證按鈕。輸入密碼，再次輸入相同的密碼。點擊按鈕。可以輸入一些個人信息，當然也可以跳過。

　　此時，點擊 "Copy Kit Code" 按鈕，復制左邊這段代碼。

　　回到我們的 html 頁面，在 link 下面右鍵粘貼。大功告成!接下來就可以使用圖標了。

　　在頁面里三個段落的開頭，添加三個 i 元素，全部定義 class 屬性，值分別為 fas fa-cloud(注意中間有空格，要讀出來)，fas fa-heart，fas fa-car。

　　看看效果，你會發現每個段落的開始都添加了一個小圖標。更多的圖標，大家可以訪問這個地址獲取。 (https://fontawesome.com/icons)

　　你可能會想，我用圖片一樣可以實現呀!Icon字體圖標的強大之處就是，你可以將這個圖標當成是文本，任意的添加樣式。

　　給心形的圖標 i 元素定義一個 style 屬性，值為 color: red。

　　你會驚喜的發現，圖標變成了紅色!如果使用 img，我們得引入另外一個圖片文件了。

　　字體圖標在網站開發中非常有用，后續的課程，我們還會更深入的研究他。

下一篇

什么是CSS盒模型呢？