css 属性@font-face介绍

@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;
}

注意事项

确保字体文件有合法授权，避免版权问题
优先使用 woff2 格式，它具有更好的压缩率和性能
提供多种格式以兼容不同浏览器和设备
过大的字体文件会影响页面加载速度，可考虑字体子集化（只包含需要的字符）

通过 @font-face，开发者可以突破系统字体的限制，实现更丰富的网页设计效果。