font-family: 都有哪些可选择
时间: 2025-05-23 21:56:07 浏览: 12
### 关于 CSS `font-family` 的可用选项
在 CSS 中,`font-family` 属性用于定义应用于文本的一组字体名称或通用系列名称。这些字体按照优先级顺序排列,当首选字体不可用时,浏览器会选择下一个可用的字体。
以下是常见的 `font-family` 字体族及其描述:
#### 1. **Serif**
Serif 是带有衬线的字体类别,通常用于印刷材料中以提高可读性。
- 示例字体:Times New Roman, Georgia, Garamond[^4]
#### 2. **Sans-serif**
Sans-serif 是无衬线字体,常用于屏幕显示,因其简洁的设计而易于阅读。
- 示例字体:Arial, Verdana, Helvetica
#### 3. **Monospace**
Monospace 表示等宽字体,其中每个字符占用相同的水平空间。这种字体广泛用于编程环境和代码展示。
- 示例字体:Courier New, Consolas, Monaco
#### 4. **Cursive**
Cursive 类似手写风格的字体,具有流畅的笔画连接特性。
- 示例字体:Zapfino, Comic Sans MS
#### 5. **Fantasy**
Fantasy 是装饰性强、设计独特的字体,适合标题或艺术化用途。
- 示例字体:Impact, Pacifico
#### 使用自定义字体
如果需要使用特定的自定义字体,可以通过 `@font-face` 或者链接外部样式表来实现。例如,在 Vue.js 应用程序中的 App.vue 文件可以这样引入图标字体文件:
```html
<style>
@import "./static/css/iconfont.css";
</style>
```
上述方法展示了如何将本地存储的 `.css` 文件作为资源导入项目中[^3]。
#### 避免常见错误
为了防止 stylelint 报错(如 Unexpected missing generic font family),应当始终为具体的字体名称附加一个通用字体族作为后备方案。比如,“Open Sans” 后面应加上 sans-serif 来确保兼容性和稳定性:
```css
body {
font-family: 'Open Sans', Arial, sans-serif;
}
```
#### 推荐实践
尽管某些字体全名可能包含了额外的信息(像粗细程度或者倾斜方向),但更推荐利用单独声明的方式控制这些属性,而不是依赖完整的字体名字字符串[^2]。这有助于保持样式的灵活性并让浏览器自行优化最终呈现效果。
---
阅读全文
相关推荐


















