WebStorm font-family 中文字體報錯解決：通用字體族回退機制

現象：`font-family: '宋體';` 觸發 WebStorm 檢查警告：`Font property font-family does not have generic default`。

警告含義

CSS 規範要求 `font-family` 列表**必須以通用字體族結尾**（`serif`、`sans-serif`、`monospace`、`cursive`、`fantasy`、`system-ui`），作為終極回退保證可讀性。

修正寫法

/* ✅ 正確：以 sans-serif 結尾 */
font-family: "SimSun", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;

/* ❌ 錯誤：無通用族 */
font-family: "SimSun";

/* ⚠️ 風險：依賴用戶系統安裝特定字體 */
font-family: "MyCustomFont", sans-serif; /* 若用戶無 MyCustomFont 會回退到系統默認 sans-serif */

中文字體最佳實踐 2024

:root {
  --font-sans: 
    /* 蘋果系統 */
    "PingFang SC", "Hiragino Sans GB", 
    /* Windows 10+ */
    "Microsoft YaHei", "Microsoft JhengHei", 
    /* Windows 7/8 兼容 */
    "SimSun", "SimHei",
    /* Linux/Android */
    "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC",
    /* 通用回退 */
    sans-serif;
}

body { font-family: var(--font-sans); }

WebStorm 設置優化

1. `Settings → Editor → Inspections → CSS → Valid font-family` → 勾選 "Warn if no generic font family" 可關閉警告（不推薦）。
2. 安裝插件 **CSS Font Family** 智能補全字體名與通用族。
3. 使用 `@font-face` 引入 Web 字體（如 Noto Sans SC 子集），不依賴系統安裝，消除「用戶無字體」風險。

關鍵區別