注釋很詳細(xì)，直接上代碼

上一篇

新增內(nèi)容：

1.從IconFont獲取圖標(biāo)與文字的樣式鏈接

2.將在線圖標(biāo)配置進(jìn)頁面中（源碼）

3.將字體配置進(jìn)頁面文字中（源碼）

4.css樣式的多文件導(dǎo)入

獲取鏈接

1.獲取圖標(biāo)鏈接

登入IconFont 點(diǎn)擊跳轉(zhuǎn)

溫馨提醒：之后生成的圖標(biāo)名會(huì)以這里設(shè)定的名字為基準(zhǔn)，建議在這里就修改為所需的名字，當(dāng)然也可以在代碼中修改每個(gè)圖標(biāo)對(duì)應(yīng)的名字

2.獲取字體鏈接

源碼：

icontest.wxml

<!-- 引用倆圖標(biāo)演示一下 -->
<view class="iconPerson vip"></view>
<view class="iconPerson newer"></view>

<!-- 兩種字體對(duì)比一下 -->
<view style="font-family: 'ali'; font-size: 100rpx;">123</view>
<view style=" font-size: 100rpx;">123</view>

icontest.wxss

/* 圖標(biāo)演示部分--------------------------------------------------------------------------------------- */
@font-face {
    /* 當(dāng)你導(dǎo)入圖標(biāo)時(shí)，通常會(huì)使用自定義字體來顯示這些圖標(biāo)（我們可以直接將它當(dāng)作圖標(biāo)組來看待）
    font-family是導(dǎo)入的圖標(biāo)組的名字，可以修改，以免多個(gè)圖標(biāo)組沖突 */
    font-family: "iconPerson"; /* Project id 4410171 */
    src: url('//at.alicdn.com/t/c/font_4410171_5gfl2zrmwrq.woff2?t=1705200100361') format('woff2'),
         url('//at.alicdn.com/t/c/font_4410171_5gfl2zrmwrq.woff?t=1705200100361') format('woff'),
         url('//at.alicdn.com/t/c/font_4410171_5gfl2zrmwrq.ttf?t=1705200100361') format('truetype');
  }
  
  /* 自定義的類名，使用這個(gè)類即可使用對(duì)應(yīng)的圖標(biāo) */
  .iconPerson {
    /* 使用的圖標(biāo)組，修改圖標(biāo)組的名字時(shí)別忘了改這里 */
    font-family: "iconPerson" !important;
    /* 如果我在這個(gè)組里的圖標(biāo)需要不同的大小咋辦
       eg. 
        .vip:before {
            content: "\e632";
            font-size: 60rpx;//單獨(dú)修改圖標(biāo)的大小
        }
    */
    font-size: 16px;/*總體圖標(biāo)的大小在這里修改*/
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* 可以給不同的圖標(biāo)命名，content對(duì)應(yīng)著官網(wǎng)庫里面每個(gè)圖標(biāo)的編號(hào) */
  .vip:before {
    content: "\e632";
    font-size: 60rpx;
  }

  .newer:before {
    content: "\e6c5";
  }
  
/* 字體演示部分------------------------------------------------------------------------------------------------- */
@font-face {
    /* font-family可以給字體修改名字 */
    font-family: "ali";font-weight: 300;src: url("http://at.alicdn.com/wf/webfont/TTlODKEUIMcs/U4q2oNPji8tU.woff2") format("woff2"),
    url("http://at.alicdn.com/wf/webfont/TTlODKEUIMcs/KT8uszguJRqf.woff") format("woff");
    font-display: swap;
  }

效果演示：

看到這里主張代碼清晰的你應(yīng)該還留有一個(gè)疑惑

所有樣式全放這里，要是多些組別，維護(hù)起來豈不是特別麻煩

解決方法：類的導(dǎo)入（將字體圖標(biāo)的樣式分門別類放在一個(gè)文件夾，需要哪個(gè)導(dǎo)入哪個(gè)）

語法：@import "相對(duì)路徑";（記得加分號(hào)）

舉個(gè)例子:

下一篇文章來源地址http://www.zghlxwxcb.cn/news/detail-820242.html

到了這里，關(guān)于微信小程序（十二）在線圖標(biāo)與字體的獲取與引入的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！