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

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

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

FontSpark 找尋字型靈感工具,隨機套用英文字體即時線上預覽

FontSpark

還記得之前介紹過 ColorSpark 隨機產生配色或漸層色組合,協助設計師在開發網頁或應用程式時獲取配色靈感嗎?其實類似的色彩工具還不少,而且很多都有提供使用者快速隨機選色功能,有時候真的沒什麼想法,透過隨機展示可能會有收穫,如果你又不擅於程式碼,網站也會直接提供對應的 CSS 原始碼,方便帶入樣式表使用。除了配色外,字型也是影響使用體驗的重要因素,現在你有更直覺的方法挑選字型。

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

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

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

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

Font Swap

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

Font River 提供大量免費 PC 及 Mac 字型

2012 10 11 0823

Font River 是一個蠻棒的免費字型下載網站,和一般字型網站類似,都提供數量相當龐大的字型資源供使用者下載使用。Font River 的特色是網站整體的設計相當簡單,有完善的分類與搜尋功能,所有字型除了提供預覽圖以外,還有字符集以及在不同字體大小的顯示樣式,並有即時預覽功能可以讓使用者自行輸入想測試的文字內容和大小。此網站的字型以英文為主。

Wordmark.it 在網頁裡預覽字型、測試不同字型大小樣式

Wordmark.it 在網頁裡預覽字型、測試不同字型大小的樣式

Wordmark.it 是一款非常酷的 HTML5 應用服務,只需要透過瀏覽器,就可以直接在網頁裡預覽在你電腦上安裝的所有字型,並透過輸入文字、調整字型大小或是英文大小寫來即時測試每種字型所顯示的感覺。Wordmark.it 除了可以使用在英文與數字,亦適用於中文字型。同類型的網站還有 MyFontbook, 網頁版字型檢視器免費軟體則有 WinFontsView

MyFontbook, 網頁版字型檢視器

myfontbook-overview

MyFontbook是一款相當特別的線上字型檢視器,無須安裝軟體,只要打開瀏覽器,就能在網頁裡檢視你目前電腦裡的所有字型,除此之外,還能夠為字型分類、加入標籤。

透過MyFontbook,也可以直接在瀏覽器內測試字體顯示狀況,無論你用什麼作業系統都可以使用MyFontbook,節省寶貴時間。