在前端切图外包过程中，字体适配是一个重要的环节，它直接影响到页面的美观和用户体验。使用 `font-family` 属性可以帮助我们更好地控制页面的字体显示，确保在不同设备和操作系统上的一致性。以下是一些关于如何巧用 `font-family` 适配各类页面的要点：

1. **指定字体系列**：
使用 `font-family` 属性时，可以指定一个字体系列，例如 `sans-serif`、`serif` 或 `monospace`，以确保在不同设备上有相似的字体样式。例如：
```css
body {
font-family: sans-serif;
}
```

2. **使用系统默认字体**：
如果想要页面使用系统的默认字体，可以简单地设置 `font-family: inherit;` 或者不指定 `font-family` 属性。这样，页面将继承浏览器的默认字体设置。

3. **自定义字体**：
如果需要使用特定的字体，可以将字体文件上传到服务器，并通过 `@font-face` 规则来定义字体。例如：
```css
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff') format('woff');
}

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

4. **字体权重**：
使用 `font-weight` 属性来设置字体的粗细，例如 `normal`、`bold` 或者具体的数值。例如：
```css
h1 {
font-family: 'CustomFont', sans-serif;
font-weight: bold;
}
```

5. **字体样式**：
使用 `font-style` 属性来设置字体风格，例如 `normal`、`italic` 或者 `oblique`。例如：
```css
em {
font-family: 'CustomFont', sans-serif;
font-style: italic;
}
```

6. **字体大小和行高**：
使用 `font-size` 和 `line-height` 属性来设置字体大小和行高，确保文本的可读性。例如：
```css
p {
font-family: 'CustomFont', sans-serif;
font-size: 16px;
line-height: 1.5;
}
```

7. **字体加载失败时的备用字体**：
使用 `font-family` 的备用字体列表特性，确保在自定义字体无法加载时，有备用的字体可以显示。例如：
```css
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
/* 如果有多个字体，可以使用逗号分隔 */
font-display: swap;
}

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

8. **考虑字体许可**：
在使用自定义字体时，务必确保遵守字体的许可协议。商业字体可能需要购买许可证才能在商业项目中使用。

通过合理地使用 `font-family` 属性，可以确保页面在不同设备和操作系统上都有良好的字体显示效果，提升用户体验。