前端切图外包时，适配各类页面字体是一个重要的考虑点。字体选择和适配不当可能会导致页面在不同设备和操作系统上的显示效果不一致，影响用户体验。以下是一些使用 `font-family` 来适配各类页面的要点：

1. **指定通用字体**：
- 在 CSS 中，可以使用 `font-family` 属性来指定页面使用的字体。通常，首先指定一个或多个通用字体，这些字体大多数设备和操作系统都会安装，例如 `sans-serif`, `serif`, `monospace` 等。
- 例如：
```css
body {
font-family: sans-serif;
}
```

2. **使用系统默认字体**：
- 在大多数情况下，使用系统的默认字体是一个安全的选择，因为用户可能已经对系统的字体进行了个性化设置，使用默认字体可以确保页面与用户的设置保持一致。
- 例如：
```css
body {
font-family: -apple-system, system-ui, sans-serif;
}
```

3. **指定备用字体**：
- 如果需要特定的字体样式，可以指定备用字体。通常，备用字体应该至少指定两个，以备第一个字体在某些设备上不可用时使用第二个字体。
- 例如：
```css
body {
font-family: 'Open Sans', sans-serif;
}
```

4. **考虑字体加载速度**：
- 如果使用的是网络字体（Web Font），应该考虑字体文件的大小和加载速度，避免影响页面加载时间。
- 可以使用字体压缩工具，或者选择轻量级的字体。

5. **字体样式的统一性**：
- 在整个网站中保持字体样式的统一性，包括标题、正文、按钮等元素的字体类型、大小、颜色和样式。

6. **响应式设计**：
- 确保字体在不同的屏幕尺寸和设备上都能正常显示，这通常需要结合媒体查询来调整字体大小和样式。

7. **考虑无障碍访问**：
- 确保字体清晰可读，对于重要的信息，避免使用装饰性太强的字体或者难以辨认的字形。

8. **字体版权问题**：
- 如果使用第三方字体，需要确保遵守其版权和使用条款，避免侵权。

9. **测试和反馈**：
- 在不同的设备和操作系统上测试页面，收集用户反馈，不断优化字体适配。

10. **使用字体服务**：
- 可以使用像 Google Fonts 或 Adobe Typekit 这样的字体服务来提供网络字体，这些服务通常提供了广泛的字体选择和良好的兼容性。

通过合理使用 `font-family` 属性，并考虑上述要点，可以有效地适配各类页面字体，提升用户体验。