舟山前端切图外包过程中，适配各类页面字体是一项重要任务。使用 `font-family` 属性可以有效地控制页面的字体显示，确保在不同设备、不同操作系统下，页面都能保持一致的字体样式。以下是一些关于如何巧用 `font-family` 适配各类页面的要点：

1. **指定常用字体系列**：
- 在 CSS 中，可以使用 `font-family` 属性来指定页面使用的字体。通常，会指定一个字体系列，例如 `sans-serif`、`serif`、`monospace` 等，以确保在不同设备上有相似的字体显示。

```css
body {
font-family: sans-serif;
}
```

2. **自定义字体**：
- 如果项目有特定的字体需求，可以引入自定义字体。通过 `@font-face` 规则，你可以加载自己的字体文件，并在 `font-family` 中指定这个新字体的名称。

```css
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.ttf') format('truetype');
}

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

3. **字体 Fallback**：
- 为了确保所有用户都能看到类似的设计，应该为自定义字体指定一个备选字体。这样，如果用户的设备上没有你指定的字体，会自动使用备选字体。

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

4. **考虑字体权重**：
- 不同的字体权重（如 `normal`、`bold`、`bolder`、`lighter`）可以用来创建层次结构，确保标题和正文之间的视觉清晰度。

```css
h1 {
font-family: 'MyCustomFont', sans-serif;
font-weight: bold;
}

p {
font-family: 'MyCustomFont', sans-serif;
font-weight: normal;
}
```

5. **响应式设计**：
- 在响应式设计中，你可能需要根据不同的设备宽度调整字体大小。你可以使用媒体查询来为不同的设备宽度设置特定的字体大小。

```css
@media (min-width: 768px) {
body {
font-size: 16px;
}
}

@media (max-width: 767px) {
body {
font-size: 14px;
}
}
```

6. **字体加载优化**：
- 确保字体文件尽可能小，以减少加载时间。可以使用字体压缩工具来减小字体文件的大小。

7. **合法字体名称**：
- 在 `font-family` 中使用合法的字体名称，避免使用不存在的字体名称，否则可能导致页面显示异常。

通过合理使用 `font-family` 属性，可以确保你的前端切图作品在各种设备和操作系统上都能呈现出一致的字体样式，提升用户体验。