关于字体图标引入的问题

[luyixin]

目前chameleon 支持引入web字体图标吗？如果支持的话，如何引入？

[beatles-chameleon]

如果只需要跨小程序和web端的话，可以利用css的@font-face属性引入字体库，例如：

@font-face {
  font-family: 'FontAwesome';
  src: url('http:test.com/fontawesome-webfont.eot?v=4.7.0');
  src: url('http:test.com/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('http:test.com/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('http:test.com/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('http:test.com/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('http:test.com/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

注意小程序中字体库为本地可能会有问题，需要用线上地址。

如果weex端要引入字体库，请参考weex的引入方式，然后利用多态的形式实现weex端的引入，例如：

    var domModule = weex.requireModule('dom');
      //目前支持ttf、woff文件，不支持svg、eot类型,moreItem at http://www.iconfont.cn/
       
      domModule.addRule('fontFace', {
        'fontFamily': "FontAwesome",
        'src': "url('http:test.com//fontawesome-webfont.woff2?v=4.7.0')"
      });
      domModule.addRule('fontFace', {
        'fontFamily': "iconfont4",
        'src': "url('http://at.alicdn.com/t/font_zn5b3jswpofuhaor.ttf')"
      });

[luyixin]

感谢，今天我是用的阿里云的字体图标，直接通过CSS文件的方式引入，在cml文件style标签里@import "xxx/xxx/xxx.css"引入的，工具找不到文件。

[shenmissing]

.icon-weixin:before {
content: "\e659";
}
字体图标用这种形式

[jimwmg]

先按如下步骤接入，后期会支持：
注意weex端不支持
1 打开 iconfont 字体图标库 https://www.iconfont.cn/
2 选择自己想要的 图标，加入购物车，下载代码
3 在下载的代码中，打开 iconfont.css
如下：

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1573206288767'); /* IE9 */
  src: url('iconfont.eot?t=1573206288767#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAL4AAsAAAAABqwAAAKpAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBPIE2ATYCJAMICwYABCAFhG0HLBvYBRHVk2dkXwzYjfJgy5Ong539+3gfObZ9bKSPpMzM3MHztD/6c2dmSTeAaZPr+tvRaIiw489vaU1TAuEbYR5lkRVsqkC5B85nZPyIardnTVL6rKkHHNIHG3DggcJE0USTHwD/c8x0kTyQ/EBz7KKKoL0BjlsHFNU0kAHfgRz6DWMXuITTEMCRUMmkerk/gT0Ga5IAMuE5D7DPWTAY5rdHsK1ZaZCtVLBX69RdALaEvy9/wI49KGw0VlLj+OIN5d+1g/S8NX/2EVgBAa23ATSQDAxIa62nHo0wksbRY4jEvuIFvmtZvhrZqwJh/zor1hmAYMi8J5bLvtUsBYDh3juLQOWom8DGQZw9vebWHwOcZOFE55zfd3jD0QN++1v8op7r07aL4vxOR9f1u8VmYY/TSPvSw2Bz6FGO29UnohcS23dfSazyXMPzj8+cR2eay+We6rnsrPfFH8+fre3vZs341LhbxyU2TvTqGHWGe6gTyiOc8LyoT528o7sWRjkAVut5nfQj/4bVuvE/sIr/2zsZAF79bGiy2tBPB/an0wr8NlbPCqNzLJUyKqs2oChiczt5jjgCFmzw9H6s1OceA4I9PneqsyMkBY090UiDTQYbnMgGW+wpA0eS1K13wsskGjEOQKIVAIK7s6Bw5Tpo3N1DGuw7sMHXP7DFPRocaRevHZ2IjeQ1Z0wPoTc+/9B7JbFyNNKM4g/kfIUPznJC8idx7tnR0s2if0Ux8Rxz8m/HFlGoOIlwCc6jMEww5cSnl+iuSNo1DFX3If2VRNBkxvQQeuPzD71XEiu/tjRLP38g5yt8cEtZjfGTOPe6R0s3eyBXwrhX2b28k387tohCxUmESzCMwjDBtH6YTy/R3RGutGvY1VRfob6+OPq6dQA0sWRFscM1xSENAAAAAA==') format('woff2'),
  url('iconfont.woff?t=1573206288767') format('woff'),
  url('iconfont.ttf?t=1573206288767') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1573206288767#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-a-:before {
  content: "\e6a4";
}

• 3.1 删除 如下的代码；

src: url('iconfont.eot?t=1573206288767'); /* IE9 */
src: url('iconfont.eot?t=1573206288767#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('iconfont.woff?t=1573206288767') format('woff'),
 url('iconfont.ttf?t=1573206288767') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1573206288767#iconfont') format('svg'); /* iOS 4.1- */

• 3.2 增加 src 以及最后的逗号改成分号；

src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAL4AAsAAAAABqwAAAKpAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBPIE2ATYCJAMICwYABCAFhG0HLBvYBRHVk2dkXwzYjfJgy5Ong539+3gfObZ9bKSPpMzM3MHztD/6c2dmSTeAaZPr+tvRaIiw489vaU1TAuEbYR5lkRVsqkC5B85nZPyIardnTVL6rKkHHNIHG3DggcJE0USTHwD/c8x0kTyQ/EBz7KKKoL0BjlsHFNU0kAHfgRz6DWMXuITTEMCRUMmkerk/gT0Ga5IAMuE5D7DPWTAY5rdHsK1ZaZCtVLBX69RdALaEvy9/wI49KGw0VlLj+OIN5d+1g/S8NX/2EVgBAa23ATSQDAxIa62nHo0wksbRY4jEvuIFvmtZvhrZqwJh/zor1hmAYMi8J5bLvtUsBYDh3juLQOWom8DGQZw9vebWHwOcZOFE55zfd3jD0QN++1v8op7r07aL4vxOR9f1u8VmYY/TSPvSw2Bz6FGO29UnohcS23dfSazyXMPzj8+cR2eay+We6rnsrPfFH8+fre3vZs341LhbxyU2TvTqGHWGe6gTyiOc8LyoT528o7sWRjkAVut5nfQj/4bVuvE/sIr/2zsZAF79bGiy2tBPB/an0wr8NlbPCqNzLJUyKqs2oChiczt5jjgCFmzw9H6s1OceA4I9PneqsyMkBY090UiDTQYbnMgGW+wpA0eS1K13wsskGjEOQKIVAIK7s6Bw5Tpo3N1DGuw7sMHXP7DFPRocaRevHZ2IjeQ1Z0wPoTc+/9B7JbFyNNKM4g/kfIUPznJC8idx7tnR0s2if0Ux8Rxz8m/HFlGoOIlwCc6jMEww5cSnl+iuSNo1DFX3If2VRNBkxvQQeuPzD71XEiu/tjRLP38g5yt8cEtZjfGTOPe6R0s3eyBXwrhX2b28k387tohCxUmESzCMwjDBtH6YTy/R3RGutGvY1VRfob6+OPq6dQA0sWRFscM1xSENAAAAAA==') format('woff2');

4 最后的iconfont的代码如下

@font-face {font-family: "iconfont";
src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAL4AAsAAAAABqwAAAKpAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBPIE2ATYCJAMICwYABCAFhG0HLBvYBRHVk2dkXwzYjfJgy5Ong539+3gfObZ9bKSPpMzM3MHztD/6c2dmSTeAaZPr+tvRaIiw489vaU1TAuEbYR5lkRVsqkC5B85nZPyIardnTVL6rKkHHNIHG3DggcJE0USTHwD/c8x0kTyQ/EBz7KKKoL0BjlsHFNU0kAHfgRz6DWMXuITTEMCRUMmkerk/gT0Ga5IAMuE5D7DPWTAY5rdHsK1ZaZCtVLBX69RdALaEvy9/wI49KGw0VlLj+OIN5d+1g/S8NX/2EVgBAa23ATSQDAxIa62nHo0wksbRY4jEvuIFvmtZvhrZqwJh/zor1hmAYMi8J5bLvtUsBYDh3juLQOWom8DGQZw9vebWHwOcZOFE55zfd3jD0QN++1v8op7r07aL4vxOR9f1u8VmYY/TSPvSw2Bz6FGO29UnohcS23dfSazyXMPzj8+cR2eay+We6rnsrPfFH8+fre3vZs341LhbxyU2TvTqGHWGe6gTyiOc8LyoT528o7sWRjkAVut5nfQj/4bVuvE/sIr/2zsZAF79bGiy2tBPB/an0wr8NlbPCqNzLJUyKqs2oChiczt5jjgCFmzw9H6s1OceA4I9PneqsyMkBY090UiDTQYbnMgGW+wpA0eS1K13wsskGjEOQKIVAIK7s6Bw5Tpo3N1DGuw7sMHXP7DFPRocaRevHZ2IjeQ1Z0wPoTc+/9B7JbFyNNKM4g/kfIUPznJC8idx7tnR0s2if0Ux8Rxz8m/HFlGoOIlwCc6jMEww5cSnl+iuSNo1DFX3If2VRNBkxvQQeuPzD71XEiu/tjRLP38g5yt8cEtZjfGTOPe6R0s3eyBXwrhX2b28k387tohCxUmESzCMwjDBtH6YTy/R3RGutGvY1VRfob6+OPq6dQA0sWRFscM1xSENAAAAAA==') format('woff2');
  
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-a-:before {
  content: "\e6a4";
}

5 将这些代码放入组件的style中，或者放到某个文件中，在style标签中 @import 中引入即可；
6 可以同时往购物车里加载多个图标，同样按照如上步骤操作即可；