58 lines
1.0 KiB
Markdown
58 lines
1.0 KiB
Markdown
|
# 字体文件
|
|||
|
|
|
|||
|
|
本目录存放自定义字体文件。
|
|||
|
|
|
|||
|
|
## 📁 支持的格式
|
|||
|
|
|
|||
|
|
- `.woff2` - Web Open Font Format 2（推荐）
|
|||
|
|
- `.woff` - Web Open Font Format
|
|||
|
|
- `.ttf` - TrueType Font
|
|||
|
|
- `.otf` - OpenType Font
|
|||
|
|
|
|||
|
|
## 🎨 使用示例
|
|||
|
|
|
|||
|
|
### CSS 中引入
|
|||
|
|
|
|||
|
|
```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 组件中使用
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
<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
|