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

1. **指定字体系列（Font Family）**
- 使用`font-family`属性来指定页面中使用的字体。例如：
```css
body {
font-family: 'Open Sans', sans-serif;
}
```
- 确保在`font-family`中指定一个通用字体族（如`sans-serif`）作为备用，以防首选字体不可用。

2. **使用字体栈（Font Stack）**
- 使用字体栈来提高字体的兼容性。字体栈是指一系列字体的列表，浏览器会尝试使用第一个可用的字体。例如：
```css
body {
font-family: 'Open Sans', sans-serif;
}
```
- 可以根据项目的需求和目标用户群来调整字体栈的顺序。例如，对于中文网站，可能需要包含中文字体，如`'Microsoft Yahei', sans-serif`。

3. **考虑字体的可访问性**
- 确保字体易读，避免使用难以辨认的字体或字体大小。
- 为有视觉障碍的用户提供足够大的字体和颜色对比度。

4. **使用字体服务**
- 使用像Google Fonts, Adobe Typekit, Font Awesome等字体服务来提供跨平台的字体支持。
- 确保遵守这些服务的使用条款，并且考虑到加载外部字体可能增加页面的加载时间。

5. **响应式设计**
- 确保字体在不同设备屏幕尺寸下都能保持清晰易读。
- 使用相对单位（如`rem`或`em`）来设置字体大小，以便更好地适应不同屏幕尺寸。

6. **考虑字体版权**
- 确保使用的字体是合法的，并且遵守相应的版权和许可协议。
- 避免使用未授权的字体，以免侵犯版权。

7. **测试**
- 在不同的设备和操作系统上测试页面，确保字体显示一致。
- 使用模拟工具来测试低分辨率设备和老旧浏览器的兼容性。

8. **优化加载速度**
- 避免使用过多的字体，以免增加页面加载时间。
- 压缩字体文件，使用CSS Sprites或字体图集来减少HTTP请求。

9. **提供本地化支持**
- 如果目标用户群分布在不同的地区，考虑提供不同语言的字体支持。
- 确保页面在不同语言环境下的字体显示都是清晰可读的。

10. **更新字体**
- 定期检查字体的可用性和兼容性，及时更新以保持最佳效果。

通过关注这些要点，前端切图外包时可以更好地适配各类页面字体，提供一致和良好的用户体验。