uni-app 引入第三方字體

uni-app 支持使用字體圖標，使用方式與普通 web 項目相同，需要注意以下幾點：

• 支持 base64 格式字體圖標。
• 支持網絡路徑字體圖標。
• 小程序不支持在css中使用本地文件，包括本地的背景圖和字體文件。需以base64方式方可使用。
• 網絡路徑必須加協議頭 https。
• 從 http://www.iconfont.cn 上拷貝的代碼，默認是沒加協議頭的。
• 從 http://www.iconfont.cn 上下載的字體文件，都是同名字體（字體名都叫iconfont，安裝字體文件時可以看到），在nvue內使用時需要注意，此字體名重復可能會顯示不正常，可以使用工具修改。
• 使用本地路徑圖標字體需注意：
  1. 為方便開發者，在字體文件小於 40kb 時，uni-app 會自動將其轉化為 base64 格式；
  2. 字體文件大於等於 40kb，仍轉換為 base64 方式使用的話可能有性能問題，如開發者必須使用，則需自己將其轉換為 base64 格式使用，或將其挪到服務器上，從網絡地址引用；
  3. 字體文件的引用路徑推薦使用以 ~@ 開頭的絕對路徑。

      @font-face {
          font-family: test1-icon;
          src: url('~@/static/iconfont.ttf');
      }
     

nvue中不可直接使用css的方式引入字體文件，需要使用以下方式在js內引入。nvue內不支持本地路徑引入字體，請使用網絡鏈接或者base64形式。src字段的url的括號內一定要使用單引號。

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
  'fontFamily': "fontFamilyName",
  'src': "url('https://...')"
})

 

示例：

<template>
    <view>
        <view>
            <text class="test"></text>
            <text class="test"></text>
            <text class="test"></text>
        </view>
    </view>
</template>
<style>
    @font-face {
        font-family: 'iconfont';
        src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
    }
    .test {
        font-family: iconfont;
        margin-left: 20rpx;
    }
</style>

 

上述為官網的描述

 

在開發中需要注意：

1.  需要注意的是.ttf字體文件需要放置到static文件夾下
2. 字體文件若大於40kb，需要將其裝換成base64格式
3. 在線轉換工具base64在線轉換

一個中文的字體庫，往往幾兆十幾兆，而我們通常只會使用到其中十幾個字體樣式，我們可以使用Fontmin把需要用到的字提取出來

 

成功之后得到一個文件夾，里邊有各種格式的字體

 

 

 字體引入方式:

• 網絡路徑字體

 

App.vue引入字體

 

 

 

使用字體：

 

 

• base64格式引入