css 字体图标制作

字体图标制作方法

字体图标（Icon Font）是将图标转换为字体文件（如.woff、.ttf），通过CSS的@font-face引入并使用。以下是具体实现步骤：

准备矢量图标

选择矢量设计工具（如Adobe Illustrator或Figma）绘制图标，或从免费资源网站（如Flaticon、Iconfont）下载SVG格式的图标。确保图标路径简洁，无多余元素。

转换字体文件

使用在线工具或本地软件将SVG转换为字体文件：

• 在线工具：IcoMoon（https://icomoon.io/）、Fontello（https://fontello.com/） 上传SVG文件，选择需要的图标，生成字体包（包含.woff、.ttf等格式及CSS文件）。
• 命令行工具：使用fontforge或grunt-webfont批量处理SVG文件。

引入字体文件

在CSS中通过@font-face定义字体：

@font-face {
  font-family: 'MyIconFont';
  src: url('fonts/myiconfont.woff2') format('woff2'),
       url('fonts/myiconfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

使用字体图标

通过伪元素或HTML实体调用图标：

.icon-home::before {
  font-family: 'MyIconFont';
  content: '\e001'; /* Unicode编码，参考字体生成的CSS文件 */
}

<span class="icon-home"></span>

优化与兼容性

• 字体加载性能：使用font-display: swap避免布局偏移。
• 备用方案：为不支持字体图标的浏览器提供图片回退：

  .icon {
    background-image: url('icon.png');
    font-family: 'MyIconFont';
  }

维护与扩展

• 新增图标：重新导出字体文件并更新CSS中的Unicode映射。
• 图标对齐：通过vertical-align和line-height调整位置。

通过以上方法，可以高效地创建并管理自定义字体图标。