jiachenlong/static/fonts/README.md

字体文件

本目录存放自定义字体文件。

📁 支持的格式

• .woff2 - Web Open Font Format 2（推荐）
• .woff - Web Open Font Format
• .ttf - TrueType Font
• .otf - OpenType Font

🎨 使用示例

CSS 中引入

@font-face {
  font-family: 'CustomFont';
  src: url('/static/fonts/CustomFont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'CustomFont', -apple-system, BlinkMacSystemFont, sans-serif;
}

React 组件中使用

<div style={{ fontFamily: 'CustomFont, sans-serif' }}>
  自定义字体文本
</div>

📦 常用字体

中文字体

• 思源黑体（Source Han Sans）
• 思源宋体（Source Han Serif）
• 站酷系列字体

英文字体

• Inter
• Roboto
• Open Sans

⚠️ 注意事项

1. 字体版权：确保有商用授权
2. 文件大小：中文字体较大，建议压缩或使用子集
3. 加载性能：使用 font-display: swap 避免 FOIT

---

最后更新: 2026-03-16