現時有很多網站流行使用網頁字體，這些字體大部分來自 Google Font 提供的700+免費字體，對于網頁設計師和前端人員來說，是個很棒的字體庫，設計師可以使用字體庫提供的免費字體來網頁設計，而前端人員可以直接調用 Web Font 樣式，極其方便。這篇文章教你怎么用！
本文告訴你：
#1 下載 Google 字體庫的免費字體，并安裝到電腦上。
#2 在網頁上使用 Google Web Font(網頁字體）
#3 彩蛋^_^
Google.com/fonts/
#1 下載&安裝 Google 字體庫的免費字體
Step 1: 選擇字體
進入?Google Font?頁面，選擇你要的字體（可在左欄或搜索框查找字體），點擊「Add to Collection」添加字體，可以多選，添加后，字體會出現在網頁下方的 Collection 模塊下。
Step 2: 下載字體
添加好自己的字體后，接下來就點擊右上角的下載按鈕來下載字體，如下圖：
這里我們選擇「zip file」壓縮包格式進行下載。
Step 3：安裝字體到電腦
解壓剛剛下載的字體包，把字體文件復制到操作系統的字體目錄。
Windows字體目錄：C:\Windows\Fonts
如果你是 MAC OS 用戶，請使用字體冊來安裝字體，“字體冊”位于“應用程序”文件夾中（在 Finder 中選取“前往”>“應用程序”）。
然后把字體直接拖進去安裝即可！
字體安裝完后，用戶就可以在 PS, AI, WORD, PDF 等常用軟件上使用它們了。
#2 在網站上使用 Google Web Font 字體
Step 1: 選擇好字體后，點擊「quick use」按鈕
Step 2: 選擇字形
大部分英文字體都有粗體、細體多個字形劃分，按需選擇即可。
Step 3 : 引入字體 CSS 樣式表
只需要把給出的一串<link…>代碼引進頁面<head>里面即可，代碼中300,400是設計達人網小編剛剛選擇的字粗。
而這個字體名稱可以看下方給出的 font-family 代碼，如下圖：
整個過程是十分簡單的。
#3彩蛋：Google Font CDN
大陸用戶訪問 Google web font 比較慢，可以嘗試使用提供?Google font CDN 來加速。
【優設酷站22連發！】
- 免費圖庫+導航收集站：《酷站兩連發！高品質免費圖庫站+專注WEB/APP導航收集站》
- 音樂站+字體搜索：《酷站兩連發！幫你專心工作的音樂站+谷歌字體在線搜索神器》
- 漸變色+代碼比較：《酷站兩連發！漸變色方案全聚合網站+在線代碼比較神器》
- 配色+占位圖：《酷站兩連發！在線色彩搭配工具+快速生成占位圖片器》
- LOGO下載+字體下載：《酷站兩連發！可商用的矢量LOGO下載+平面最愛的27款免費字體》
- 壓縮圖片+在線配色：《酷站兩連發！在線圖片壓縮神器+在線配色工具COLOURCO》
- CSS Hover動畫+寵物小精靈配色：《酷站兩連發！寵物小精靈專屬配色網站+CSS HOVER動畫收集站》
- 美女圖片+游戲配色：《酷站兩連發！游戲配色網站+免費美女素材特供網站》
- 在線配色+字體推薦：《酷站兩連發！在線配色神器+英文字體推薦網站》
- 追波作品變代碼+16進制顏色：《酷站兩連發！用代碼呈現DRIBBBLE作品+16進制顏色網站》
- 無縫紋理+多邊形背景：《酷站兩連發！專注無縫紋理素材站+多邊形背景生成器》
原文地址：shejidaren
【優設網 原創文章 投稿郵箱：2650232288@qq.com】
================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量112萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 1 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