feat: loadFontFace

jest-setup.js

+const {
+    toMatchImageSnapshot
+} = require('jest-image-snapshot');
+
+expect.extend({
+    toMatchImageSnapshot
+});
\ No newline at end of file

jest.config.js

 module.exports = {
   testTimeout: 10000,
-    reporters: [
-        'default'
-    ],
+  reporters: ['default'],
   watchPathIgnorePatterns: ['/node_modules/', '/dist/', '/.git/'],
   moduleFileExtensions: ['js', 'json'],
   rootDir: __dirname,
   testMatch: ["<rootDir>/pages/**/*test.[jt]s?(x)"],
-    testPathIgnorePatterns: ['/node_modules/']
+  testPathIgnorePatterns: ['/node_modules/'],
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
 }

pages.json

@@ -220,6 +220,18 @@
         "navigationBarTitleText": "消息提示框"
       }
     },
+    {
+      "path": "pages/API/load-font-face/load-font-face",
+      "style": {
+        "navigationBarTitleText": "动态加载字体"
+      }
+    },
+    {
+      "path": "pages/API/load-font-face/load-font-face-child",
+      "style": {
+        "navigationBarTitleText": "动态加载字体-子页面"
+      }
+    },
     {
       "path": "pages/API/get-location/get-location",
       "style": {

pages/API/load-font-face/load-font-face-child.test.js

+const PAGE_PATH = '/pages/API/load-font-face/load-font-face-child'
+
+describe('loadFontFace global', () => {
+  beforeAll(async () => {
+    const page = await program.navigateTo(PAGE_PATH)
+    await page.waitFor(1000)
+  })
+  it('screenshot', async () => {
+    const image = await program.screenshot()
+    expect(image).toMatchImageSnapshot()
+  })
+})

pages/API/load-font-face/load-font-face-child.uvue

+<template>
+  <view>
+    <page-head title="loadFontFace-child"></page-head>
+    <view class="uni-padding-wrap">
+      <text class="item" style="font-family: UniFontFamily"
+        >全局加载 font-family: uni.ttf</text
+      >
+      <text class="item" style="font-family: AlimamaDaoLiTiTTF"
+        >font-family: 阿里妈妈刀隶体-ttf</text
+      >
+      <text class="item" style="font-family: AlimamaDaoLiTiOTF"
+        >font-family: 阿里妈妈刀隶体-otf</text
+      >
+      <text class="item" style="font-family: AlimamaDaoLiTiWOFF"
+        >font-family: 阿里妈妈刀隶体-woff</text
+      >
+      <text class="item" style="font-family: AlimamaDaoLiTiWOFF2"
+        >font-family: 阿里妈妈刀隶体-woff2</text
+      >
+    </view>
+  </view>
+</template>
+
+<style>
+.item {
+  font-size: 20px;
+  line-height: 40px;
+}
+</style>

pages/API/load-font-face/load-font-face.test.js

+const PAGE_PATH = '/pages/API/load-font-face/load-font-face'
+
+describe('loadFontFace', () => {
+  beforeAll(async () => {
+    const page = await program.navigateTo(PAGE_PATH)
+    await page.waitFor(2000)
+  })
+  it('screenshot', async () => {
+    const image = await program.screenshot()
+    expect(image).toMatchImageSnapshot()
+  })
+})

pages/API/load-font-face/load-font-face.uvue

+<template>
+  <view>
+    <page-head title="loadFontFace"></page-head>
+    <view class="uni-padding-wrap">
+      <text class="item" style="font-family: UniFontFamily"
+        >全局加载 font-family: uni.ttf</text
+      >
+      <text class="item" style="font-family: AlimamaDaoLiTiTTF"
+        >font-family: 阿里妈妈刀隶体-ttf (网络字体下载后生效)</text
+      >
+
+      <text class="item" style="font-family: AlimamaDaoLiTiOTF"
+        >font-family: 阿里妈妈刀隶体-otf</text
+      >
+      <text class="item" style="font-family: AlimamaDaoLiTiWOFF"
+        >font-family: 阿里妈妈刀隶体-woff</text
+      >
+      <text class="item" style="font-family: AlimamaDaoLiTiWOFF2"
+        >font-family: 阿里妈妈刀隶体-woff2</text
+      >
+      <button class="uni-btn" @click="navigateToChild">跳转子页面</button>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  onLoad() {
+    uni.loadFontFace({
+      global: true,
+      family: 'UniFontFamily',
+      source: '/static/font/uni.ttf',
+      success() {
+        console.log('global loadFontFace uni.ttf success')
+      },
+      fail(error) {
+        console.warn('global loadFontFace uni.ttf fail', error.errMsg)
+      },
+    })
+    uni.loadFontFace({
+      family: 'AlimamaDaoLiTiTTF',
+      source:
+        'https://native-res.dcloud.net.cn/uni-app-x/static/font/AlimamaDaoLiTi.ttf',
+      success() {
+        console.log('loadFontFace AlimamaDaoLiTi.ttf success')
+      },
+      fail(error) {
+        console.warn('loadFontFace AlimamaDaoLiTi.ttf fail', error.errMsg)
+      },
+    })
+    uni.loadFontFace({
+      family: 'AlimamaDaoLiTiOTF',
+      source: '/static/font/AlimamaDaoLiTi.otf',
+      success() {
+        console.log('loadFontFace AlimamaDaoLiTi.otf success')
+      },
+      fail(error) {
+        console.warn('loadFontFace AlimamaDaoLiTi.otf fail', error.errMsg)
+      },
+    })
+    uni.loadFontFace({
+      family: 'AlimamaDaoLiTiWOFF',
+      source: '/static/font/AlimamaDaoLiTi.woff',
+      success() {
+        console.log('loadFontFace AlimamaDaoLiTi.woff success')
+      },
+      fail(error) {
+        console.warn('loadFontFace AlimamaDaoLiTi.woff fail', error.errMsg)
+      },
+    })
+    uni.loadFontFace({
+      family: 'AlimamaDaoLiTiWOFF2',
+      source: '/static/font/AlimamaDaoLiTi.woff2',
+      success() {
+        console.log('loadFontFace AlimamaDaoLiTi.woff2 success')
+      },
+      fail(error) {
+        console.warn('loadFontFace AlimamaDaoLiTi.woff2 fail', error.errMsg)
+      },
+    })
+  },
+  methods: {
+    navigateToChild() {
+      uni.navigateTo({
+        url: '/pages/API/load-font-face/load-font-face-child',
+      })
+    },
+  },
+}
+</script>
+
+<style>
+.item {
+  font-size: 20px;
+  line-height: 40px;
+}
+</style>

pages/CSS/text/font-family.uvue

 <template>
-  <view>
+  <view class="uni-padding-wrap">
     <text class="common" style="font-family: monospace"
       >font-family: monospace</text
     >

pages/tabBar/API.uvue

@@ -140,6 +140,10 @@
 				        {
 				            name: "显示消息提示框",
 				            url: "toast",
+                        },
+                        {
+                            name: "动态加载字体",
+                            url: "load-font-face",
                         },
 				    ] as Page[],
 				},