登录方式:

QQ登录

icon font规范

IMWEB icon font

命名规范

字体名字

默认字体为iconfont,课堂pc上的字体名称为webfont,课堂mobile上的字体名称为mfont

图标名字

首先由设计先根据所画的svg进行英文命名,然后前端进行确认,如有疑问可讨论确定命名;

然后平台生成的class在svg的英文名字基础上加上前缀’i-‘,(如search.svg,其对应的class就是i-search),使用的时候结合classicon-font一起使用,如i.icon-font.i-search

最后名字中禁止出现中文,大写字母,特殊字符,数字等,多个单词使用-连接

设计svg标准

svg rule

1、 尺寸:设计尺寸480x480;icon设计时主要内容控制在420x420内;实际应用场景时,保持16、24、32、48这几个尺寸

2、1像素线:1px的线根据实际场景在icon设计制作的时候进行换算,例如实际使用场景中的icon的尺寸16px的icon,换算公式是,480/16*1。

3、 减少节点:为了确保图标的清晰显示,在绘制时须避免水平、垂直的边缘出现半个单位。(半个单位的路径会导致图标在最终显示时边缘模糊,不清晰),弧线在绘制时要保证弧度饱满。

4、 曲线闭合:在绘制图形的时候,曲线必须是闭合的。如果曲线是不闭合的在字体转换的过程中是无发转译未闭合曲线的图形的。

5、颜色填充:统一填充为黑色

6、文件输出:SVG格式和png各一份,svg去掉勾选”保留ai编辑功能”,尽量保证文件够小,png作为参考

svg output

7、模板下载:svg模版

icon font使用标准

1、 可根据自身业务的及所兼容的浏览器特点,去掉不需要的字体,字体兼容可参考@font-face

1.// ie8+ (ie8有些版本eot格式需要添加?#,有些不需要,所以下面是最佳ie8+兼容实践)
2.// 如果不需要兼容安卓4.3-的平板,可以去掉ttf
3.@font-face {
4. font-family: "webfont";
5. src: url("iconfont.eot");
6. src: url("fonts/iconfont.eot?#iefix") format("embedded-opentype"), url("fonts/iconfont.woff") format("woff"), url("fonts/iconfont.ttf") format("truetype");
7.}

8.
9.// 移动端 woff+ttf 或 直接ttf(安卓4.3-使用ttf)
10.@font-face {
11. font-family: "webfont";
12. src: url("fonts/iconfont.woff") format("woff"), url("fonts/iconfont.ttf") format("truetype");
13.}

2、 所有字体放在’css/fonts’目录,布置线上环境时请注意同源策略,解决办法为Access-Control-Allow-Origin *

3、 需新建一个基础scss文件,如_icon-font.scss放置icon font样式。

4、 考虑到非全新项目,且区别于其他图片icon或css绘制的icon,class统一采用.icon-font.i-iconname的形式。如search图标的class为.icon-font.i-search

5、 公有样式放在class.icon-font中,默认字体大小为16px,行高为1倍

1..icon-font {
2. font-family: 'webfont';
3. speak: none;
4. font-style: normal;
5. font-weight: normal;
6. font-variant: normal;
7. text-transform: none;
8. line-height: 1;
9. font-size: 16px;
10. position: relative;
11. vertical-align: -2px;
12.
13. /* Better Font Rendering =========== */
14. -webkit-font-smoothing: antialiased;
15. -moz-osx-font-smoothing: grayscale;
16.}

6、 统一使用伪元素before来生成内容,如:

1..i-search:before {
2. content: "\e617";
3.}

7、 不同的颜色,大小或位置控制可通过父级元素来控制

1..search-block{
2. .i-search{
3. color: #fff;
4. font-size: 32px;
5. }
6.}

8、 可以使用vertical-align或绝对定位对齐文字,默认使用vertical-align

关于字体的更多了解

渲染技术:

渲染策略: