教你在網頁上使用 Google Web font

文章來源于設計達人，感謝作者 shejidaren 給我們帶來經精彩的文章！

設計教程/前端設計/前端設計2016-05-07

現時有很多網站流行使用網頁字體，這些字體大部分來自 Google Font 提供的700+免費字體，對于網頁設計師和前端人員來說，是個很棒的字體庫，設計師可以使用字體庫提供的免費字體來網頁設計，而前端人員可以直接調用 Web Font 樣式，極其方便。這篇文章教你怎

現時有很多網站流行使用網頁字體，這些字體大部分來自 Google Font 提供的700+免費字體，對于網頁設計師和前端人員來說，是個很棒的字體庫，設計師可以使用字體庫提供的免費字體來網頁設計，而前端人員可以直接調用 Web Font 樣式，極其方便。這篇文章教你怎么用。

本文告訴你：

#1 下載 Google 字體庫的免費字體，并安裝到電腦上。
#2 在網頁上使用 Google Web Font(網頁字體）
#3 彩蛋^_^

教你在網頁上使用 Google Web font

Step 1: 選擇字體

進入 Google Font 頁面，選擇你要的字體（可在左欄或搜索框查找字體），點擊「Add to Collection」添加字體，可以多選，添加后，字體會出現在網頁下方的 Collection 模塊下。

教你在網頁上使用 Google Web font

Step 2: 下載字體

添加好自己的字體后，接下來就點擊右上角的下載按鈕來下載字體，如下圖：

教你在網頁上使用 Google Web font

這里我們選擇「zip file」壓縮包格式進行下載。

教你在網頁上使用 Google Web font

Step 3：安裝字體到電腦

解壓剛剛下載的字體包，把字體文件復制到操作系統的字體目錄。

Windows字體目錄：C:\Windows\Fonts

如果你是 MAC OS 用戶，請使用字體冊來安裝字體，“字體冊”位于“應用程序”文件夾中（在 Finder 中選取“前往”>“應用程序”）。

然后把字體直接拖進去安裝即可！

教你在網頁上使用 Google Web font

字體安裝完后，用戶就可以在 PS, AI, WORD, PDF 等常用軟件上使用它們了。

Step 1: 選擇好字體后，點擊「quick use」按鈕

教你在網頁上使用 Google Web font

Step 2: 選擇字形

大部分英文字體都有粗體、細體多個字形劃分，按需選擇即可。

教你在網頁上使用 Google Web font

Step 3 : 引入字體 CSS 樣式表

只需要把給出的一串<link…>代碼引進頁面<head>里面即可，代碼中300,400是設計達人網小編剛剛選擇的字粗。

而這個字體名稱可以看下方給出的 font-family 代碼，如下圖：

教你在網頁上使用 Google Web font

整個過程是十分簡單的。

大陸用戶訪問 Google web font 比較慢，可以嘗試使用提供 Google font CDN 來加速。

情非得已

日本a在线观看_久久久三区_久久99精品久久久久久国产越南_在线观看中文字幕av_国产精品久久久久久久久久东京_a免费视频