feat: loadFontFace

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

@@ -2,28 +2,53 @@
   <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="font-size-20">上一页全局加载字体：</text>
+      <text class="font-size-20 line-height-40" style="font-family: UniFontFamily"
+      >font-family: uni.ttf</text
       >
-      <text class="item" style="font-family: AlimamaDaoLiTiTTF"
+      <view style="flex-direction: row;">
+        <text style="font-family: UniFontFamily;font-size:20px;">{{
+          uniIcon1
+        }}</text>
+        <text style="margin-left:5px;margin-right: 20px;line-height:22px;">\ue100</text>
+        <text style="font-family: UniFontFamily;font-size:20px;">{{
+          uniIcon2
+        }}</text>
+        <text style="margin-left:5px;line-height:22px;">\ue101</text>
+      </view>
+      <text class="uni-common-mt font-size-20">上一页非全局加载字体：</text>
+      <text class="font-size-20 line-height-40" style="font-family: AlimamaDaoLiTiTTF"
         >font-family: 阿里妈妈刀隶体-ttf</text
       >
-      <text class="item" style="font-family: AlimamaDaoLiTiOTF"
+      <text class="font-size-20 line-height-40" style="font-family: AlimamaDaoLiTiOTF"
         >font-family: 阿里妈妈刀隶体-otf</text
       >
-      <text class="item" style="font-family: AlimamaDaoLiTiWOFF"
+      <!-- <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>
 
+<script>
+export default {
+  data() {
+    return {
+      uniIcon1: '\ue100',
+      uniIcon2: '\ue101',
+    }
+  }
+}
+</script>
+
 <style>
-.item {
+.font-size-20 {
   font-size: 20px;
+}
+.line-height-40 {
   line-height: 40px;
 }
 </style>

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

@@ -2,28 +2,45 @@
   <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="font-size-20">全局加载字体：</text>
+      <text class="font-size-20 line-height-40" style="font-family: UniFontFamily"
+        >font-family: uni.ttf</text
       >
-      <text class="item" style="font-family: AlimamaDaoLiTiTTF"
+      <view style="flex-direction: row;">
+        <text class="font-size-20" style="font-family: UniFontFamily;">{{
+          uniIcon1
+        }}</text>
+        <text style="margin-left:5px;margin-right: 20px;line-height:22px;">\ue100</text>
+        <text class="font-size-20" style="font-family: UniFontFamily;">{{
+          uniIcon2
+        }}</text>
+        <text style="margin-left:5px;line-height:22px;">\ue101</text>
+      </view>
+      <text class="uni-common-mt font-size-20">非全局加载字体：</text>
+      <text class="font-size-20 line-height-40" style="font-family: AlimamaDaoLiTiTTF"
         >font-family: 阿里妈妈刀隶体-ttf (网络字体下载后生效)</text
       >
-
-      <text class="item" style="font-family: AlimamaDaoLiTiOTF"
+      <text class="font-size-20 line-height-40" style="font-family: AlimamaDaoLiTiOTF"
         >font-family: 阿里妈妈刀隶体-otf</text
       >
-      <text class="item" style="font-family: AlimamaDaoLiTiWOFF"
+      <!-- <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 {
+  data() {
+    return {
+      uniIcon1: '\ue100',
+      uniIcon2: '\ue101',
+    }
+  },
   onLoad() {
     uni.loadFontFace({
       global: true,
@@ -57,26 +74,26 @@ export default {
         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)
-      },
-    })
+    // 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() {
@@ -89,8 +106,10 @@ export default {
 </script>
 
 <style>
-.item {
+.font-size-20 {
   font-size: 20px;
+}
+.line-height-40 {
   line-height: 40px;
 }
 </style>