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

1. **字体栈（Font Stack）**
- 使用字体栈（Font Stack）来定义字体。字体栈是一个由多个字体名称组成的列表，它们被浏览器按照顺序依次检查，直到找到第一个可用的字体。例如：
```css
font-family: 'Open Sans', sans-serif;
```
这里，如果浏览器没有`Open Sans`字体，它会退而求其次，使用`sans-serif`这个通用字体家族。

2. **系统默认字体**
- 使用系统默认字体作为最后的选择。这样可以确保在任何情况下页面都能正常显示，即使用户没有安装你指定的字体。例如：
```css
font-family: 'Open Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 'Source Han Sans CN', sans-serif;
```

3. **字体权重（Font Weight）**
- 根据需要为不同的字体赋予不同的权重，以适应不同的文本样式，如标题和正文。例如：
```css
font-family: 'Open Sans', sans-serif;
font-weight: 300;
```
这里的`font-weight`属性设置了字体的粗细为300，这是`Open Sans`字体的一种特定风格。

4. **字体样式（Font Style）**
- 使用`italic`或`normal`属性来设置字体样式。例如：
```css
font-family: 'Open Sans', sans-serif;
font-style: italic;
```
这将使文本以斜体显示。

5. **字体大小（Font Size）**
- 使用`px`、`em`或`rem`来设置字体大小。例如：
```css
font-size: 16px;
```
或者
```css
font-size: 1em;
```
或者
```css
font-size: 1rem;
```

6. **字体加载失败时的备用字体**
- 如果某些字体无法加载，可以使用`font-family`的备用功能来指定一个备用字体。例如：
```css
@font-face {
font-family: 'Open Sans';
src: url('open-sans.woff2') format('woff2'),
url('open-sans.woff') format('woff');
}
```
这样，如果`open-sans.woff2`文件不可用，浏览器会尝试加载`open-sans.woff`文件。

7. **考虑字体许可**
- 确保使用的字体是合法的，并且符合项目的许可要求。在选择字体时，要注意商用字体和免费字体的区别。

8. **响应式设计**
- 确保字体在不同屏幕尺寸下都能正常显示。响应式设计考虑了不同设备上的字体渲染差异，并提供了适配方案。

9. **字体优化**
- 压缩字体文件大小，以减少页面加载时间。可以使用工具如`fontmin`或`gulp-iconfont`来压缩字体文件。

10. **字体预加载**
- 使用`font-display`属性来控制字体加载时的显示行为。例如：
```css
@font-face {
font-family: 'Open Sans';
src: url('open-sans.woff2') format('woff2');
font-display: swap;
}
```
这里的`font-display: swap`表示如果字体文件加载失败，将立即尝试使用备用字体。

通过合理使用`font-family`属性及其相关属性，可以确保页面在不同设备和操作系统上都能呈现出一致的字体样式，提升用户体验。