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
|