功能簡介
CSS 字型堆疊產生器會用訪客裝置上已經安裝的字型，產生可以直接貼上的 font-family 值。選擇一種風格，例如原生系統介面字型、Inter 和 Helvetica 這類新怪誕體、Charter 這類過渡襯線體，或適合寫程式的等寬字型，工具就會依正確順序列出各平台上最合適的字型。
這些字型堆疊參考了知名的 Modern Font Stacks 合集，另外還提供許多網站仍在使用的經典寫法 -apple-system, BlinkMacSystemFont, "Segoe UI"。你也可以為簡體中文、繁體中文、日文、韓文、阿拉伯文、泰文或印地文加上備援字型，並在結尾加入彩色 Emoji 字型。
使用方法
- 選擇 字型堆疊。左側預覽會顯示它在你目前使用的裝置上的效果，預覽文字也可以直接修改成你自己的內容。
- 如果頁面含有中文、日文、韓文、阿拉伯文、泰文或印地文，請在 其他文字的字型 中選擇對應的語言。
- 開啟或關閉 加入 Emoji 字型。
- 選擇 輸出格式：純
font-family宣告、CSS 自訂屬性、Tailwind 的fontFamily設定，或純清單。 - 複製結果，或下載為
.css檔案。
含有空格或以數字開頭的字型名稱會自動加上引號；system-ui、sans-serif 這類 CSS 關鍵字絕不加引號，因為加了引號就會變成不存在的字型名稱。
範例
系統介面字型加上簡體中文備援：
font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";小提示
- 內文用一套字型堆疊，程式碼用一套等寬字型堆疊：兩套系統字型堆疊都不需要額外載入。
- 預覽取決於你自己裝置上安裝的字型，最好也在 Windows 和手機上確認一下。
- 之後如果要加入網路字型，把它放在清單最前面，並保留系統字型堆疊作為備援。
常見問題
› 什麼是字型堆疊？
就是 CSS font-family 屬性裡的一串字型家族。瀏覽器會使用裝置上已安裝的第一個字型，找不到就往下一個退，最後落到 sans-serif 這類通用字型家族。
› 為什麼要加中文、日文或韓文字型？
Inter、Charter 等西文字型沒有中日韓字形。在通用字型家族之前列出 PingFang SC、Microsoft YaHei 或 Noto Sans SC，中文就會用風格相符的字型顯示，而不是交給系統隨便挑。阿拉伯文、泰文和印地文（天城文）也是一樣。俄文、烏克蘭文、希臘文、越南文、土耳其文、波蘭文等使用拉丁或西里爾字母的語言不需要額外設定，每個字型堆疊裡的系統字型和 Noto 字型都已涵蓋。
› 為什麼 Emoji 字型放在 sans-serif 後面？
Emoji 字型只涵蓋表情符號。放在最後可以確保一般字母和數字絕不會用 Emoji 字型呈現，而表情符號在各平台上依然顯示為彩色字形。
› 這些字型堆疊需要下載網路字型嗎？
不需要。每個字型堆疊都只使用 Windows、macOS、iOS、Android 或常見 Linux 發行版內建的字型，頁面載入時完全沒有字型請求。