字体加载优化

font-display 取值说明

最佳字体加载策略

<!-- Step 1: Preload critical fonts -->
<link rel="preload"
  href="/fonts/inter-var.woff2"
  as="font"
  type="font/woff2"
  crossorigin>

<!-- Step 2: CSS with font-display -->
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-display: swap;
  font-weight: 100 900; /* variable font range */
  unicode-range: U+0000-00FF; /* subset: Latin */
}

<!-- Step 3: System font fallback stack -->
body {
  font-family: 'Inter', system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

字体子集化（减小体积）

# Install pyftsubset (fonttools)
pip install fonttools brotli

# Subset to Latin characters only
pyftsubset font.ttf \
  --output-file=font-subset.woff2 \
  --flavor=woff2 \
  --unicodes="U+0000-00FF,U+0131,U+0152-0153"

# Typical size reduction: 400KB → 30KB for Latin subset

中文Web字体策略