当前位置：首页 > news >正文

css 属性@font-face介绍

news 2025/8/15 7:09:45

@font-face 是 CSS 中用于自定义字体的规则，允许网页开发者在网页中使用服务器端的自定义字体文件，而不依赖用户系统中已安装的字体。这使得网页可以展示独特的字体样式，保持设计的一致性。

基本语法

@font-face {font-family: "自定义字体名称"; /* 定义字体名称，用于后续引用 */src: url("字体文件路径") format("字体格式"); /* 指定字体文件路径和格式 *//* 可选属性 */font-weight: normal; /* 字体粗细（normal/bold/100-900） */font-style: normal; /* 字体样式（normal/italic/oblique） */font-display: swap; /* 字体加载策略 */
}

关键属性说明

font-family：
- 定义一个名称，后续可通过 font-family: "自定义字体名称" 应用该字体

src：

指定字体文件的 URL 路径和格式
可同时提供多种格式以兼容不同浏览器：

src: url("font.woff2") format("woff2"),  /* 现代浏览器优先支持 */url("font.woff") format("woff"),    /* 广泛支持的格式 */url("font.ttf") format("truetype"); /* 备选格式 */

常用字体格式：woff2（推荐，压缩率高）、woff、truetype(ttf)、opentype(otf)

font-weight 和 font-style：
- 定义当前 @font-face 规则对应的字体粗细和样式
- 可针对同一字体家族定义不同变体（如常规、粗体、斜体）
font-display：
- 控制字体加载过程中如何显示文本：
  - swap：先显示默认字体，加载完成后切换（推荐）
  - block：隐藏文本直到字体加载完成
  - fallback：短暂隐藏后显示默认字体

使用示例

/* 定义自定义字体 */
@font-face {font-family: "MyCustomFont";src: url("fonts/myfont.woff2") format("woff2"),url("fonts/myfont.woff") format("woff");font-weight: 400; /* 常规字重 */font-style: normal; /* 常规样式 */font-display: swap;
}/* 应用自定义字体 */
body {font-family: "MyCustomFont", sans-serif;
}