對中文網頁來說,CSS 字型設定一直是個麻煩的問題,想直接載入字型檔案容量太大,拖慢網頁速度、耗費過多流量,通常會使用網頁字型解決,像是 Google Fonts 和 Adobe Fonts(以前叫作 Typekit)就有提供思源黑體和思源宋體等中文網頁字型,只要加入一段 JavaScript 程式碼並調整一下 CSS 樣式表就能使用,讓網頁的中文部分更易於閱讀,設計看起來也更有質感。
字型預覽
FontSpark 找尋字型靈感工具,隨機套用英文字體即時線上預覽
還記得之前介紹過 ColorSpark 隨機產生配色或漸層色組合,協助設計師在開發網頁或應用程式時獲取配色靈感嗎?其實類似的色彩工具還不少,而且很多都有提供使用者快速隨機選色功能,有時候真的沒什麼想法,透過隨機展示可能會有收穫,如果你又不擅於程式碼,網站也會直接提供對應的 CSS 原始碼,方便帶入樣式表使用。除了配色外,字型也是影響使用體驗的重要因素,現在你有更直覺的方法挑選字型。
Font Swap 在任何網頁快速更換字體,從 Google Fonts 選擇免費字型一鍵套用(Chrome 擴充功能)
有時候在瀏覽某些網站時會覺得網站使用的字型很醜、很不好閱讀,除了聯絡網站管理者調整,或使用類似 Mercury Reader 工具來開啟閱讀模式,還有其他更好的解決方法嗎?就我所知有一些瀏覽器外掛可快速更改網站字型,不過對一般使用者來說還是稍嫌困難,若有類似需求,本文要介紹一款非常好用的外掛「Font Swap」,可以快速將網站的標題、內文套用成 Google Fonts 裡任何字體。
RandomFont 字型控必備!開啟網頁隨機展示一款英文字型背景故事
Fontstand 創新付費字型租賃計畫,免費試用一小時或 10% 價格租用一個月(Mac 應用程式)
FontFriend 在網頁上即時測試 Google Fonts 字體效果,網站設計必備工具!
對於網頁設計師來說,字型和排版是影響使用者視覺非常關鍵的因素,要如何選擇一個看起來舒服、適合閱讀的字體就顯得相當重要,之前介紹過一些讓你在打造網頁時可以配合使用的工具,例如 Fontface Ninja、WhatFont 一鍵查看其他網頁使用的字型名稱、大小和行高,或是透過 TypeWonder 來線上測試字型等等,如果你想直接在網頁裡套用不同的字型變化,即時看到效果,不用再辛苦手動修改 CSS,直接使用簡單的工具搞定。
造字工房 16 種中文字型永久免費下載!
TypeWonder 線上測試網頁字型,輸入網址快速預覽指定字體
FontPro 超過 20,000 個免費網頁字型線上預覽、下載
有時候想設計文案,或是製作網站上使用的圖片、Logo 等等,都會上網找看看有沒有看起來不太一樣的字型,雖然免費字型網站很多,但不是幾萬種字體都符合你的需求,如果你想跳過大型的字型網站,直接找高品質、又不容易跟其他人重複的免費字型,以前我介紹過的 The League of Moveable Type、Lost Type 和 Fontfeest! 都是上上之選。