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

1. **字体栈（Font Stack）**
- 在设置 `font-family` 属性时，通常会指定一个字体栈，即一系列字体的名称，浏览器会按照顺序尝试使用这些字体。例如：
```css
font-family: 'Open Sans', sans-serif;
```
- 确保字体栈中包含常用字体（如 `sans-serif`, `serif`, `monospace`），这样即使用户设备上没有你指定的特定字体，也能使用系统默认字体。

2. **字体嵌入**
- 对于一些特定字体，你可能需要将其嵌入到网页中，以确保在任何设备上都能保持一致的显示效果。这通常涉及到购买字体授权并使用 CSS 或 HTML 中的 @font-face 规则来嵌入字体。
- 例如：
```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;
}
```

3. **字体加载顺序**
- 确保字体加载顺序合理，对于网络字体（如 @font-face 定义的字体），应该放在字体栈的前面，因为用户代理（如浏览器）会尝试使用这些字体，如果它们不可用，才会回退到系统默认字体。

4. **字体格式**
- 使用现代字体格式，如 WOFF2，因为它们通常比旧格式（如 TTF）更小，加载速度更快。

5. **字体预加载**
- 如果你使用了网络字体，可以考虑使用 `font-display` 属性来设置字体加载失败时的回退策略。例如：
```css
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-display: swap;
}
```
- `font-display: swap` 表示如果网络字体加载失败，将立即回退到系统默认字体，并在后台继续加载网络字体。

6. **字体大小和样式**
- 确保你的字体大小和样式在所有设备上都能清晰可读。使用相对单位（如 `rem`, `em`）来设置字体大小，这样你可以通过调整根元素（如 `html`）的字体大小来全局调整页面字体。

7. **响应式设计**
- 考虑不同屏幕尺寸和设备类型的响应式设计。确保你的字体在各种设备上都能清晰可见，不会因为缩放或适配问题而影响阅读体验。

8. **本地字体**
- 如果你在本地开发，确保你的字体文件被正确地包含在项目中，并且你的代码编辑器或预处理器（如 Sass, Less）能够正确处理字体声明。

9. **字体版权**
- 确保你使用的字体没有版权问题。商业字体通常需要购买授权，而一些开源字体则可以免费使用，但要确保遵守相应的许可证。

10. **测试**
- 在不同的设备、操作系统和浏览器上测试你的页面，以确保字体显示一致且页面布局没有问题。

通过关注这些要点，你可以更好地适配各类页面字体，提升用户体验。