在常宁前端切图外包过程中，适配不同类型的页面时，合理使用`font-family`属性是非常重要的。`font-family`属性用于指定元素的字体系列，它可以帮助确保在不同设备和操作系统上的一致性显示效果。以下是一些关于如何巧用`font-family`来适配各类页面的要点：

1. **指定字体系列**：
- 使用`font-family`属性来指定页面中使用的字体系列。如果页面设计依赖于特定的字体，确保在`font-family`中包含该字体的名称。
- 使用字体栈（font stack），即一个字体的列表，这样如果用户的设备上没有你指定的字体，将会尝试使用列表中的下一个字体。例如：
```css
font-family: 'Open Sans', sans-serif;
```

2. **考虑字体兼容性**：
- 不同的操作系统和浏览器可能对字体的支持有所不同。使用广泛支持的字体，如`Arial`、`Verdana`、`Tahoma`、`Helvetica`等，以确保最大程度的兼容性。
- 对于中文页面，常用的字体包括`"微软雅黑"`、`"黑体"`、`"宋体"`等。

3. **字体权重和样式**：
- 使用`font-weight`来指定字体的粗细，例如`normal`、`bold`或具体数值如`400`、`700`等。
- 使用`font-style`来指定字体的风格，如`normal`（常规）、`italic`（斜体）或`oblique`（倾斜）。

4. **字体大小和行高**：
- 使用`font-size`来设置字体大小，确保文本的可读性。
- 使用`line-height`来设置行高，以改善文本的垂直对齐和阅读体验。

5. **字体加载和性能**：
- 如果使用非系统字体，考虑使用字体加载CSS技巧，如`font-display`属性，以控制字体加载失败时的回退效果。
- 优化字体文件大小，可以使用字体压缩工具，或者只加载页面需要的字体样式。

6. **响应式设计**：
- 在响应式设计中，确保字体大小和布局能够根据不同的设备屏幕大小进行调整。
- 使用相对单位（如`em`、`rem`）来设置字体大小，这样它们可以继承和响应父元素的字体大小。

7. **本地字体和网络字体**：
- 如果可能，使用本地字体，因为它们的加载速度更快，且不需要额外的网络请求。
- 如果需要使用网络字体（Web Font），确保使用可靠的字体服务，并考虑字体加载性能。

8. **测试和调整**：
- 在不同的设备和操作系统上测试字体显示效果，以确保一致性和可读性。
- 根据需要调整字体大小、样式和颜色，以确保在所有设备上的最佳显示效果。

通过以上这些技巧，你可以更好地适配各类页面，确保你的前端切图作品在不同环境和设备上都能呈现出一致且美观的视觉效果。