Fontface Ninja 介紹 – Chrome 快速查看網頁字體與字型大小樣式

Fontface Ninja 介紹

Fontface Ninja 介紹 :

1. Fontface Ninja 安裝與功能設定

2. Fontface Ninja 使用教學

Fontface Ninja 介紹 不知道你曾經有沒有過經驗,在網頁瀏覽時看到不錯的字體又苦於不知道要如何去下載、購買或查詢字型,有經驗的使用者會透過網站原始碼方式來找尋字型,或從CSS檔裡來挖掘使用的的是哪種字型組合,那對於沒有概念的使用者就讓我們來為你介紹好用的網頁字體查詢工具。

此文介紹的這款工具是瀏覽器擴充功能,目前 Fontface Ninja 提供 Google Chrome、Safari、FireFox 三種瀏覽器使用,這款工具可以快速查詢到網頁使用的字型資訊,也可以直接在網頁上測試字型套用後的樣式,最強大的功能就是可以一鍵下載字型檔案到電腦裡!

Fontface Ninja 官方網站:https://tw.wordpress.org/releases/

Fontface Ninja 書籤收藏及帳戶:https://tw.wordpress.org/releases/

Fontface Ninja 安裝與功能設定

第一步:進入官方網站後在網頁的最底下有不同瀏覽器的安裝連結,點選常用的瀏覽器安裝按鈕。

Fontface Ninja 介紹

第二步:以 Google Chrome 示範的話,點選加到Chrome再按對話框的”新增擴充功能”。

Fontface Ninja 介紹

第三步:安裝完畢後網址列右邊會出現圖示,第一次點開後會有四頁教學,點選 Next 後即可進入 Fontface Ninja 功能列。

Fontface Ninja 介紹

第四步:功能設定 – 點選 圖示進入設定頁面有四項可以變更。

  1. Display bookmarking option:可以關閉或開啟書籤選項 若未登入前則會顯示 圖示。
  2. Display prices:顯示/關閉字體價格。
  3. Use dark mode:開啟/關閉暗黑模式。
  4. Enable image detection(beta):開啟/關閉在圖片上辨識字型。

Fontface Ninja 介紹

 

Fontface Ninja 使用教學

第一步:在 Fontface Ninja 框框內會顯示網頁的所有字體,顯示Infos點選會導向google搜尋頁面為你尋找字體相關資訊;顯示Free則是可以直接下載;還有一種就是顯示字體的價格及購買網址

Fontface Ninja 介紹

第二步:將游標移到想要辨識字型的文字上,會顯示出字體大小、上下左右寬距及色號。

Fontface Ninja 介紹

第三步:若你喜歡此字型可以點選一下該段文字, Fontface Ninja 框框內就可以打上你想要知道的文字呈現此字型的效果,下方也可以調整間距,右上角的 Bookmarked 則可以讓你收藏此字型到你 Fontface Ninja 書籤內。

Fontface Ninja 介紹

第四步:若有將圖片辨識功能打開,將游標移到圖片點擊,也會辨識出該圖片的字型。

Fontface Ninja 介紹

 

結語:

Fontface Ninja 書籤 點選後可以看到熱門字型與搜尋字型,免費版只能儲存10個字型書籤,但也可以購買無限書籤和字體配對的方案,若是會常用到也覺得好用,不妨上去看一下方案及購買價格。

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

架站資源相關教學文章:

Mac 預覽程式介紹 – PDF註解、簽名、新增頁面及GIF應用

Mac 預覽程式教學 – 圖片去背、裁切、轉檔及修改註解

Mac 截圖教學 – 螢幕快照內建基本設定與操作示範圖解

網頁設計配色分享介紹(一)- LOL Color 與 NIPPON COLORS

ScreenTray 截圖工具 – 比作業系統內建截圖更有效率的截圖神器

網頁視覺設計 – 以貝茲曲線網站 10 種字母測驗圓弧圖是否完美

網站架設知識推薦閱讀:

Site Kit WordPress Plugin – Google SEO 整合工具外掛介紹

Google 搜尋 新增簡易指令:before: & after 快速篩選搜尋結果

Chrome 移除蓋版廣告?Google 12 項廣告體驗規範簡易說明

鵠學苑

鵠學苑

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

訂閱電子報

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

(adsbygoogle = window.adsbygoogle || []).push({});

熱門文章

(adsbygoogle = window.adsbygoogle || []).push({});

最新文章

(adsbygoogle = window.adsbygoogle || []).push({});

相關文章

(adsbygoogle = window.adsbygoogle || []).push({});

標籤雲

(adsbygoogle = window.adsbygoogle || []).push({});

Sign up for our Newsletter

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

Scroll to Top