教你在網(wǎng)頁上使用 Google Web font
文章來源于 設(shè)計達(dá)人，感謝作者 shejidaren 給我們帶來經(jīng)精彩的文章！現(xiàn)時有很多網(wǎng)站流行使用網(wǎng)頁字體，這些字體大部分來自 Google Font 提供的700+免費字體，對于網(wǎng)頁設(shè)計師和前端人員來說，是個很棒的字體庫，設(shè)計師可以使用字體庫提供的免費字體來網(wǎng)頁設(shè)計，而前端人員可以直接調(diào)用 Web Font 樣式，極其方便。這篇文章教你怎么用。
本文告訴你：
#1 下載 Google 字體庫的免費字體，并安裝到電腦上。
#2 在網(wǎng)頁上使用 Google Web Font(網(wǎng)頁字體）
#3 彩蛋^_^
Google.com/fonts/
#1 下載&安裝 Google 字體庫的免費字體
Step 1: 選擇字體
進(jìn)入 Google Font 頁面，選擇你要的字體（可在左欄或搜索框查找字體），點擊「Add to Collection」添加字體，可以多選，添加后，字體會出現(xiàn)在網(wǎng)頁下方的 Collection 模塊下。
Step 2: 下載字體
添加好自己的字體后，接下來就點擊右上角的下載按鈕來下載字體，如下圖：
這里我們選擇「zip file」壓縮包格式進(jìn)行下載。
Step 3：安裝字體到電腦
解壓剛剛下載的字體包，把字體文件復(fù)制到操作系統(tǒng)的字體目錄。
Windows字體目錄：C:\Windows\Fonts
如果你是 MAC OS 用戶，請使用字體冊來安裝字體，“字體冊”位于“應(yīng)用程序”文件夾中（在 Finder 中選取“前往”>“應(yīng)用程序”）。
然后把字體直接拖進(jìn)去安裝即可！
字體安裝完后，用戶就可以在 PS, AI, WORD, PDF 等常用軟件上使用它們了。
#2 在網(wǎng)站上使用 Google Web Font 字體
Step 1: 選擇好字體后，點擊「quick use」按鈕
Step 2: 選擇字形
大部分英文字體都有粗體、細(xì)體多個字形劃分，按需選擇即可。
Step 3 : 引入字體 CSS 樣式表
只需要把給出的一串<link…>代碼引進(jìn)頁面<head>里面即可，代碼中300,400是設(shè)計達(dá)人網(wǎng)小編剛剛選擇的字粗。
而這個字體名稱可以看下方給出的 font-family 代碼，如下圖：
整個過程是十分簡單的。
#3彩蛋：Google Font CDN
大陸用戶訪問 Google web font 比較慢，可以嘗試使用提供 Google font CDN 來加速。
情非得已
-
21個Sketch實用高頻小技巧2019-02-15
-
25款值得收藏的優(yōu)秀網(wǎng)站模板免費下載2015-09-16
-
20套高質(zhì)量的免費網(wǎng)頁模版PSD素材2013-09-02
-
20款國外時尚大氣的按鈕開關(guān)PSD素材下載2013-07-31
-
CSS實例教程：十步學(xué)會用CSS建站2011-10-05
-
網(wǎng)頁設(shè)計師：淺淡網(wǎng)頁BANNER設(shè)計2010-09-27
-
網(wǎng)頁細(xì)節(jié)教程：WEB設(shè)計精確點滴2010-09-13
-
網(wǎng)頁設(shè)計中的點滴細(xì)節(jié)把握2010-09-01
-
總結(jié)交互組件創(chuàng)新的四種方式2010-06-28
-
最全的國外電子商務(wù)CSS模板下載2010-06-18
-
設(shè)計師解讀如何讓扁平的網(wǎng)頁更出彩
相關(guān)文章10302018-12-07
-
5個網(wǎng)站設(shè)計實例解析網(wǎng)頁設(shè)計趨勢
相關(guān)文章4452018-11-29
-
詳解網(wǎng)頁圖文組合的三種布局方式
相關(guān)文章3752018-11-13
-
實例分析9款驚艷的網(wǎng)頁設(shè)計作品
相關(guān)文章5142018-10-10
-
設(shè)計師必須知道的版式設(shè)計三原則
相關(guān)文章4012018-10-10
-
11款2018年最值得關(guān)注網(wǎng)頁開發(fā)博客
相關(guān)文章2022018-08-14
-
10種網(wǎng)頁設(shè)計中字體的運用方式
相關(guān)文章3472018-05-10
-
優(yōu)秀的網(wǎng)頁設(shè)計和開發(fā)資源干貨集合
相關(guān)文章5102018-05-10
