自定义字体@font-face规则

@font-face规则允许开发者引入自定义字体，突破浏览器默认字体限制。通过定义字体名称、来源和格式，可以在网页中使用独特字体，提升设计灵活性和视觉体验。

@font-face基本语法

@font-face规则的基本结构如下：

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

关键属性说明：

• font-family：定义字体家族名称（使用时需引用）
• src：指定字体文件路径及格式（可多个备选）
• font-weight：设置字体粗细（400=normal，700=bold）
• font-style：定义斜体样式（normal/italic）
• font-display：控制字体加载期间的显示行为

字体格式与浏览器支持

现代网页常用四种字体格式：

推荐使用WOFF2+WOFF组合：

@font-face {
  font-family: 'ModernFont';
  src: url('modern.woff2') format('woff2'),
       url('modern.woff') format('woff');
}

多字重与多样式定义

完整字体家族需要分别定义不同变体：

/* 常规体 */
@font-face {
  font-family: 'VariableFont';
  src: url('font-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* 粗体 */
@font-face {
  font-family: 'VariableFont';
  src: url('font-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* 斜体 */
@font-face {
  font-family: 'VariableFont';
  src: url('font-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

可变字体(Variable Fonts)

单个文件包含所有变体，通过轴参数控制样式：

@font-face {
  font-family: 'FlexFont';
  src: url('flexfont.woff2') format('woff2-variations');
  font-weight: 100 900; /* 粗细范围 */
  font-stretch: 50% 200%; /* 宽度范围 */
}

.condensed {
  font-family: 'FlexFont';
  font-stretch: 75%;
  font-weight: 350;
}

字体加载优化策略

font-display属性

@font-face {
  font-family: 'PriorityFont';
  src: url('priority.woff2') format('woff2');
  font-display: optional; /* 可能不显示自定义字体 */
}

可选值：

• auto：浏览器默认行为
• block：短暂阻塞文本渲染
• swap：立即使用备用字体，加载后替换
• fallback：短阻塞期+短交换期
• optional：根据网速决定是否使用

预加载关键字体

<link rel="preload" href="critical.woff2" as="font" type="font/woff2" crossorigin>

实际应用案例

多语言字体支持

/* 中文思源黑体 */
@font-face {
  font-family: 'SourceHan';
  src: url('SourceHanSansSC-Regular.woff2') format('woff2');
  unicode-range: U+4E00-9FFF; /* 汉字范围 */
}

/* 英文Roboto */
@font-face {
  font-family: 'SourceHan';
  src: url('Roboto-Regular.woff2') format('woff2');
  unicode-range: U+0000-007F; /* ASCII范围 */
}

body {
  font-family: 'SourceHan', sans-serif;
}

图标字体实现

@font-face {
  font-family: 'IconFont';
  src: url('icons.woff2') format('woff2');
}

.icon::before {
  font-family: 'IconFont';
  content: '\e001'; /* Unicode私用区字符 */
}

常见问题解决方案

字体闪烁问题

@font-face {
  font-family: 'StableFont';
  src: url('stable.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: system-ui, -apple-system, 'StableFont', sans-serif;
}

本地字体优先策略

@font-face {
  font-family: 'HybridFont';
  src: local('Helvetica Neue Bold'),
       local('Arial Bold'),
       url('fallback-bold.woff2') format('woff2');
  font-weight: 700;
}

性能监控与调试

通过JavaScript检测字体加载：

document.fonts.load('1em MyFont').then(() => {
  console.log('字体已加载');
});

const fontCheck = new FontFaceObserver('MyFont');
fontCheck.load().then(() => {
  document.documentElement.classList.add('fonts-loaded');
});

对应CSS控制：

body {
  font-family: system-ui;
}

.fonts-loaded body {
  font-family: 'MyFont', sans-serif;
}

高级字体特性控制

启用OpenType特性：

.text {
  font-feature-settings: 'liga' 1, 'kern' 1;
  font-variant-numeric: tabular-nums;
  font-kerning: normal;
}

字体版权与授权

合法使用字体需注意：

1. 确认Web Font授权类型
2. 商业字体需购买网页使用许可
3. 免费字体仍需遵守SIL等开源协议
4. 自托管字体需检查授权条款

推荐资源：

• Google Fonts（自动处理授权）
• Adobe Fonts（需订阅）
• 思源字体（Apache License）