微信小程序如何引入外部字体库iconfont的图标-白红宇

微信小程序如何引入外部字体库iconfont的图标

阅读量：4885 次

发布时间：2019-06-11

本文共 1948 字，大约阅读时间需要 6 分钟。

微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, 这里主要用得就是在线的字体库. 它的使用不像之前引用阿里巴巴字体库那样简单。

步骤如下:

1.在阿里巴巴字体库选购喜欢的字体并下载压缩文件, 详细方法这里不赘述, 不懂的请看阿里巴巴字体库使用方法

2.Copy iconfont.css文件的内容, 可以选择放在全局的 app.wxss 或者任何你要用到字体的 .wxss文件

                            
@font-face { 
font-family
: 
"iconfont"
;
  
src
: 
url
(
'iconfont.eot?t=1484311526877'
); 
/* IE9*/
  
src
: 
url
(
'iconfont.eot?t=1484311526877#iefix'
) 
format
(
'embedded-opentype'
), 
/* IE6-IE8 */
  
url
(
'iconfont.woff?t=1484311526877'
) 
format
(
'woff'
), 
/* chrome, firefox */
  
url
(
'iconfont.ttf?t=1484311526877'
) 
format
(
'truetype'
), 
/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  
url
(
'iconfont.svg?t=1484311526877#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-sousuo:before { 
content
: 
"\e604"
; }
.icon-stars:before { 
content
: 
"\e605"
; }
         
       

3.用阿里巴巴字体库创建的项目的 unicode 代码替换刚才赋值的最上层代码:

                            
//更改后的代码
@font-face { 
  
font-family
: 
'iconfont'
;  
/* project id 218229 */
  
src
: 
url
(
'//at.alicdn.com/t/font_1oyoojup1w34bo6r.eot'
);
  
src
: 
url
(
'//at.alicdn.com/t/font_1oyoojup1w34bo6r.eot?#iefix'
) 
format
(
'embedded-opentype'
),
  
url
(
'//at.alicdn.com/t/font_1oyoojup1w34bo6r.woff'
) 
format
(
'woff'
),
  
url
(
'//at.alicdn.com/t/font_1oyoojup1w34bo6r.ttf'
) 
format
(
'truetype'
),
  
url
(
'//at.alicdn.com/t/font_1oyoojup1w34bo6r.svg#iconfont'
) 
format
(
'svg'
);
}
.iconfont { 
  
font-family
:
"iconfont"
!important
;
  
font-size
:
16px
;
  
font-style
:
normal
;
  
-webkit-font-smoothing: antialiased;
  
-moz-osx-font-smoothing: grayscale;
}
.icon-sousuo:before { 
content
: 
"\e604"
; }
.icon-stars:before { 
content
: 
"\e605"
; }
         
       