自定义字体使用场景

问题

Web 开发中，什么时候需要使用自定义字体？如何实现？

解答

常见使用场景

1. 品牌字体

企业官网、产品页面需要使用品牌专属字体，保持视觉一致性。

2. 图标字体

使用字体图标（如 Font Awesome、iconfont）代替图片，便于缩放和样式控制。

3. 特殊设计效果

标题、Banner、活动页面需要艺术字体来增强视觉冲击力。

4. 多语言支持

某些语言（如阿拉伯语、泰语）需要特定字体才能正确显示。

5. 代码展示

技术博客、文档站点使用等宽字体展示代码。

实现方式

/* 定义自定义字体 */
@font-face {
  font-family: 'MyFont';
  src: url('./fonts/myfont.woff2') format('woff2'),
       url('./fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 优化加载体验 */
}

/* 使用自定义字体 */
.brand-title {
  font-family: 'MyFont', sans-serif;
}

字体格式优先级

@font-face {
  font-family: 'OptimizedFont';
  src: url('font.woff2') format('woff2'),  /* 最小，优先 */
       url('font.woff') format('woff'),    /* 兼容性好 */
       url('font.ttf') format('truetype'); /* 兜底 */
}

图标字体示例

<!-- 引入图标字体 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">

<!-- 使用图标 -->
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>

font-display 属性

@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  /* 
   * auto: 浏览器默认行为
   * block: 短暂隐藏文字，等待字体加载
   * swap: 先用后备字体，加载完成后替换
   * fallback: 短暂隐藏，超时则用后备字体
   * optional: 根据网络情况决定是否使用
   */
  font-display: swap;
}

关键点

• 品牌一致性：企业网站使用专属字体强化品牌形象
• 图标字体：矢量图标，支持任意缩放和 CSS 样式控制
• 格式选择：优先使用 woff2，体积最小、兼容性好
• 加载优化：使用 font-display: swap 避免文字闪烁
• 性能考虑：字体文件较大时考虑子集化或按需加载