perf-FontAwesomeIcon 微信小程序和阿里小程序动态远程加载字体

src/App.vue

@@ -3,10 +3,14 @@
   import { useAuthStore } from '@/state/modules/auth';
   import { removeInterceptor, setupInterceptors } from '@/utils/interceptors';
   import { useRouterStore } from '@/state/modules/router';
+  import { dynamicLoadFontFace } from '@/utils/fonts';
 
   onLaunch(() => {
     console.log('App Launch');
-
+    /** 微信小程序和阿里小程序动态远程加载font awesome icon 字体 **/
+    /* #ifdef MP-WEIXIN || MP-ALIPAY */
+    dynamicLoadFontFace();
+    /* #endif */
     removeInterceptor();
 
     setupInterceptors();

src/components/FontAwesomeIcon/index.scss

@@ -1,4 +1,5 @@
 @import "scss/fontawesome";
+
 @import "scss/solid";
 @import "scss/brands";
 @import "scss/regular";

src/components/FontAwesomeIcon/scss/_variables.scss

@@ -8,7 +8,7 @@ $fa-style-family        : "Font Awesome 6" !default;
 $fa-style-family-solid : '#{ $fa-style-family } Solid';
 $fa-style-family-regular : '#{ $fa-style-family } Regular';
 $fa-style-family-light  : '#{ $fa-style-family } Light';
-$fa-style-family-thin: '#{ $fa-style-family } Thin';
+$fa-style-family-thin : '#{ $fa-style-family } Thin';
 $fa-style-family-sharp-solid : '#{ $fa-style-family } Sharp Solid';
 $fa-style-family-brands : '#{ $fa-style-family } Brands Regular';
 $fa-style-family-duotone : '#{ $fa-style-family } Duotone Solid';

src/components/FontAwesomeIcon/scss/brands.scss

@@ -12,6 +12,7 @@
   --#{$fa-css-prefix}-font-brands: normal 400 1em/1 '#{ $fa-style-family-brands }';
 }
 
+/* #ifndef MP-WEIXIN || MP-ALIPAY */
 @font-face {
   font-family: $fa-style-family-brands;
   font-style: normal;
@@ -28,6 +29,7 @@
   // $fa-brands-400-ttf;
   /* #endif */
 }
+/* #endif */
 
 .fab,
 .#{$fa-css-prefix}-brands {

src/components/FontAwesomeIcon/scss/duotone.scss

@@ -9,9 +9,10 @@
 
 :root, :host {
   --#{$fa-css-prefix}-style-family-classic: $fa-style-family-duotone;
-  --#{$fa-css-prefix}-font-duotone: normal 900 1em/1 $fa-style-family-duotone;
+  --#{$fa-css-prefix}-font-duotone: normal 900 1em/1 '#{ $fa-style-family-duotone }';
 }
 
+/* #ifndef MP-WEIXIN || MP-ALIPAY */
 @font-face {
   font-family: $fa-style-family-duotone;
   font-style: normal;
@@ -28,6 +29,7 @@
   /* #endif */
 
 }
+/* #endif */
 
 .far,
 .#{$fa-css-prefix}-duotone {

src/components/FontAwesomeIcon/scss/light.scss

@@ -9,9 +9,9 @@
 
 :root, :host {
   --#{$fa-css-prefix}-style-family-classic: $fa-style-family-light;
-  --#{$fa-css-prefix}-font-light: normal 300 1em/1 '#{ $fa-style-family-light } Pro Light';
+  --#{$fa-css-prefix}-font-light: normal 300 1em/1 '#{ $fa-style-family-light }';
 }
-
+/* #ifndef MP-WEIXIN || MP-ALIPAY */
 @font-face {
   font-family: $fa-style-family-light;
   font-style: normal;
@@ -25,9 +25,9 @@
   /* #ifndef H5 */
   src:  $fa-light-300-woff2;
   //  $fa-light-300-ttf;
-  
   /* #endif */
 }
+/* #endif */
 
 .far,
 .#{$fa-css-prefix}-light {

src/components/FontAwesomeIcon/scss/regular.scss

@@ -11,7 +11,7 @@
   --#{$fa-css-prefix}-style-family-classic: $fa-style-family-regular;
   --#{$fa-css-prefix}-font-regular: normal 400 1em/1 '#{ $fa-style-family-regular }';
 }
-
+/* #ifndef MP-WEIXIN || MP-ALIPAY */
 @font-face {
   font-family: $fa-style-family-regular;
   font-style: normal;
@@ -28,6 +28,7 @@
     
   /* #endif */
   }
+/* #endif */
 
 .far,
 .#{$fa-css-prefix}-regular {

src/components/FontAwesomeIcon/scss/sharp-solid.scss

@@ -11,7 +11,7 @@
   --#{$fa-css-prefix}-style-family-sharp: $fa-style-family-sharp-solid;
   --#{$fa-css-prefix}-font-sharp-solid: normal 900 1em/1 '#{ $fa-style-family-sharp-solid }';
 }
-
+/* #ifndef MP-WEIXIN || MP-ALIPAY */
 @font-face {
   font-family: $fa-style-family-sharp-solid;
   font-style: normal;
@@ -27,6 +27,7 @@
   // $fa-sharp-solid-900-ttf;
   /* #endif */
 }
+/* #endif */
 
 .far,
 .#{$fa-css-prefix}-sharp-solid {

