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

Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定教學目的:

1.Google字體介紹及下載方式

2.快速查看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

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

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

• 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 相關教學文章:

Google地圖無法顯示,出現浮水印? 申請 API 帳單資料流程教學

Google Map 自訂外觀 – 客製化 Google 地圖樣式教學

Google Map 教學 – 網站嵌入 Google 地圖及我的地圖操作方法

Google Maps JavaScript API 申請 – 網站啟用 Google 地圖 教學

Google AdSense 教學 – AdSense申請在 WordPress 加入網站廣告

Google網站管理員 ( Search Console ) 驗證網站所有權的三種方式

Google reCAPTCHA 教學 我不是機器人 驗證按鈕 架站必學技能

[ 跳過recaptcha 驗證 ] – Google Invisible reCAPTCHA 隱形驗證碼 教學

使用 Google 自訂搜尋引擎取代WordPress站內搜尋步驟教學

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁 必學技能!

Google Page Speed Insight 網站速度測試

分享在 facebook
Facebook
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

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

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top