CEDP通用的WebFont

cedp-font是在 FontAwesome 和 EIcons 两套 WebFont 库基础上的业务系统定制。

src/cedp.json 是业务定制的font在IcoMoon创建的项目配置文件。

src/font-unicode-mapping.json 是各个定制图标对应的unicode。

构建方式

1. 执行命令npm install安装依赖
2. 执行命令npm run build输出字体文件到 fonts/

使用方式

edp install cedp-font或npm i cedp-font --save

注册字体less示例

@font-face {
    .eicons-font-face(
        "Jingyi", // 新注册的字体family
        "node_modules/cedp-font/fonts/cedp-webfont",
        "1.0.0"
    );
}

.eicons-font-style() {
    font-family: Jingyi, EIcons, FontAwesome; // Webfont使用的字体以及优先级
    .eicons-common-style();
}

维护方式

icon定制需求发生时，操作步骤如下

1. 在 src/fonts/ 下增加/删除/修改 SVG 文件
2. 打开 https://icomoon.io/app/#/projects
3. 点击 Import Project 导入当前项目配置文件
4. 点击 Load 进入项目的字体配置界面
5. 按照需求 增加/删除/修改 字体图标
6. 点击 Generate font 进入字体配置界面
7. 修改字体图标unicode编码
8. 回到 https://icomoon.io/app/#/projects
9. 点击 Download 下载新的项目配置文件
10. 将新的项目配置文件更新到 cedp-font

维护原则

尺寸

为了保持风格一致，新增 SVG 文件需要进行预处理

1. 参考 http://fontawesome.io/icons/ 对应字体图标以 font-size: 4em 时的实际高度作为画布尺寸
2. SVG 在画布中的垂直方向定位统一为垂直居中
3. 水平方向定位与 FontAwesome、EIcons 的对应字体图标保持一致
4. 字体留白比例与 FontAwesome、EIcons 的对应字体图标保持一致

编码

为了保证业务定制的字体图标可以覆盖已有字体图标库的效果，在 IcoMoon 操作步骤第7步填写的unicode必须与已有字体图标库的对应编码保持一致。

相似图标的编码优先级为 EIcons > FontAwesome。

其他

如新增字体图标不在已有字体范围，则统一参考以下原则

1. 宽度56px，高度56px作为画布尺寸
2. 垂直居中
3. 水平居中
4. 上下左右各至少有5px的留白
5. 编码不得与 FontAwesome 或 EIcons 所有已存在字体图标的unicode冲突