字体图标应用

字体图标的概念

字体图标是将图标以字体形式嵌入网页的技术。与传统图片图标相比，字体图标具有矢量缩放、CSS控制、加载性能等优势。通过Unicode编码映射，单个字体文件可包含数百个图标，使用方式与普通文本完全相同。

<!-- 基础使用示例 -->
<i class="iconfont icon-home"></i>

主流字体图标方案

1. 开源图标库

Font Awesome是目前最流行的开源图标库，提供超过2000个免费图标：

/* 引入Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* 使用示例 */
.microphone-icon::before {
  content: "\f130";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

2. 自定义图标字体

通过工具将SVG转换为字体文件：

1. 使用IcoMoon或FontForge创建字体
2. 定义@font-face规则：

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.custom-icon {
  font-family: 'MyIcons';
  content: "\e001";
}

CSS3控制技巧

1. 颜色与渐变

.icon {
  color: #ff4757;
  background: linear-gradient(to right, #ff4757, #ff6b81);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

2. 动画效果

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-icon {
  animation: spin 2s linear infinite;
  display: inline-block;
}

3. 多重阴影

.icon-3d {
  text-shadow: 
    1px 1px 0 #ccc,
    2px 2px 0 #bbb,
    3px 3px 0 #aaa;
}

性能优化实践

1. 子集化处理

使用fonttools提取所需图标：

pyftsubset myfont.ttf --output-file=myfont-subset.ttf --unicodes="U+e000-U+e00a"

2. 字体加载策略

/* 定义字体加载类 */
.font-loading {
  visibility: hidden;
}
.font-loaded {
  visibility: visible;
  @supports (font-display: swap) {
    font-display: swap;
  }
}

3. 雪碧图技术

.icon-sprite {
  background-image: url('icon-sprite.svg');
  background-size: 3000% 100%;
}

.icon-1 {
  background-position: 0 0;
}
.icon-2 {
  background-position: 3.333% 0;
}

响应式适配方案

1. 视口单位控制

.icon-responsive {
  font-size: calc(1rem + 1vw);
}

2. 媒体查询适配

@media (max-width: 768px) {
  .icon-nav {
    font-size: 1.5em;
    margin: 0 5px;
  }
}

3. 可变字体技术

@font-face {
  font-family: 'VariableIcons';
  src: url('icons.woff2') format('woff2-variations');
  font-weight: 100 900;
}

.icon-var {
  font-family: 'VariableIcons';
  font-variation-settings: 'wght' 400;
}

.icon-var:hover {
  font-variation-settings: 'wght' 700;
}

实际应用案例

1. 导航菜单实现

<nav class="icon-nav">
  <a href="#"><i class="icon-home"></i> 首页</a>
  <a href="#"><i class="icon-user"></i> 个人中心</a>
  <a href="#"><i class="icon-cart"></i> 购物车</a>
</nav>

2. 评分组件

.star-rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.star-rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.star-rating > span:hover:before,
.star-rating > span:hover ~ span:before {
  content: "\2605";
  position: absolute;
  color: gold;
}

3. 加载状态指示

<div class="loader">
  <i class="icon-spinner"></i>
  <i class="icon-spinner"></i>
  <i class="icon-spinner"></i>
</div>

<style>
  .loader i {
    animation: pulse 1.5s infinite ease-in-out;
  }
  .loader i:nth-child(2) {
    animation-delay: 0.2s;
  }
  .loader i:nth-child(3) {
    animation-delay: 0.4s;
  }
</style>

浏览器兼容处理

1. 降级方案

.icon {
  font-family: 'ModernIcons', sans-serif;
}

@supports not (font-variation-settings: normal) {
  .icon {
    font-family: 'LegacyIcons', sans-serif;
  }
}

2. 特征检测

if (!CSS.supports('font-display', 'swap')) {
  document.documentElement.classList.add('no-font-display');
}

3. 多格式支持

@font-face {
  font-family: 'CompatIcons';
  src: url('icons.eot'); /* IE9 */
  src: url('icons.eot?#iefix') format('embedded-opentype'),
       url('icons.woff2') format('woff2'),
       url('icons.woff') format('woff'),
       url('icons.ttf') format('truetype');
}

开发工具推荐

1. IcoMoon App：可视化图标选择与字体生成
2. FontForge：开源字体编辑器
3. Glyphter：SVG转字体在线工具
4. Fontello：定制化图标字体生成器

# 使用Node.js工具处理字体
npm install -g fontmin
fontmin myfont.ttf --text=0123456789abcdef -o dist/

可访问性增强

1. ARIA属性

<button aria-label="搜索">
  <i class="icon-search" aria-hidden="true"></i>
</button>

2. 高对比模式

@media (prefers-contrast: more) {
  .icon {
    filter: drop-shadow(0 0 1px black);
  }
}

3. 替代文本

<span class="visually-hidden">通知</span>
<i class="icon-bell" aria-hidden="true"></i>