New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
关于字体图标引入的问题 #77
Comments
如果只需要跨小程序和web端的话,可以利用css的@font-face属性引入字体库,例如:
注意小程序中字体库为本地可能会有问题,需要用线上地址。 如果weex端要引入字体库,请参考weex的引入方式,然后利用多态的形式实现weex端的引入,例如:
|
感谢,今天我是用的阿里云的字体图标,直接通过CSS文件的方式引入,在cml文件style标签里@import "xxx/xxx/xxx.css"引入的,工具找不到文件。 |
.icon-weixin:before { |
先按如下步骤接入,后期会支持: @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";
}
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- */
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 中引入即可; |
luyixin commentedMar 12, 2019
目前chameleon 支持引入web字体图标吗?如果支持的话,如何引入?
The text was updated successfully, but these errors were encountered: