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; /* 字体加载策略 */
}

关键属性说明

1. font-family：

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

2. src：

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

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

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

3. font-weight 和 font-style：

   • 定义当前 @font-face 规则对应的字体粗细和样式
   • 可针对同一字体家族定义不同变体（如常规、粗体、斜体）

4. 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，开发者可以突破系统字体的限制，实现更丰富的网页设计效果。