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

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

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

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

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

基於字體選擇對網站的重要性,鵠學苑在這篇教學文章中將各位同學說明最新 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 網站,在下圖中可以看到紅色方框標示的搜尋欄位。

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

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

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

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

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

第四步:另外的五種字體可以在 Google Fonts Early Access 這個網站中找到,在右上角輸入Chinese Traditional 以快速搜尋。
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定

第五步:在這裡以 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;

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

快速查看WordPress網站字體樣式

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

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

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

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

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

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

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

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

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

可以參考實際操作影片:

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

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

結語:

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

架站相關文章:

網站架設知識推薦閱讀:

Google FAQ 結構化資料啟用,讓問與答在搜尋結果中直接呈現
無障礙網站介紹-規範說明、檢測工具與操作影片
Google 演算法更新,使用者搜尋後將出現多樣性的網站內容

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Scroll to Top