網頁字型(Web fonts)發展歷史可以回溯到 CSS2 規範的 @font-face 屬性,這是一種讓網頁字體有更多變化的技術,即使電腦沒有安裝對應的字型檔案,也能透過瀏覽器載入讓系統支援更多顯示字元。網頁字型已被大量使用到現今的網路應用中,例如你平常經常瀏覽的 Google、Facebook、Twitter 等網站也都有運用網頁字型。
無論你是網頁設計師,或是平常喜歡花時間研究網站相關技術,應該也都知道如何在網頁內載入網頁字型(例如使用 Google Fonts),但你或許想知道,究竟全世界的網站都選擇使用那一些網頁字型呢?
本文要介紹的 FontReach 網站已經幫你把這些資料整理好,讓使用者快速查詢某個字型被用於那一些我們熟悉的網站,只要開啟網頁、輸入要查詢的字型名稱,FontReach 就會把所有資料條列出來。
此外,它還可以顯示最熱門的網頁字型排行榜,讓你知道目前最流行的網頁字型選擇!
網站名稱:FontReach
網站鏈結:https://www.fontreach.com/
使用教學
網站提供的資料以英文字型為主。若你想要在中文網站上套用中文字型,可以試試看 justfont 或文鼎科技 iFontCloud 雲端字型服務。
STEP 1
開啟 FontReach 網站後,於首頁搜尋框輸入要查詢的字型名稱,例如 Helvetica,輸入時會同時在下面顯示出可能的字型名稱,以及它目前被多少網站使用。
STEP 2
搜尋 Helvetica Neue 這款很知名的網頁字型,果不其然有超過二十萬個網站使用,在排行榜裡是第三名,其中這份列表會依照網站排名顯示,包括 Facebook、Yahoo、Twitter 和 eBay 等網站都有使用 Helvetica。
如果你想深入瞭解某個網站使用的所有網頁字型,點選網址後,就會立即顯示相關結果,可以看到 Twitter 使用的網頁字型包括:Arial、Helvetica Neue、Sans-serif、Monospace、Georgia、Tahoma 和 Courier New,非常有趣。
STEP 3
以我的經驗來說,一個好的網頁字型必須要有幾個要件,包括:檔案不能太大、有良好的閱讀性以及可以在標題或內文套用的特定樣式。要如何找到最適切的字型呢?或許可以從字型使用排行榜來找出端倪。
開啟 https://www.fontreach.com/#top 即可看到 FontReach 整理的字型排名。
FontReach 對於開發者來說確實是個很有價值的參考工具,能讓我們在選擇網頁時有個更為客觀的依據。如果你想知道某個網站使用的字型,但在 FontReach 卻沒有列出,可使用其他類似的查詢工具:
值得一試的三個理由:
- 快速查詢字型被多少網站使用
- 找出某個網站使用的字型列表
- 網頁字型使用排行榜