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"; } ...