微信小程序如何引入外部字體庫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 
         >