阿里图标字体的使用小疏忽
http://www.iconfont.cn/
因为项目的需要，不同的项目组配备了不同的ue，不同的项目组ue在阿里维护了不同的图标字体。
当项目合并时，问题来了，图标显示错乱，互相冲撞，开发及项目负责人急的不行，明天就给老大演示，图标乱了怎么办？？？？
找问题发现：
不同图标样式的unicode码冲突，哪个css优先就显示哪个。图标的显示与类名称无关。
但是，开源的图标字体经常下载几套合用并没有发现冲突。
经过多次尝试找问题，终于解决了。
1/主要是ue维护图标字体的时候，偷了一点小懒，“Font Class 前缀”“”Font Family没有修改使用了默认，所以，当同一个页面引用多个“Font Class 前缀”“”Font Family“没有修改使用默认的css时，浏览器会认为是引用的同一套字体，所以也就错乱了。
我们看一下图标字体css文件：
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1467348321'); /* IE9*/
src: url('iconfont.eot?t=1467348321#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1467348321') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1467348321') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1467348321#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-bianjituxing:before { content: "\e600"; }
.icon-yuangongxiujia:before { content: "\e605"; }
.icon-zaigangzhuangtai:before { content: "\e604"; }
.icon-yulan:before { content: "\e603"; }
.icon-arrowright:before { content: "\e601"; }
.icon-arrowleft:before { content: "\e602"; }
每一个类名对应一个unicode编码，不同的css编码会重复，因为阿里图标系统在制作的时候默认从\e600开始编码。当引用多套字体的时候虽然类名不同，但是字体 font-family:声明及unicode编码相同，那么就会出现上面的情况：谁优先，显示谁。
怎么解决呢？？
方案一：
初期建立文件的时候要有标准的命名规范，这样就不会冲突了。
优点：多套引用，不用担心冲突，虽然编码一致，但是浏览器认为他们是不同的 font-family。
缺点：项目进行中发现问题，修改 font-family及前缀会引发比较大的工作量。要修改大量代码。
引用不同 font-family，但是相同css文件名的字体图标：
<link href="cs1/iconfont.css" rel="stylesheet" type="text/css">
<link href="cs2/iconfont.css" rel="stylesheet" type="text/css">
字体图标的类名及编码对应：
.cs1 {
font-family:"cs1" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.cs1-bianjituxing:before { content: "\e600"; }
.cs1-arrowright:before { content: "\e601"; }
.cs1-arrowleft:before { content: "\e602"; }
－－－－－－－－－－－－－－－－－
.cs2 {
font-family:"cs2" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.cs2-yuangongxiujia:before { content: "\e600"; }
.cs2-zaigangzhuangtai:before { content: "\e601"; }
.cs2-yulan:before { content: "\e602"; }
上面可以看出，unicode编码是相同的，但是font-family名称不同。
页面显示完全正常。
方案二：
将多套css图标字体合并，能更保证在类名不变的情况下，重新编写后增加项目的unicode编码。
缺点：会使得原来的css图标字体样式文件增大。
优点：载不修改当前项目代码的情况下完美解决图标的显示问题。
附加：
常用中文字体的Unicode编码
参考：http://code.ciaoca.com/style/cssfont2unicode/
字体名称 英文名称 Unicode 编码
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
隶书 LiSu \96B6\4E66
幼园 YouYuan \5E7C\5706
华文细黑 STXihei \534E\6587\7EC6\9ED1
细明体 MingLiU \7EC6\660E\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53
－－
http://www.cnblogs.com/ChengDong/p/4107648.html
宋体 SimSun \5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53
新宋体 NSimSun \65B0\5B8B\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53
细明体 MingLiU \7EC6\660E\4F53
标楷体 DFKai-SB \6807\6977\4F53
仿宋 FangSong \4EFF\5B8B
楷体 KaiTi \6977\4F53
仿宋_GB2312 FangSong_GB2312 \4EFF\5B8B_GB2312
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1
华文黑体 STHeiti \534E\6587\9ED1\4F53
华文楷体 STKaiti \534E\6587\6977\4F53
华文宋体 STSong \534E\6587\5B8B\4F53
华文仿宋 STFangsong \534E\6587\4EFF\5B8B
丽黑 Pro LiHei Pro Medium \4E3D\9ED1 Pro
丽宋 Pro LiSong Pro Light \4E3D\5B8B Pro
标楷体 BiauKai \6807\6977\4F53
苹果丽中黑 Apple LiGothic Medium \82F9\679C\4E3D\4E2D\9ED1
苹果丽细宋 Apple LiSung Light \82F9\679C\4E3D\7EC6\5B8B
因为项目的需要，不同的项目组配备了不同的ue，不同的项目组ue在阿里维护了不同的图标字体。
当项目合并时，问题来了，图标显示错乱，互相冲撞，开发及项目负责人急的不行，明天就给老大演示，图标乱了怎么办？？？？
找问题发现：
不同图标样式的unicode码冲突，哪个css优先就显示哪个。图标的显示与类名称无关。
但是，开源的图标字体经常下载几套合用并没有发现冲突。
经过多次尝试找问题，终于解决了。
1/主要是ue维护图标字体的时候，偷了一点小懒，“Font Class 前缀”“”Font Family没有修改使用了默认，所以，当同一个页面引用多个“Font Class 前缀”“”Font Family“没有修改使用默认的css时，浏览器会认为是引用的同一套字体，所以也就错乱了。
我们看一下图标字体css文件：
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1467348321'); /* IE9*/
src: url('iconfont.eot?t=1467348321#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1467348321') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1467348321') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1467348321#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-bianjituxing:before { content: "\e600"; }
.icon-yuangongxiujia:before { content: "\e605"; }
.icon-zaigangzhuangtai:before { content: "\e604"; }
.icon-yulan:before { content: "\e603"; }
.icon-arrowright:before { content: "\e601"; }
.icon-arrowleft:before { content: "\e602"; }
每一个类名对应一个unicode编码，不同的css编码会重复，因为阿里图标系统在制作的时候默认从\e600开始编码。当引用多套字体的时候虽然类名不同，但是字体 font-family:声明及unicode编码相同，那么就会出现上面的情况：谁优先，显示谁。
怎么解决呢？？
方案一：
初期建立文件的时候要有标准的命名规范，这样就不会冲突了。
优点：多套引用，不用担心冲突，虽然编码一致，但是浏览器认为他们是不同的 font-family。
缺点：项目进行中发现问题，修改 font-family及前缀会引发比较大的工作量。要修改大量代码。
引用不同 font-family，但是相同css文件名的字体图标：
<link href="cs1/iconfont.css" rel="stylesheet" type="text/css">
<link href="cs2/iconfont.css" rel="stylesheet" type="text/css">
字体图标的类名及编码对应：
.cs1 {
font-family:"cs1" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.cs1-bianjituxing:before { content: "\e600"; }
.cs1-arrowright:before { content: "\e601"; }
.cs1-arrowleft:before { content: "\e602"; }
－－－－－－－－－－－－－－－－－
.cs2 {
font-family:"cs2" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.cs2-yuangongxiujia:before { content: "\e600"; }
.cs2-zaigangzhuangtai:before { content: "\e601"; }
.cs2-yulan:before { content: "\e602"; }
上面可以看出，unicode编码是相同的，但是font-family名称不同。
页面显示完全正常。
方案二：
将多套css图标字体合并，能更保证在类名不变的情况下，重新编写后增加项目的unicode编码。
缺点：会使得原来的css图标字体样式文件增大。
优点：载不修改当前项目代码的情况下完美解决图标的显示问题。
附加：
常用中文字体的Unicode编码
参考：http://code.ciaoca.com/style/cssfont2unicode/
字体名称 英文名称 Unicode 编码
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
隶书 LiSu \96B6\4E66
幼园 YouYuan \5E7C\5706
华文细黑 STXihei \534E\6587\7EC6\9ED1
细明体 MingLiU \7EC6\660E\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53
－－
http://www.cnblogs.com/ChengDong/p/4107648.html
宋体 SimSun \5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53
新宋体 NSimSun \65B0\5B8B\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53
细明体 MingLiU \7EC6\660E\4F53
标楷体 DFKai-SB \6807\6977\4F53
仿宋 FangSong \4EFF\5B8B
楷体 KaiTi \6977\4F53
仿宋_GB2312 FangSong_GB2312 \4EFF\5B8B_GB2312
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1
华文黑体 STHeiti \534E\6587\9ED1\4F53
华文楷体 STKaiti \534E\6587\6977\4F53
华文宋体 STSong \534E\6587\5B8B\4F53
华文仿宋 STFangsong \534E\6587\4EFF\5B8B
丽黑 Pro LiHei Pro Medium \4E3D\9ED1 Pro
丽宋 Pro LiSong Pro Light \4E3D\5B8B Pro
标楷体 BiauKai \6807\6977\4F53
苹果丽中黑 Apple LiGothic Medium \82F9\679C\4E3D\4E2D\9ED1
苹果丽细宋 Apple LiSung Light \82F9\679C\4E3D\7EC6\5B8B
