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调整位置。
通过以上方法，可以高效地创建并管理自定义字体图标。
