1.0.2 • Published 8 years ago
cedp-font v1.0.2
CEDP通用的WebFont
cedp-font是在 FontAwesome
和 EIcons
两套 WebFont
库基础上的业务系统定制。
src/cedp.json
是业务定制的font在IcoMoon创建的项目配置文件。
src/font-unicode-mapping.json
是各个定制图标对应的unicode。
构建方式
- 执行命令
npm install
安装依赖 - 执行命令
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定制需求发生时,操作步骤如下
- 在
src/fonts/
下增加/删除/修改SVG
文件 - 打开 https://icomoon.io/app/#/projects
- 点击
Import Project
导入当前项目配置文件 - 点击
Load
进入项目的字体配置界面 - 按照需求
增加/删除/修改
字体图标 - 点击
Generate font
进入字体配置界面 - 修改字体图标unicode编码
- 回到 https://icomoon.io/app/#/projects
- 点击
Download
下载新的项目配置文件 - 将新的项目配置文件更新到
cedp-font
维护原则
尺寸
为了保持风格一致,新增 SVG
文件需要进行预处理
- 参考 http://fontawesome.io/icons/ 对应字体图标以
font-size: 4em
时的实际高度作为画布尺寸 SVG
在画布中的垂直方向定位统一为垂直居中- 水平方向定位与
FontAwesome
、EIcons
的对应字体图标保持一致 - 字体留白比例与
FontAwesome
、EIcons
的对应字体图标保持一致
编码
为了保证业务定制的字体图标可以覆盖已有字体图标库的效果,在 IcoMoon
操作步骤第7步填写的unicode必须与已有字体图标库的对应编码保持一致。
相似图标的编码优先级为 EIcons > FontAwesome
。
其他
如新增字体图标不在已有字体范围,则统一参考以下原则
- 宽度56px,高度56px作为画布尺寸
- 垂直居中
- 水平居中
- 上下左右各至少有5px的留白
- 编码不得与
FontAwesome
或EIcons
所有已存在字体图标的unicode冲突