导出指南
Bobcorn 导出工作流程的完整说明——从选择图标到生成生产就绪的字体文件。
打开导出对话框
点击左侧边栏菜单中的导出按钮。导出对话框以模态形式打开，让你配置输出目录、选择要包含的图标分组，并选择输出格式和伴随文件。所有设置在会话间都会被记住，因此一旦配置好你偏好的导出设置，后续导出只需一键完成。
选择输出目录
第一步是选择保存导出文件的位置。默认情况下，Bobcorn 使用你的桌面。点击路径旁的文件夹按钮可浏览并选择其他位置。
fonts/ 或 assets/ 目录，避免每次导出后手动复制文件。在图标集迭代更新的开发阶段尤其有用。
选择图标分组
你可以选择要包含在导出中的图标分组。默认情况下，所有分组均已选中。取消选中你不需要的分组——例如，你可能会排除包含草稿图标的"drafts"分组。
每个分组在名称旁边显示其图标数量。当你切换分组开关时，列表底部的图标总数会实时更新，让你随时了解导出字体中将包含多少字形。
字体格式
Bobcorn 可以生成五种字体格式。根据项目的浏览器支持要求选择合适的格式：
| 格式 | 默认状态 | 启用时机 | 了解更多 |
|---|---|---|---|
| .woff2 | 始终开启 | 始终——必不可少的网页格式 | WOFF2 → |
| .woff | 可选 | 需要支持 IE 11 | WOFF → |
| .ttf | 可选 | 桌面应用、OS 字体安装 | TTF → |
| .svg | 可选 | 调试、旧版 iOS | SVG Font → |
| .eot | 可选 | 仅 IE 6-8 旧版 | EOT → |
WOFF2 始终包含，因为它是必不可少的网页字体格式——不存在需要网页字体导出却不需要它的场景。所有其他格式均按需选用，取决于你的具体要求。
伴随文件
除字体文件本身外，Bobcorn 还可以生成几个使集成和协作更便捷的伴随文件：
CSS（icons.css）
包含 @font-face 声明和图标集中每个图标的 .icon-* CSS 类。将此文件放入项目即可用简单的类名使用图标。有关生成 CSS 工作原理的详细信息，请参阅 CSS @font-face 指南。
JS（icons-symbol.js）
一个 SVG symbol 精灵，在脚本加载时将所有图标注册为内联 SVG symbol。在需要多色图标或 SVG 特定功能时，可与字体图标配合使用。使用模式请参阅 SVG Symbol 指南。
HTML（demo.html）
一个交互式预览页面，显示所有导出图标及其名称、CSS 类名和 Unicode 码位。在浏览器中打开即可浏览完整图标集。对审查图标库的设计师和在集成过程中查找类名的开发者都很有用。
ICP（project.icp）
Bobcorn 的项目文件。导出此文件以与团队成员共享图标项目或作为备份。在 Bobcorn 中打开 ICP 文件会完整恢复项目状态——所有图标、分组、元数据和设置均与导出时完全一致。
ZIP 打包
启用 ZIP 选项可将所有导出文件打包为单个 .zip 压缩包。在与团队成员分享图标字体、上传至 CDN 或附加到设计交付文档时非常有用。ZIP 包含与普通导出相同的目录结构——无嵌套或重新组织。
推荐配置
以下是三种适用于常见项目类型的实用预设：
现代网页项目
- WOFF2（始终开启）+ CSS + HTML 演示
- 最小体积，覆盖 97%+ 浏览器
全兼容性项目
- WOFF2 + WOFF + CSS + HTML 演示
- 覆盖 IE 11+ 及所有现代浏览器
设计系统 / 组件库
- WOFF2 + TTF + CSS + JS symbol + HTML 演示 + ICP
- 字体用于 CSS 使用，TTF 用于桌面工具，JS symbol 用于多色变体，ICP 用于项目备份
输出文件结构
当所有选项均启用时，Bobcorn 生成以下文件结构：
导出输出output/
├── MyIcons.woff2 # 字体文件
├── MyIcons.woff
├── MyIcons.ttf
├── MyIcons.css # @font-face + 图标类
├── MyIcons-symbol.js # SVG symbol 精灵
├── demo.html # 交互式预览
└── MyIcons.icp # 项目备份字体族名称（如"MyIcons"）来自 Bobcorn 中的项目名称。所有生成的文件都以此名称为前缀，保持一致性。
导出后
Bobcorn 生成文件后，按照以下步骤将图标字体集成到项目中：
- 复制字体文件 + CSS 到项目的 assets 或 fonts 目录
- 链接 CSS：
<link rel="stylesheet" href="MyIcons.css"> - 在标记中使用图标：
<i class="icon icon-home"></i> - 可选：预加载 WOFF2 文件以加快首次渲染
以下是完整的集成示例：
完整集成<head>
<link rel="preload" href="MyIcons.woff2" as="font"
type="font/woff2" crossorigin>
<link rel="stylesheet" href="MyIcons.css">
</head>
<body>
<button><i class="icon icon-save"></i> 保存</button>
</body>rel="preload" 提示告诉浏览器在遇到 CSS 中的 @font-face 规则之前就开始下载字体文件。这消除了 CSS 解析与字体下载之间的延迟，使得首次绘制时图标即可可见。即使字体是同源的，也需要 crossorigin 属性。
demo.html 可浏览所有导出图标。点击任意图标可复制其 CSS 类名——在开发过程中需要查找特定图标的类名时非常方便。