css 字体图标制作
使用 Unicode 或私有字符区
在 CSS 中通过 @font-face 引入自定义字体，利用 Unicode 或私有字符区（PUA）定义图标。字体文件需包含图标对应的字形，通常使用工具如 FontForge 或 IcoMoon 生成。
@font-face {
font-family: 'MyIconFont';
src: url('myiconfont.woff2') format('woff2');
}
.icon {
font-family: 'MyIconFont';
display: inline-block;
}
.icon-heart::before {
content: "\2665"; /* Unicode 或自定义编码 */
}通过伪元素插入图标
结合 ::before 或 ::after 伪元素，将图标作为文本内容插入。需确保字体文件包含对应符号，并通过 content 属性指定字符编码。
.icon-arrow::before {
font-family: 'MyIconFont';
content: "\2192"; /* 右箭头 Unicode */
font-size: 16px;
}使用 SVG 作为字体图标
将 SVG 转换为字体格式（如 WOFF/WOFF2），或直接内联 SVG 通过 CSS 控制。工具如 Fontello 可帮助打包 SVG 为字体文件。
.icon-svg {
background: url('icon.svg') no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}利用 CSS 数据 URI 内联字体
减少 HTTP 请求，将字体文件转为 Base64 编码并内联到 CSS 中。适用于小型图标字体。
@font-face {
font-family: 'InlineIcons';
src: url('data:application/x-font-woff2;base64,...') format('woff2');
}优化字体图标渲染
添加 -webkit-font-smoothing: antialiased; 和 text-rendering: optimizeLegibility; 提升图标在浏览器中的显示效果，避免锯齿。
.icon {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}注意事项
- 确保字体文件兼容性（提供 WOFF2、WOFF 等多格式）。
- 使用私有字符区时，需在文档中明确编码与图标的对应关系。
- 考虑无障碍访问，为图标添加
aria-hidden="true"或辅助文本。
