跳至主要内容

文字排版

AppFuse Web 的排版策略以系統字型優先為核心，確保最佳渲染效能與原生視覺體驗，並透過自托管的 Noto Sans TC 提供繁體中文支援。

字型堆疊​

font-family:
  /* 西文字型優先（效能更好、設計更專業） */
  -apple-system,            /* macOS 系統字型 */
  BlinkMacSystemFont,       /* macOS Chrome */
  "Segoe UI",               /* Windows */
  Roboto,                   /* Android */

  /* 中文字型 */
  "PingFang TC",            /* macOS 繁體中文字型 */
  "Noto Sans TC",           /* 自托管繁體中文字型 */
  "Microsoft JhengHei",     /* Windows 繁體中文字型 */

  /* 備用 */
  sans-serif,

  /* Emoji 和特殊符號 */
  "Apple Color Emoji",
  "Segoe UI Emoji",
  "Segoe UI Symbol",
  "Noto Color Emoji";
設計決策

西文字型排在中文字型之前。瀏覽器會依序嘗試，對於英數字元使用效能更好的系統字型，只有中文字元才 fallback 到中文字型。

文字大小​

AppFuse Web 使用 Tailwind 預設的文字大小，不額外定義 token：

Class大小行高使用場景
text-xs12px16px輔助標籤、Helper text、圖表文字
text-sm14px20pxcompact 密度元件、表單標籤、次要內容
text-base16px24pxcomfortable 密度元件、正文、卡片內容（預設）
text-lg18px28px區段標題

字重規範​

AppFuse Web 採用偏輕的字重策略，避免視覺過重：

元素字重Class說明
正文400font-normal預設字重
Card 標題400font-normal覆寫 DaisyUI 預設的 font-semibold
表格標頭400font-normal覆寫 DaisyUI 預設的粗體
表格內容400font-normal統一使用正常字重
/* tailwind.css 中的 DaisyUI 覆寫 */
@layer daisyui {
  .card-title {
    @apply font-normal;
  }
  .table thead,
  .table thead th,
  .table tbody,
  .table tfoot {
    @apply text-base;
    @apply font-normal;
    @apply text-base-content;
  }
}

Floating Label 縮放​

Input 元件使用 Floating Label 模式，標籤在聚焦時會縮小並上移：

密度原始字體縮放比例縮放後字體
comfortabletext-base (16px)scale-[0.78]≈ 12.5px
compacttext-sm (14px)scale-[0.78]≈ 10.9px

縮放使用 CSS transform: scale() 而非直接改變 font-size，確保動畫平滑不跳動。

Notch 寬度對齊​

Outlined variant 使用 fieldset/legend 實現 Notch（標籤缺口），legend 的字體大小需精確匹配 label 縮放後的寬度：

密度Legend 字體計算方式
comfortabletext-[0.78rem]16px × 0.78 ≈ 12.48px
compacttext-[0.685rem]14px × 0.78 ≈ 10.92px

表格文字​

表格的排版經過特別處理，確保一致性：

  • 表頭（thead）與表體（tbody）統一使用 text-base、font-normal
  • 表頭文字使用 text-base-content（100% 不透明度），不使用 DaisyUI 預設的淺色
  • 表頭背景使用 bg-base-200 與表體區隔

相關文件​