谷歌字體安裝指南,并在網頁上使用 Google Web font
谷歌字體安裝指南,并在網頁上使用 Google Web font-移動閱讀二維碼

現時有很多網站流行使用網頁字體,這些字體大部分來自?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:WindowsFonts

如果你是 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 來加速。

 

原文地址:shejidaren

本文鏈接:http://www.casaleticia.com/google-web-font-guideline.html
本文標簽: , , ,