1.引用整合后的.ttf字体文件（这是前提）
1-1.整合字体样式表：
所有页面统一引用icon.css，删除之前的iconfont.css 整合后这个css文件多余了 其他不动
1-2.不整合字体样式表：
1-2-1页面各自引用不用的字体样式文件或icon.css 或iconfont.css
1-2-2如同一个页面如果引用了不同项目的字体需要同时引用icon.css和iconfont.css
注意：不论字体样式表整合与否，如同一个页面如果引用了不同项目的字体，个别icon可能因为css选择器的层级问题样式会冲突覆盖，建议检查一下
1.整合2个项目字体文件，整合2个项目的字体样式表
1-1html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/icon.css" />
<title></title>
<style>
/*
这个项目整合了东方医院的appicon 和 超煜集团的appicon
先创建一个新项目
分别对上面两个项目的icon进行统一的批量操作加入购物车 添加至创建好的新项目
下载 找到.ttf文件
//icon。css主要代码
1.整合后引用同一个.ttf文件没问题（上面批量操作就是为了解决引用相同后缀字体冲突的问题）
2.整合前后各自所自定义的相同的字体名称也没问题（东方医院app最先定义的字体名称：iconfont，超煜集团app后来定义的字体名称也是：iconfont）
3.整合前后各自字体引用类名的问题
3-1如果类名不同最好，页面上的代码不用做任何修改，页面上的字体样式各自保持原样
3-2如果类名相同，（工作中暂未出现如此情况，按逻辑推断应该也没问题。。。）
3-3如此可以推断出，可以解决多个项目之间的字体互相使用后整合的问题。字体引用类名不同最好，因为每个元素上的引用类不同，所以不存在定义类的不同样式冲突的问题。
@font-face {
font-family: 'iconfont';
src:url('../fonts/iconfont.ttf') format('truetype');
}
//东方医院app定义的字体引用类名
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
}
//超煜集团app定义的字体引用类名
.sy-icon{
font-family:'iconfont';
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
*/
</style>
</head>
<body>
<span class="iconfont icon-iconfontshipin"></span>
<span class="sy-icon icon-baobeiguanli"></span>
</body>
</html>
1-1.css
@font-face {
font-family: 'iconfont';
src:url('../fonts/iconfont.ttf') format('truetype');
}
/*东方医院app定义的字体引用类名*/
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
}
/*超煜集团app定义的字体引用类名*/
.sy-icon{
font-family:'iconfont';
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
/*共同的字体实体类*/
.icon-qiandai:before { content: "\e63e"; }
.icon-shezhi1:before { content: "\e63f"; }
.icon-weibo:before { content: "\e640"; }
...
2.整合2个项目字体文件,不整合样式表
2-1html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/icon1.css" />
<title>字体css分开 sy-icon的</title>
<style>
</style>
</head>
<body>
<span class="sy-icon icon-baobeiguanli"></span>
</body>
</html>
2-1css
@font-face { font-family: 'iconfont'; src:url('../fonts/iconfont.ttf') format('truetype'); } /*超煜集团app定义的字体引用类名*/ .sy-icon{ font-family:'iconfont'; font-size: 24px; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; } .icon-xiangshang:before { content: "\e632"; } .icon-phone:before { content: "\e69f"; } .icon-icon:before { content: "\e602"; } ...
2-2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/iconfont.css" />
<!--<link rel="stylesheet" href="css/icon1.css" />-->
<title>字体css分开 这是iconfont的</title>
<style>
</style>
</head>
<body>
<span class="iconfont icon-iconfontshipin"></span>
<!--<span class="sy-icon icon-baobeiguanli"></span>-->
</body>
</html>
2-2.css
@font-face { font-family: 'iconfont'; src:url('../fonts/iconfont.ttf') format('truetype'); } /*东方医院app定义的字体引用类名*/ .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; } .icon-qiandai:before { content: "\e623"; } .icon-shezhi:before { content: "\e607"; } .icon-weibo:before { content: "\e60c"; } ...