在前端切图外包过程中，字体适配是一个重要的环节，它直接影响到页面的美观度和用户体验。字体选择和适配需要考虑到不同设备、操作系统以及浏览器的支持情况。以下是一些关于如何巧用`font-family`来适配各类页面的要点：

1. **字体栈（Font Stack）**
- 在设置字体时，不要只使用单一字体，而是应该使用字体栈。字体栈是指一组字体名称，它们被浏览器按照顺序检查，直到找到一个可以显示的字体。例如：
```css
font-family: 'Open Sans', sans-serif;
```
这意味着如果浏览器不支持`'Open Sans'`字体，它会尝试使用`sans-serif`字体族中的其他字体。

2. **系统默认字体**
- 使用`font-family: inherit;`可以让元素继承其父元素的字体设置，这样可以确保整个页面的一致性。

3. **字体权重（Font Weight）**
- 不同的字体可能支持不同的权重，比如`normal`、`bold`、`bolder`、`lighter`等。根据设计需求选择合适的字体权重。

4. **字体样式（Font Style）**
- 字体样式包括`normal`、`italic`和`oblique`。根据设计需求选择合适的字体样式。

5. **字体大小（Font Size）**
- 确保在不同设备上字体大小合适，可以使用相对单位（如`em`、`rem`）来设置字体大小，以便在不同屏幕分辨率下都能保持良好的可读性。

6. **字体加载失败时的备用方案**
- 考虑在字体加载失败时提供备用方案，比如使用通用字体族（如`serif`、`sans-serif`）或者提供一个默认字体。

7. **考虑字体的可访问性**
- 确保字体对色盲用户和其他有视觉障碍的用户友好，使用足够的对比度，并且避免使用难以阅读的字体。

8. **字体许可和版权**
- 确保使用的字体有合法的许可，避免使用受版权保护的字体，除非你有权使用它们。

9. **响应式设计**
- 确保字体在不同屏幕尺寸下都能良好显示，响应式设计中字体大小和样式的适配尤为重要。

10. **测试**
- 在不同的设备和浏览器上测试字体显示效果，确保页面在不同环境下的字体显示一致。

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