跳至主要內容
Lizely

Google Fonts 藏頭詩搭配工具

比較八組精心挑選的 Google Fonts 搭配組合，複製有效的 CSS2 連結加上預設 CSS。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.選擇八組搭配中的一組，並輸入代表性的標題或產品文字。
  2. 2.比較標題與正文字型的節奏，並測試備用行為與所有必要的指令碼或語言。
  3. 3.複製連結與 CSS 或完整範例，並在發布前審查隱私、授權、CSP 與效能。

關於Google Fonts 藏頭詩搭配工具

Google Fonts 藏頭詩搭配工具提供八組刻意限制的標題與正文字型組合，用於快速探索排版選擇。選擇一組搭配，輸入最多 240 字元，並在標題與正文字型大小下比較相同訊息。輸出內容包含 Google Fonts CSS2 格式樣式表連結、兩個可重複使用的 CSS 類別加上通用備用選項，以及一個完整範例。搭配選擇與程式碼產生皆保留於本機，雖然即時預覽會向 Google Fonts 發出網路請求以載入所選字型檔案。

收藏涵蓋了多種對比:中性無 serif 的 serif 顯示器,有文學文字的幾何無 serif,有 serif 文字的凝縮顯示器和全 sans 產品組合.每個選項都有短的情緒標籤,但這些描述是編輯指南,而不是客觀的編寫法.一個適合某個品牌,語言,視角或內容密度的物件可能會失敗. 使用這個頁面縮小選項,然後用實際的產品字詞和介面狀態進行測試.。

八個字型家族與請求的粗細（weight）為明確的參考資料。這些資料來自 Google Fonts 匯總，已對照 Google 的 CSS API 與資料庫元資料，並獨立交叉驗證於 Fontsource。生成器僅請求每個家族所顯示的單一粗細。例如，編輯對比請求 Playfair Display 在 700 與 Source Sans 在 3 的 400。廣告與實用性選項則維持 Bebas Neue 在其標準 400 粗細，而非創造一個不存在的粗體請求。

產生的 URL 使用 CSS2 端點，每族一個引數，加上 display=swap。字型名稱中的空白會轉為加號。每個字型家族皆包含 wght 軸值。樣式表連結可放入 HTML 標籤區，而 CSS 類別則可複製至樣式表中。預覽與複製的範例皆在每個命名字型後加入通用的襯線或無襯線備用，以確保若遠端字型請求被阻斷或延遲，文字仍可讀取。

複製連結僅輸出連結元素。複製 CSS 僅輸出兩個類別規則。複製完整範例則將連結與樣式區塊合併。瀏覽器或嵌入政策可能拒絕 clipboard 權限；若發生此情況，相同文字仍會顯示供手動選擇，且工具不會誤報為成功。產生的程式碼中不包含 API 金鑰，因為公開的 CSS 字型 API 不需要 Google 開發者 API 所需的金鑰，該金鑰僅用於資料庫元資料請求。

載入遠端字型會帶來隱私、法律、效能與穩定性上的影響。使用者瀏覽器在樣式表與字型檔案載入時會觸發 Google 控制的端點。請審視適用於你管轄區域的規範，包括同意設計、內容安全策略、部署環境與組織需求。部分團隊會自建字型檔案以控制快取與第三方請求。此工具不會下載檔案、為自建提供 @font-face 規則，或判斷自建是否為合規的正確選擇。

字型授權也需針對專案進行審查。Google Fonts 字型家族採用開放授權，但各家族與版本的具體授權檔案與引用義務由各家族自行負責。生成器不會複製授權文字，不會承諾商標使用權，亦不會追蹤後續元資料變更。在發布前，請務必查閱官方家族清單或資料庫，特別是在將字型嵌入應用、檔案、硬體或重新分發的範本時。

排版品質不僅僅是匹配兩個字型家族。應評估層級、x-height、行長、行高、粗細對比、標點、數字、斜體、粗體強調、連結、表單控制項以及備用指標。請測試你網站支援的所有語言與文字系統；一個字型家族可能在拉丁文字上表現優異，但缺乏其他文字系統，導致同一句子內出現混雜的備用情況。這八個選項並無排名，亦不聲稱具備普遍語言支援。

遠端字型載入可能在首次繪製後改變佈局。display=swap 會讓備用文字保持可見，但字元差異仍可能導致佈局偏移。僅請求實際使用的字型與粗細，僅在測量證明必要時預載，設定穩定的佈局尺寸，並在緩慢或離線情境下測試行為。兩字型請求並非自動比系統字型快。應測試實際頁面表現，而非將預覽當作效能測試。

輸入僅會改變預覽文字，不會作為 CSS API 的文字引數傳送，因此不會透過產生的 URL 洩露範例。若輸入為空，則會顯示一個可見的本機暫時佔位符，而非導致預覽崩潰。Google Fonts CSS2 檔案定義了請求語法與多字型行為。Google 的資料庫檔案說明家族元資料，Fontsource 則提供獨立的名稱、分類與粗細交叉驗證。搭配標籤、氛圍與組合皆為透明的本機編輯決策，與參考資料測試分開。

方法與來源

維護八組經審核的字型與字重記錄，產生符合 Google Fonts CSS2 標準的字型引數，並設定 display=swap，為每一個類別加入通用備用字型，請求內容中不得包含樣本文字（URL），並說明字型搭配的判斷屬於編輯決策。

常見問題

預覽會聯絡 Google 嗎？
會。選擇搭配會載入其樣式表與字型檔案，搭配組合與範例文字則保留於本機。
這些是客觀上最佳的字型搭配嗎？
不是。這八組是精心策劃的起點。品牌語氣、內容、語言支援、指標、可及性與效能決定某組搭配是否適用。
複製的連結需要 API 金鑰嗎？
不需要。公開的 CSS 字型 API 連結不使用 Google 分離的資料庫開發者 API 所需的金鑰。
我可以自行主機字型嗎？
此工具不會產生自建字型檔案或 @font-face 規則。請查閱各官方授權條款，若專案需要，請使用核准的自建流程。

相關工具

色彩工具 使用指南

查看全部