Snapfont 在網頁即時套用測試 Google Fonts 和本機字型顯示效果(Chrome 擴充功能)

Snapfont 在網頁即時套用測試 Google Fonts 和本機字型顯示效果(Chrome 擴充功能)

對中文網頁來說,CSS 字型設定一直是個麻煩的問題,想直接載入字型檔案容量太大,拖慢網頁速度、耗費過多流量,通常會使用網頁字型解決,像是 Google FontsAdobe Fonts(以前叫作 Typekit)就有提供思源黑體思源宋體等中文網頁字型,只要加入一段 JavaScript 程式碼並調整一下 CSS 樣式表就能使用,讓網頁的中文部分更易於閱讀,設計看起來也更有質感。

360 查字體:查詢電腦裡的字型能否免費商用,避免產生侵權糾紛

360 查字體:查詢電腦裡的字型能否免費商用,避免產生侵權糾紛

如果你還有印象,2018 年微軟字型事件曾鬧得沸沸揚揚,這件事起源於有台灣 YouTuber 表示收到字型開發商的法務通知,告知使用者未經授權使用微軟內建字型(像是華康少女體、華康海報體等等)做為影片字幕,必須支付授權費用(後來原設計商有發表正式聲明表示不會主動向任何營利或非營利單位收取微軟內建字型的使用費)。

CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表(Chrome 擴充功能)

CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表(Chrome 擴充功能)

對於網頁設計或開發者來說,想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手,我在發現不錯的網站都會去看一下原始碼或樣式表,雖然 Google Chrome 本身就有強大的開發人員工具可以使用,但如果遇到要查詢某個網頁使用的字型或色彩時還是習慣以 Fontface NinjaType Sample 這類工具快速找到我要的資訊。

Font Swap 在任何網頁快速更換字體,從 Google Fonts 選擇免費字型一鍵套用(Chrome 擴充功能)

Font Swap

有時候在瀏覽某些網站時會覺得網站使用的字型很醜、很不好閱讀,除了聯絡網站管理者調整,或使用類似 Mercury Reader 工具來開啟閱讀模式,還有其他更好的解決方法嗎?就我所知有一些瀏覽器外掛可快速更改網站字型,不過對一般使用者來說還是稍嫌困難,若有類似需求,本文要介紹一款非常好用的外掛「Font Swap」,可以快速將網站的標題、內文套用成 Google Fonts 裡任何字體。

Type Anything 從瀏覽器測試建立完美網頁排版,一鍵匯出 CSS 樣式

Type Anything 從瀏覽器測試並建立最完美網頁排版,一鍵將 CSS 樣式匯出套用
(Copyright: pakhnyushchyy / 123RF Stock Photo

不怕說出來讓大家知道,其實我對網頁設計很挑剔,尤其在排版方面。如果你經常回來免費資源網路社群,應該會發現這裡更新頻率很高,不單單只有文章內容汰舊換新,連最細節的文字設定我都費盡心思,主要是希望能帶給讀者最好的閱讀感覺。儘管沒有一項設計能符合所有人喜好,我仍在不斷測試、交換中找到最適合大多數人閱讀習慣的排版風格。

Font Fit 在你的網站上測試各種字型排版,即時預覽字體大小顏色樣式

Font Fit 在你的網站上測試各種字型排版,即時預覽字體大小顏色樣式
(Copyright: baks / 123RF Stock Photo

設計網頁時排版和色彩選擇非常重要,其中色彩可以參考「BrandColors」從世界知名品牌標準色來獲得靈感,或是一些我曾經介紹過的配色工具;排版的話考量到字型和字體大小、間距、行高等等,這也是我平時不斷調整及測試的部分。對內容網站來說,提供閱聽者良好閱讀體驗不僅是考驗也是需要努力的目標,試著以讀者角度想,當你在閱讀網站時,會想要得到什麼樣的感覺,這麼說好像有點抽象,你可以利用 Font Fit 來找出最合適的排版設計。

FontReach 收錄百萬網站網頁字型使用情形,列出最熱門字型排名

FontReach 收錄百萬網站網頁字型使用情形,列出最熱門字型排名

網頁字型(Web fonts)發展歷史可以回溯到 CSS2 規範的 @font-face 屬性,這是一種讓網頁字體有更多變化的技術,即使電腦沒有安裝對應的字型檔案,也能透過瀏覽器載入讓系統支援更多顯示字元。網頁字型已被大量使用到現今的網路應用中,例如你平常經常瀏覽的 Google、Facebook、Twitter 等網站也都有運用網頁字型。

FontFriend 在網頁上即時測試 Google Fonts 字體效果,網站設計必備工具!

FontFriend 在網頁上即時測試 Google Fonts 字體效果,網站設計必備工具!

對於網頁設計師來說,字型和排版是影響使用者視覺非常關鍵的因素,要如何選擇一個看起來舒服、適合閱讀的字體就顯得相當重要,之前介紹過一些讓你在打造網頁時可以配合使用的工具,例如 Fontface NinjaWhatFont 一鍵查看其他網頁使用的字型名稱、大小和行高,或是透過 TypeWonder 來線上測試字型等等,如果你想直接在網頁裡套用不同的字型變化,即時看到效果,不用再辛苦手動修改 CSS,直接使用簡單的工具搞定。

Type Sample 輕鬆查詢、辨識網頁使用的字體名稱和大小(Chrome 擴充功能)

Type Sample 輕鬆查詢、辨識網頁使用的字體名稱和大小(Chrome 擴充功能)

先前我曾經介紹過不少在網頁內辨識字型的工具,例如 Fontface NinjaWhatFont Tool,這些服務對於網頁設計師來說尤其重要。如果要找出某個網頁所使用的字型,比較土法煉鋼的作法是去找網頁的 CSS 樣式檔,但不僅費時而且不容易快速得到我們所需要的資訊,這時候透過這些工具可以減少麻煩,而且也能準確找到某個網頁使用的字體名稱、大小。

Fontface Ninja 一鍵查看網頁使用的字型名稱、大小和行高,快速下載字體檔案

Fontface Ninja 一鍵查看網頁使用的字型名稱、大小和行高,快速下載字體檔案

對於網頁設計有興趣的朋友,一定很習慣在上網時注意網頁所使用的字型,若是比較有經驗的使用者會透過找網頁原始碼的方式來查看網頁使用的字型,或是從 CSS 檔裡去挖掘該網站使用的是那一種字型組合。先前我曾介紹過 WhatFont Tool,可以快速顯示網頁使用的字型、大小和行高,是個相當方便的工具,本文要再介紹另一個更強大的工具,它不但能夠幫你快速查詢到字型等資訊,還可以直接在網頁上測試文字實際套用該字體所顯示的樣式,以及一鍵將字型檔案下載到電腦裡。