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

时间 2019-11-12

标签微信程序如何引入外部字体 iconfont 图标繁體版

原文原文链接

天天学习一点点编程PDF电子书、视频教程免费下载：
http://www.shitanlife.com/codecss

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

步骤以下:web

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" 
         ; }

　　引用以下：chrome

 
         //iconfont 必须添加的,后面的是选中的样式类名(老套路了) 
        
         < 
         text  
         class="iconfont icon-shouye"></ 
         text 
         >

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

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

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

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

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

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

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