整合多個項目之間iconfont字體互相使用後整合的問題

時間 2019-11-14

標籤整合多個項目之間 iconfont 字體互相使用問題简体版

原文原文鏈接

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選擇器的層級問題樣式會衝突覆蓋，建議檢查一下css

1.整合2個項目字體文件，整合2個項目的字體樣式表html

　　1-1html:web

<!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.cssapp

@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-1htmlurl

<!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-1cssspa

@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.htmlscala

<!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.csscode

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。