标签： font

CSS @font-face 使用指南

不写在样式表里也没啥用

核心价值

1. 设计一致性保障

  • 突破操作系统字体限制

  • 解决用户端字体缺失问题

2. 品牌视觉强化

  • 支持企业VI专用字体

  • 统一多端视觉体验

实现步骤

1. 字体准备

支持格式优先级：

  1. .woff2 (现代浏览器)

  2. .woff (兼容方案)

  3. .ttf (兜底方案)

2. 基础定义
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
3. 多字重配置
/* 粗体配置 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont-bold.woff2') format('woff2');
  font-weight: 700;
}

高级技巧

性能优化
@font-face {
  unicode-range: U+0020-007E; /* ASCII字符集 */
  font-display: optional;
}
多语言支持
/* 中文专用 */
@font-face {
  font-family: 'CJKFont';
  unicode-range: U+4E00-9FFF;
  src: url('cjk.woff2') format('woff2');
}

注意事项

  1. 版权合规

    • 确认Webfont授权

    • 商业字体需购买许可

  2. 性能平衡

    • 单文件建议 <300KB

    • 使用unicode-range分割

最佳实践

企业级方案
/* 多字重体系 */
@font-face {
  font-family: 'Enterprise';
  src: url('enterprise-light.woff2') format('woff2');
  font-weight: 300;
}
图标字体
.icon::before {
  font-family: 'IconFont';
  content: "\e900";
}