Google 字體下載 – WordPress 字體快速分析及網頁字體設定

內容目錄

Toggle

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – Google 字體 下載 WordPress 字體 快速分析 網頁字體設定，一個好的網站，所必須具備的要素有很多，而網站字體這個部分常常會被忽略，如果說圖片能幫助使用者快速了解網站內容，那麼文字就是網站內涵深度的體現，如果說沒有選擇適合的字體來呈現文案內容，造成使用者在閱讀上的困難，那麼再動人的詞彙，再吸引人的文字涵義，都無法真正打動使用者的心。
以下是在 WordPress 後台中編輯文字的圖片，字型的部分可以在紅色方框標示處做選擇，如果說沒有另外安裝字型，可以選擇的字型就只有網站預設的選項。

下圖是筆者將常用的字體用同樣的文字內容在網頁上呈現，每一種字型所呈現的樣式都有適合與不適合的部分， Arial black 就相當適合強調英文字體時使用，在同時具有英文與中文的段落中會自動將英文以粗體呈現，而 Impact 適合網站風格屬於活潑前衛的感覺。 Microsoft JhengHei (微軟正黑體)則適合於比較正式常規的內容。因此選擇對的字體可以為網站增加更具有特色的主要樣式，為網站加分。

基於字體選擇對網站的重要性，鵠學苑在這篇教學文章中將各位同學說明最新 Google 字體的查找以及下載位置，包含了2017年釋出的開源字體：思源宋體（ Noto Serif CJK ），具有簡約大氣，適合文學作品及長篇文章的特點，另外還有釋出 5種免費中文字體，雖然還在測試階段，但一樣可以下載並透過 CSS 樣式表在網站上呈現，分別是：

圓體字 – cwTeXYen
仿宋體字 – cwTeXFangSong
楷體字 – cwTeXKai
明體字 – cwTeXMing
黑體字（思源黑體）– Noto Sans TC

(小提醒：鵠學苑的所有教學均是以 Apple Mac OS X 系統做步驟示範！)

Google Noto Fonts
https://www.google.com/get/noto/
Google Fonts Early Access
https://fonts.google.com/earlyaccess/
Chrome 線上應用程式商店
https://chrome.google.com/webstore/category/extensions?hl=zh-TW

Google字體介紹及下載方式

第一步：進入到 Google Noto Fonts 網站，在下圖中可以看到紅色方框標示的搜尋欄位。

第二步：輸入 Noto Serif CJK 搜尋思源宋體。

第三步：可以看到 Noto Serif CJK 思源宋體有不同的呈現樣式，區分為 BLACK 、LIGHT 等字體，在安裝時可以自行選擇該樣式的字體檔案在網站中使用。

第四步：另外的五種字體可以在 Google Fonts Early Access 這個網站中找到，在右上角輸入Chinese Traditional 以快速搜尋。

第五步：在這裡以 Noto Sanc TC 黑體字（思源黑體）作為範例，在圖片中央以紅色方框標示的區塊中， Link 的 CSS 程式碼是用來定義在網站中匯入 Noto Sanc TC 這個字體，Example則是指定網站內元素呈現 Noto Sanc TC 這個字體。

Link：@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
Example：font-family: 'Noto Serif Khmer', serif;

快速查看WordPress網站字體樣式

第一步：進入到 Chrome 線上應用程式商店，在右上角的搜尋框中輸入 WhatFont ，可以找到如下圖二的畫面。

第二步：點擊圖片會有應用程式的簡單介紹，接者點按右上角的 ADD TO CHROME 安裝應用程式到瀏覽器。

第三步：在網址列旁應用程式區塊會有黑色 f 字樣的按鈕。

第四步：點擊後會開啟應用程式功能，當移動滑鼠時就會顯示這個網頁中文字的字體、大小、顏色、行高、字寬等詳細資訊。

可以參考實際操作影片：

第五步：另外如果說希望為英文的文字呈現不同的字體，也可以到 Google Fonts 這個網站來查看字體樣式，Google Fonts有超過800種字體可供選擇，相信一定可以找到你想要的字體。

結語：

最後要跟各位做一個提醒， Google Fonts Early Access 中提供的字體都是測試版本，也就是説當測試完畢後可能會將其字體加入到正式的Google Fonts網站，也有可能直接被移除，其移除並沒有一定的標準，也許是太少人使用，或者對於增加文字可閱讀性或獨特性沒有太大幫助，因此如果說各位同學在下載字體時發現該字體搜尋不到，那麼就表示已經被移除了。今天的教學到這裡告一段落了，不要忘記持續關注鵠學苑的最新文章，想學習超詳細的WordPress攻略嗎？？來鵠學院就對了！我們下次的教學見～