小程序：uni学习第八弹之使用iconfont

小程序：uni学习第弹之使用iconfont

 

- 方法1

   - iconfont  -> Font class -> 下载至本地

   - 将下载的压缩包中，以下文件复制到 static/fonts/下

- iconfont.css
- iconfont.eot
- iconfont.svg
- iconfont.ttf
- iconfont.woff
- iconfont.woff2

   - iconfont.css 调整

// 添加路径前缀：~@/static/fonts/

@font-face {font-family: "iconfont";
  src: url('~@/static/fonts/iconfont.eot?t=1594196571853'); /* IE9 */
  src: url('~@/static/fonts/iconfont.eot?t=1594196571853#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('~@/static/fonts/iconfont.woff?t=1594196571853') format('woff'),
  url('~@/static/fonts/iconfont.ttf?t=1594196571853') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('~@/static/fonts/iconfont.svg?t=1594196571853#iconfont') format('svg'); /* iOS 4.1- */
}

...

  - App.vue

<style>
    @import url('./static/fonts/iconfont.css');
</style>

- 方法2

   - iconfont  -> Unicode ->  下载至本地

 - 将下载的压缩包中，iconfont.css 文件复制到 static/ 下

 - 将黄色框中代码复制，替换iconfont.css中：@font-face{...} 段

@font-face {
  font-family: 'iconfont';  /* project id 1500377 */
  src: url('//at.alicdn.com/t/font_1500377_dwd3avhgmm8.eot');
  src: url('//at.alicdn.com/t/font_1500377_dwd3avhgmm8.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1500377_dwd3avhgmm8.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1500377_dwd3avhgmm8.woff') format('woff'),
  url('//at.alicdn.com/t/font_1500377_dwd3avhgmm8.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1500377_dwd3avhgmm8.svg#iconfont') format('svg');
}

   - App.vue

<style>
    @import url('./static/iconfont.css');
</style>

 

 

- 解决头条小程序组件内引入字体不生效的问题

  - App.vue

<style>
/* 解决头条小程序组件内引入字体不生效的问题 */
/* #ifdef MP-TOUTIAO */
@font-face {
	font-family: uniicons;
	src: url('/static/uni.ttf');
}
/* #endif */
</style>