css的font-family属性

在 CSS 中，`font-family` 属性用于定义文本的字体系列。开发者可以指定一个或多个字体名称作为备选方案，以确保在不同设备和系统中尽可能显示一致的视觉效果。以下是常用的 `font-family` 属性值列表及其分类。 ### 常见字体集合 #### 1. 衬线字体（Serif） 衬线字体通常具有装饰性的细小线条，常用于正式文档和印刷品中。 - `"Times New Roman"` - `"Georgia"` - `"Garamond"` #### 2. 非衬线字体（Sans-serif） 非衬线字体简洁现代，适用于屏幕显示。 - `"Arial"` - `"Helvetica"` - `"Roboto"` (Google Fonts) - `"Open Sans"` (Google Fonts) - `"Lato"` (Google Fonts) #### 3. 等宽字体（Monospace） 等宽字体每个字符占用相同的宽度，适合代码展示。 - `"Courier New"` - `"Consolas"` - `"Monaco"` #### 4. 幻想字体（Cursive/Fantasy） 这些字体通常用于特殊效果，风格独特且不常用。 - `"Comic Sans MS"`（Cursive） - `"Impact"`（Fantasy） #### 5. 中文字体 对于中文网页设计，以下字体是常用的： - `"微软雅黑"` (`Microsoft YaHei`) - `"黑体"` (`SimHei`) - `"楷体"` (`KaiTi`) - `"宋体"` (`SimSun`) - `"苹方"` (`PingFang SC`) —— 苹果系统推荐字体 - `"思源黑体"` (`Source Han Sans CN`) —— Adobe 和 Google 联合开发的开源字体 #### 6. 字体族通用名称（Generic Family） CSS 提供了五种通用字体族名称，用于作为后备选项： - `serif` - `sans-serif` - `monospace` - `cursive` - `fantasy` ### 示例用法 ```css p { font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; } h1 { font-family: "Georgia", "Times New Roman", serif; } code { font-family: "Courier New", Courier, monospace; } ``` ### 自定义字体加载（使用 `@font-face`） 通过 `@font-face` 可以引入自定义字体文件，例如： ```css @font-face { font-family: 'MyCustomFont'; src: url('fonts/mycustomfont.woff2') format('woff2'), url('fonts/mycustomfont.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'MyCustomFont', sans-serif; } ``` 这种技术广泛用于加载如 [Google Fonts](https://fonts.google.com/)、[Adobe Fonts](https://fonts.adobe.com/) 或 [Font Awesome](https://fontawesome.com/) 等第三方字体资源[^3]。 ---