天门前端切图外包时，巧用 `font-family` 适配各类页面是一个重要的技巧。`font-family` 属性用于指定元素的字体系列，它可以帮助确保在不同设备、操作系统和浏览器上的一致性显示效果。以下是一些关于如何使用 `font-family` 适配页面的要点：

1. **指定通用字体系列**：
使用通用的字体系列，如 `sans-serif`、`serif`、`monospace` 等，以确保在任何设备上都有字体可用。例如：
```css
body {
font-family: sans-serif;
}
```

2. **使用系统默认字体**：
在某些情况下，使用 `font-family: inherit` 或 `font-family: -apple-system, system-ui, sans-serif` 可以确保页面使用系统的默认字体，这样可以提供更好的用户体验，因为用户可能已经对系统的字体进行了个性化设置。

3. **自定义字体**：
如果你想使用特定的字体，你可以使用 `@font-face` 规则来导入自定义字体。确保你的字体文件格式是跨平台兼容的，比如 `woff` 或 `woff2`。例如：
```css
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
}

body {
font-family: 'MyCustomFont', sans-serif;
}
```

4. **考虑字体加载顺序**：
确保在你的样式表中，自定义字体声明在通用字体系列之后。这样，如果用户设备上没有你的自定义字体，它将使用前面定义的通用字体系列。

5. **响应式设计**：
在响应式设计中，考虑不同屏幕尺寸下的字体显示。你可能需要调整字体大小或调整布局来确保内容的可读性。

6. **字体加载策略**：
如果你使用的是网络字体，考虑使用字体加载策略，如字体预加载或懒加载，以确保字体在用户交互之前尽快加载。

7. **字体版权**：
确保你使用的字体是合法的，并且你拥有使用它们的权利。避免使用受版权保护的字体，除非你有适当的许可。

8. **字体嵌入**：
如果你需要确保所有用户都能看到你的设计所期望的字体，你可以考虑使用字体嵌入服务，如Google Fonts或Typekit，这些服务提供了广泛可用的字体集合。

通过合理使用 `font-family` 属性，你可以确保你的页面在不同设备和浏览器上都有良好的显示效果，提供一致的用户体验。