字型配對與 Google Fonts 目錄
瀏覽精選的熱門 Google Fonts 目錄，附即時預覽，依類別篩選並依名稱搜尋，然後複製可直接貼上的 CSS 並探索建議的字型配對——全部在您的瀏覽器中完成。
沒有符合您搜尋的字型。請嘗試其他名稱或類別。
一切都在您的瀏覽器中執行——字型僅從 Google Fonts 載入以供即時預覽，不上傳任何內容、不需註冊，完全免費。
以展示字型設定的標題
這是一段以配對文字字型設定的內文。良好的字型配對能在個性與可讀性之間取得平衡：富有特色的標題字型吸引目光，而乾淨、舒適的內文字型則讓長段落易於閱讀。點選「CSS」即可複製標題和內文的兩條 @import 行以及 font-family 規則。
標題:
內文:
關於 字型配對與 Google Fonts 目錄
這個字型目錄將 80 款熱門的 Google Fonts 收錄在一個可搜尋的頁面中,每款都以實際樣本呈現,包含一句全字母句、一行字母與數字,以及分類徽章。它涵蓋五大字型家族──無襯線、襯線、展示、手寫與等寬──讓你能比較真實字形,而不必單憑名稱猜測。
每張字型卡都附有精選的搭配建議:適合搭配標題與內文使用的夥伴字型。點擊搭配標籤會開啟一個預覽,以一種字型設定標題,另一種設定段落,讓你能在實際情境中判斷這個組合,再決定是否採用。
當某款字型或搭配符合需求時,一鍵即可複製可直接貼上的 CSS──一行 Google Fonts 樣式表的 @import 敘述,加上具備合理備援字型的對應 font-family 堆疊。字型僅為即時預覽而從 Google Fonts 載入;你輸入的任何內容都不會被上傳。
如何使用 字型配對與 Google Fonts 目錄
- 瀏覽字型卡,每張都顯示名稱、分類徽章,以及以實際字型呈現的即時樣本文字。
- 使用搜尋框依名稱尋找字型,或點擊分類標籤(無襯線、襯線、展示、手寫、等寬)篩選網格。
- 拖曳大小滑桿(16 至 72 px),以你目標的標題或內文大小預覽樣本行。
- 點擊「搭配」標籤或「預覽搭配」按鈕,查看以建議組合設定的標題與內文段落。
- 點擊卡片或搭配預覽中的「CSS」按鈕,將 @import 敘述與 font-family 宣告複製到剪貼簿。
常見問題
它收錄了一套精選的 80 款廣受使用的 Google Fonts,分佈在五個分類中:無襯線、襯線、展示、手寫與等寬。每個分類標籤都會顯示即時數量,讓你能看出目前篩選條件下有多少款字型符合。
每款字型都列出一到兩款精心挑選、與之形成良好對比的夥伴字型──通常是搭配可讀性高的內文字型使用的展示或襯線字型作為標題。搭配預覽會針對每種組合顯示確切的標題與內文角色。
對於單一字型,你會得到一行指向 Google Fonts css2 端點的 @import url() 敘述(含正常與粗體字重),以及一個具有正確通用備援字型的 font-family 堆疊。對於搭配組合,則會得到兩個 @import 敘述,以及標題與內文各自獨立的宣告。
是的,即時預覽會從 Google Fonts CDN 載入字型──這是頁面唯一的外部請求。你的搜尋、篩選選擇與複製的 CSS 都留在你的瀏覽器中;沒有任何內容被上傳或儲存。
是的,瀏覽、預覽搭配以及複製 CSS 都免費,不需要帳號。列出的字型皆為 Google Fonts,依其開放授權條款,本身在個人與商業專案中皆可免費使用。
你可以使用大小滑桿,將樣本大小調整為 16 px 到 72 px 之間的任何數值,所有卡片都會同時更新。這讓你能輕鬆地以計畫用於標題或內文的確切大小,比較各個候選字型。
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。