整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
們學習CSS谷歌字體和CSS Icon 圖標。
我們在應用 font-family 屬性聲明樣式字體時，除了使用HTML中的標準字體外，還可以使用谷歌字體。谷歌字體是免費使用的，并且有1000多種字體可供選擇。我們再也不用擔心用戶電腦上是否安裝某個字體了。
要使用谷歌字體，只要在<head>元素里添加一個特殊的樣式表鏈接，就可以在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，我們得引入另外一個圖片文件了。
字體圖標在網站開發中非常有用，后續的課程，我們還會更深入的研究他。
文章配套視頻鏈接：https://www.bilibili.com/video/BV1oU4y1278g?p=66
00多個時尚漂亮的 css 圖標庫，特別適合 UI 設計師和前端開發者下載使用。
css.gg 是一套純 css 實現的輕量美觀的開源圖標庫，特點是所有的圖形都通過 css 語法實現，是技術和設計的完美結合。
css.gg 網站首頁
圖標在工作中應用非常廣泛，漂亮的圖標不僅在互聯網產品中隨處可見，在 PPT 、數據圖表和海報設計等各種可視化信息載體中也經常出現。
css.gg 圖標預覽
和大多數圖標庫的原始圖形格式不一樣，css.gg 是一個代碼實現的圖標庫，無論是導出的 svg、xd 格式、直接導入 figma，還是前端開發的引用，都為設計和開發帶來了便利。因此很適合用于互聯網項目。特別是在一些較輕的 web 項目上，不需要再引入字體文件或 svg 圖形的方式加載圖標，只需要拷貝相應的圖標代碼，不僅在前端開發中很方便地調整顏色，而且能用 css 代碼局部調整顏色，從而讓圖標變成彩色。
需要注意的是，圖標使用了不少 css3 規范的渲染，需要考慮瀏覽器的兼容，如果不是運行移動端或現代瀏覽器上的項目，可能會有兼容性的問題。
css.gg 基于 MIT 開源協議在 github 上開源，任何個人和商業機構都可以免費下載使用。
關注我，持續分享高質量的免費開源、免費商用的資源。
↓↓點【了解更多】查看本次分享的網址。
嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！
志同道合的小伙伴跟我一起學習交流哦！
圖片是有諸多優點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的"http請求"，這都會大大降低網頁的性能的。更重要的是圖片不能很好的進行“縮放”，因為圖片放大和縮小會失真。我們后面會學習移動端響應式，很多情況下希望我們的圖標是可以縮放的。此時，一個非常重要的技術出現了，額不是出現了，是以前就有，是被從新"寵幸"啦。。。這就是字體圖標（ iconfont）
1 字體圖標的優點
可以做出跟圖片一樣可以做的事情，改變透明度、旋轉度，等但是本質其實是文字，可以很隨意的改變色、產生陰影、透明效果等等本身體積更小，但攜帶的信息并沒有削減。
幾乎支持所有的瀏覽器
移動端設備必備良藥……
2 svg格式上傳轉換字體格式
總體來說，字體圖標按照如下流程：
設計字體圖標
假如圖標是我們公司單獨設計，那就需要第一步了，這個屬于U設計人員的工作，他們在illustrator或 Sketch這類矢量圖形軟件里創建icon圖標，比如下圖：
之后保存為svg格式，然后給我們前端人員就好了。
其實第一步，我們不需要關心，只需要給我們這些圖標就可以了，如果圖標是大眾的，網上本來就有的，可以直接跳過第一二步，進入第三步。
上傳生成字體包
當UI設計人員給我們svg文件的時候，我們需要轉換成我們頁面能使用的字體文件，而且需要生成的是兼容性的適合各個瀏覽器的。
推薦網站：icomoon.io
icomoon字庫
icomoon成立于2011年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。內容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網速較慢。
推薦網站：iconfont.cn
阿里 icon font字庫
iconfont.cn
這個是阿里媽媽M2UX的一個 icon font字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫?？梢允褂肁I制作圖標上傳生成。一個字，免費，免費?。?/p>
Fontello
fontello.com
在線定制你自己的 icon font字體圖標字庫，也可以直接從 GitHub下載整個圖標集，該項目也是開源的。
Font-Awesome
fortawesome.github.io/font-Awesome
這是我最喜歡的字庫之一了，更新比較快。目前已經有369個圖標了。
3 下載字體圖標
剛才上傳完畢，網站會給我們把UI做的svg圖片轉換為我們的字體格式，然后下載下來就好了當然，我們不需要自己專門的圖標，是想網上找幾個圖標使用，以上2步可以直接省略了，直接到剛才的網站上找喜歡的下載使用吧。
4 復制需要的字體文件
5 復制需要的字體文件
第一步：在樣式里面聲明字體：告訴別人我們自己定義的字體
這段代碼不用記，直接復制即可，如下：
第二步：給盒子使用字體
第三步：盒子里面添加結構
before的方法如下：
注意要加上\斜杠。
span的方法如下：
復制這個小方塊粘貼到span中間，但是什么都看不到，這樣就對了
?
6 追加新圖標字體的方法
追加新圖標到原來庫里面如果工作中，原來的字體圖標不夠用了，我們需要添加新的字體圖標，但是原來的不能刪除，繼續使用，此時我們需要這樣做：
把壓縮包里面的 selection. json從新上傳，然后，選中自己想要新的圖標，從新下載壓縮包，替換原來文件即可
看不懂的小伙伴不要氣餒，后續的分享中將持續解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。
本章已結束，下篇文章將分享《20 滑動門技術及應用》小伙伴們不要錯過喲！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
