HTML & CSS ? 谷歌字體安裝指南，并在網頁上使用 Google Web font

谷歌字體安裝指南，并在網頁上使用 Google Web font

發表于: HTML & CSS, 前端開發. 評論 (2)
Sponsor

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

本文告訴你：

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

網站名稱：Google Fonts
網站地址：?https://www.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 來加速。

網站名稱：Font CDN
網站地址：?http://fontcdn.org/

推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。
贊助商鏈接

與 、、 相關的文章

贊助商鏈接
設計達人微信交流社區：shejidaren888
喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。
«
»

+ 添加評論2 Responses to “谷歌字體安裝指南，并在網頁上使用 Google Web font”

  1. GNXEL - 回復
    2016 年 05 月 05 日 上午 10:45

    頂上贊助商鏈接的名字改了啊，難道是注意到舊名字Chinco的意思了？

  2. 了不起的春嬌的爸爸 - 回復
    2016 年 04 月 28 日 上午 11:19

    然而全墻


{ 發表評論 }