FontStore简介

FontStore为线上矢量图标库,提供常用矢量图标,支持项目多人协作,支持同步本地。与FontEditor结合,提供强大的图标在线编辑能力,项目管理和项目同步功能 大大减少了字体图标使用成本。

FontStore支持的浏览器:chrome,safari,firefox

图标库

FontStore保存的图标库,为互联网搜集来的常用图标库,以及公司内部ui设计师设计的图标库,若涉及版权问题, 请及时告知fonteditor@126.com

编辑器

FontStore提供线上字体编辑器供开发者使用,需要更多的字体相关工具,请移步:http://fontstore.baidu.com/editor

添加图标

通过首页的搜索框,输入关键词,查找所需的icon。

点击`图标区域`将图标添加到暂存区。

点击工具栏中的``添加到已选``将图标添加到已选列表。

点击工具栏中的``收藏``将图标添加到我的收藏。

点击工具栏中的``下载``按钮,进入下载页面,提供常用的`png`和`svg`格式文件下载,并且贴心的提供生成`svg`和`base64`文本代码。

保存图标

已登录用户可以使用`项目管理`功能,未登录用户只能预览和导出暂存区的图标。

点击`已选图标`图标,打开已选图标面板。

在已选图标面板上,点击`预览`按钮,预览当前的图标项目,点击`下载`按钮,将生成的字体保存到本地。

在已选图标面板上,点击`保存到项目`按钮,输入项目名称,或者选择已有项目,将图标添加到项目中。

新建项目

点击左侧的`新建项目`图标,打开新建项目对话框。

设置项目名称,以及字体的`FontFamily`,起始代码点等内容,创建新项目。

其中`推送地址`为FontStore提供的特有的同步本地功能,
设置本地接收地址,例如:`http://127.0.0.1/src/font/bdfont.font`, 可将项目中的图标直接生成ttf,woff,svg等字体文件直接推送到本地项目中,大大降低了字体图标使用成本。

字体图标需要设置代码点才能使用,`起始代码点`按照顺序为图标自动添加代码,设置成`0x0`或者`留空`则不自动生成代码点,使用图标本身代码点。

设置项目成员,方便多人维护同一个项目,已登录用户点击左侧`多人协作`按钮,打开我能管理的项目列表。

注意:fontstore提供了一个单独的本地推送工具,`fontstore`使用 `npm install fontstore -g` 安装fontstore工具,使用方式请查看链接


编辑项目

在项目面板工具栏中:

点击`编辑`按钮,修改项目配置

点击`拷贝`按钮,拷贝当前项目,以便于快速创建新项目。

点击`转让`按钮,修改项目维护者。

点击`同步`按钮,将项目生成的字体图标同步到本地项目中,当前支持的同步的文件包括:ttf,woff,eot,svg。

点击`删除`按钮,删除当前项目。

点击`导出`按钮,将项目图标导出到本地。

点击`编辑`按钮,将项目图标导出到字体编辑器中进行进一步编辑, 字体编辑器编辑后的图标与项目中的图标无法同步,这一点需要注意,若要编辑项目中的图标,点击项目图标中的编辑按钮,进行项目图标编辑

项目图标编辑

点击项目图标中的`编辑`按钮,打开图标编辑对话框。

可以设置项目图标中的名称、class类名和代码点。

默认编辑后的图标将只能在本项目中使用,`拷贝副本`则将编辑后的图标添加到图标库中,方便下次使用。

在工具栏中提供图标常用操作,支持图标缩放、旋转、镜像、复制,剪切,粘贴等功能。

上传图标

点击顶部右侧的`上传`按钮,进入上传页面。

FontStore支持上传的文件格式为`svg`,`ttf`,`woff`,`eot`等格式,
`woff`文件需要为非压缩格式,压缩格式的文件,请使用`FontEditor`打开后导出`svg`或者`ttf`。

图标需要设置名称和class属性,点击`编辑`按钮可以对图标进行进一步编辑。

单次上传最多支持50个图标。

感谢

感谢efe团队成员对FontStore项目的大力支持,为前端开发者提供方便的字体图标管理工具。