src/components/FontAwesomeIcon/scss/solid.scss

@@ -12,6 +12,7 @@
   --#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family-solid  }';
 }
 
+/* #ifndef MP-WEIXIN || MP-ALIPAY */
 @font-face {
   font-family: $fa-style-family-solid ;
   font-style: normal;
@@ -27,6 +28,7 @@
   // $fa-solid-900-ttf;
   /* #endif */
 }
+/* #endif */
 
 .fas,
 .#{$fa-css-prefix}-solid {

src/components/FontAwesomeIcon/scss/thin.scss

@@ -11,7 +11,7 @@
   --#{$fa-css-prefix}-style-family-classic: $fa-style-family-thin;
   --#{$fa-css-prefix}-font-thin: normal 100 1em/1 '#{ $fa-style-family-thin }';
 }
-
+/* #ifndef MP-WEIXIN || MP-ALIPAY */
 @font-face {
   font-family: $fa-style-family-thin;
   font-style: normal;
@@ -27,6 +27,7 @@
   // $fa-thin-100-ttf;
   /* #endif */
 }
+/* #endif */
 
 .far,
 .#{$fa-css-prefix}-thin {

src/demo/example/fontAwesomeIcon/index.vue

@@ -8,7 +8,6 @@
 
   const onCopyLink = () => {
     SetClipboardData(iconLink.value);
-    console.log('的反馈了高考历史电饭锅');
   };
 </script>
 <template>
@@ -16,8 +15,13 @@
     <view class="h2"> FontAwesomeIcon 图标组件基于font awesome icon v6.20</view>
     <view class="tip">
       Tip: 由于字体文件太大,共7种风格图标, 7个字体文件,
-      在微信小程序中请不要引用全部字体,在组件目录index.scss中配置, 已测试: 支持H5, APP(安卓),
-      微信小程序
+      <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+      微信小程序和阿里小程序动态远程加载font awesome icon 字体, 在\src\utils\fonts.ts中配置,
+      <!-- #endif -->
+      <!-- #ifndef MP-WEIXIN || MP-ALIPAY-->
+      在组件目录index.scss中配置引入字体,
+      <!-- #endif -->
+      已测试: 支持H5, APP(安卓), 微信小程序
     </view>
     <view class="tip">
       全部icon请查看:

src/utils/fonts.ts

@@ -0,0 +1,85 @@
+import { getBaseUrl } from '@/utils/env';
+
+const fa_style_family = 'Font Awesome 6';
+
+const fa_style_family_solid = `${fa_style_family} Solid`;
+const fa_style_family_regular = `${fa_style_family} Regular`;
+const fa_style_family_light = `${fa_style_family} Light`;
+const fa_style_family_thin = `${fa_style_family} Thin`;
+const fa_style_family_sharp_solid = `${fa_style_family} Sharp Solid`;
+const fa_style_family_brands = `${fa_style_family} Brands Regular`;
+const fa_style_family_duotone = `${fa_style_family} Duotone Solid`;
+
+const BASE_URL = getBaseUrl();
+/* 实际项目中替换为自己服务器的url */
+const LOAD_FONT_FACE_URL = `${BASE_URL}/fonts`;
+
+const fontFamilyList = [
+  {
+    family: fa_style_family_solid,
+    source: `${LOAD_FONT_FACE_URL}/fa-solid-900.woff2`,
+    weight: '900',
+  },
+  {
+    family: fa_style_family_regular,
+    source: `${LOAD_FONT_FACE_URL}/fa-regular-400.woff2`,
+    weight: '400',
+  },
+  {
+    family: fa_style_family_light,
+    source: `${LOAD_FONT_FACE_URL}/fa-light-300.woff2`,
+    weight: '300',
+  },
+  {
+    family: fa_style_family_thin,
+    source: `${LOAD_FONT_FACE_URL}/fa-thin-100.woff2`,
+    weight: '100',
+  },
+  {
+    family: fa_style_family_sharp_solid,
+    source: `${LOAD_FONT_FACE_URL}/fa-sharp-solid-900.woff2`,
+    weight: '900',
+  },
+  {
+    family: fa_style_family_duotone,
+    source: `${LOAD_FONT_FACE_URL}/fa-duotone-900.woff2`,
+    weight: '900',
+  },
+  {
+    family: fa_style_family_brands,
+    source: `${LOAD_FONT_FACE_URL}/fa-brands-400.woff2`,
+    weight: '400',
+  },
+];
+
+function LoadFontFace(data: UniApp.LoadFontFaceOptions & { weight?: string; global?: boolean }) {
+  return new Promise((resolve, reject) => {
+    uni.loadFontFace({
+      global: true,
+      ...data,
+      desc: {
+        style: 'normal',
+        weight: data.weight ?? 'normal',
+        variant: 'normal',
+      },
+      success: (res) => {
+        resolve(res);
+      },
+      fail: (err) => {
+        reject(err);
+      },
+    });
+  });
+}
+
+export function dynamicLoadFontFace() {
+  fontFamilyList.forEach((fontFamily) => {
+    LoadFontFace(fontFamily)
+      .then((res: any) => {
+        console.log(fontFamily.family, res.errMsg);
+      })
+      .catch((err) => {
+        console.error(fontFamily.family, err.errMsg);
+      });
+  });
+}