Skip to content
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

Closed
luyixin opened this issue Mar 12, 2019 · 4 comments
Closed

关于字体图标引入的问题 #77

luyixin opened this issue Mar 12, 2019 · 4 comments

Comments

@luyixin
Copy link

@luyixin luyixin commented Mar 12, 2019

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

@beatles-chameleon

This comment has been minimized.

Copy link
Collaborator

@beatles-chameleon beatles-chameleon commented Mar 12, 2019

如果只需要跨小程序和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

This comment has been minimized.

Copy link
Author

@luyixin luyixin commented Mar 12, 2019

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

@shenmissing

This comment has been minimized.

Copy link

@shenmissing shenmissing commented Apr 10, 2019

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

@jimwmg

This comment has been minimized.

Copy link
Collaborator

@jimwmg jimwmg commented Nov 8, 2019

先按如下步骤接入,后期会支持:
注意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 可以同时往购物车里加载多个图标,同样按照如上步骤操作即可;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.