style: 修改字体加载方式

src/app.scss

@@ -1,6 +1,6 @@
 page,
 .root {
-  font-family: "Source Han Sans SC Regular";
+  font-family: "SourceHanSansSCRegular";
 }
 
 .margin-safe-area-bottom {
@@ -29,22 +29,10 @@ page,
 }
 
 @font-face {
-  font-family: "Source Han Sans SC Regular";
-  src: url("https://houseoss.4dkankan.com/project/wx-csbwg-public/fonts/SourceHanSansSCRegular.otf");
-}
-@font-face {
   font-family: "Source Han Serif CN Heavy";
   src: url("https://houseoss.4dkankan.com/project/wx-csbwg-public/fonts/SourceHanSerifCNHeavy.otf");
 }
 @font-face {
-  font-family: "Source Han Sans CN-Bold";
-  src: url("https://houseoss.4dkankan.com/project/wx-csbwg-public/fonts/SourceHanSansSCBold.otf");
-}
-@font-face {
-  font-family: "Source Han Serif CN-Bold";
-  src: url("https://houseoss.4dkankan.com/project/wx-csbwg-public/fonts/SourceHanSerifCN-SemiBold.otf");
-}
-@font-face {
   font-family: "Alibaba PuHuiTi-Bold";
   src: url("https://houseoss.4dkankan.com/project/wx-csbwg-public/fonts/ALIBABA-PUHUITI-BOLD.OTF");
 }

src/app.tsx

@@ -67,9 +67,36 @@ initial({
   ),
 });
 
+const loadFont = (url: string, family: string) => {
+  return new Promise((res, rej) => {
+    Taro.loadFontFace({
+      family,
+      global: true,
+      source: `url('${url}')`,
+      // @ts-ignore
+      scopes: ["native", "webview"],
+      success: res,
+      fail: rej,
+    });
+  });
+};
+
 class App extends Component {
   componentDidMount() {
     login();
+
+    loadFont(
+      "https://houseoss.4dkankan.com/project/wx-csbwg-public/fonts/SourceHanSansSCBold.otf",
+      "SourceHanSansCN-Bold"
+    );
+    loadFont(
+      "https://houseoss.4dkankan.com/project/wx-csbwg-public/fonts/SourceHanSerifCN-SemiBold.otf",
+      "SourceHanSerifCN-Bold"
+    );
+    loadFont(
+      "https://houseoss.4dkankan.com/project/wx-csbwg-public/fonts/SourceHanSansSCRegular.otf",
+      "SourceHanSansSCRegular"
+    );
   }
 
   componentDidShow() {}

src/components/FooterProtocol/index.scss

@@ -6,7 +6,7 @@
   margin-top: 20px;
   font-size: 23px;
   color: #424a4a;
-  font-family: "Source Han Serif CN-Bold";
+  font-family: "SourceHanSerifCN-Bold";
 
   .primary {
     color: #589498;

src/components/Video/index.scss

@@ -21,7 +21,7 @@
     height: 102px;
     color: white;
     font-size: 28px;
-    font-family: "Source Han Serif CN-Bold";
+    font-family: "SourceHanSerifCN-Bold";
     background: url("./btn0@2x-min.png") no-repeat center / contain;
   }
 }

src/pages/home/components/SearchLayout/index.scss

@@ -82,7 +82,7 @@
     &--active {
       color: white;
       font-size: 31px;
-      font-family: "Source Han Sans CN-Bold";
+      font-family: "SourceHanSansCN-Bold";
     }
   }
   .at-tabs__item-underline {
@@ -119,7 +119,7 @@
       &__label {
         color: white;
         font-size: 31px;
-        font-family: "Source Han Sans CN-Bold";
+        font-family: "SourceHanSansCN-Bold";
       }
     }
     &__more {

src/pages/home/index.scss

@@ -76,7 +76,7 @@
       text-align: center;
       font-size: 31px;
       color: #589498;
-      font-family: "Source Han Serif CN-Bold";
+      font-family: "SourceHanSerifCN-Bold";
       transform: translateX(-50%);
       z-index: 9;
 

src/subModule/components/CertLayout/index.tsx

@@ -21,131 +21,111 @@ export const CertLayout: FC<CertLayoutProps> = ({ name, date, ...props }) => {
     if (props.isOpened && !loaded.current) init();
   }, [props.isOpened]);
 
-  const loadFont = (url: string, family: string) => {
-    return new Promise((res, rej) => {
-      Taro.loadFontFace({
-        family,
-        source: `url('${url}')`,
-        // @ts-ignore
-        scopes: ["native"],
-        success: res,
-        fail: rej,
-      });
-    });
-  };
-
   const init = async () => {
     try {
       Taro.showLoading({
         title: "绘制中",
       });
 
-      if (!loaded.current) {
-        await loadFont(
-          "https://houseoss.4dkankan.com/project/wx-csbwg-public/fonts/SourceHanSansSCBold.otf",
-          "SourceHanSansCN-Bold"
-        );
-        await loadFont(
-          "https://houseoss.4dkankan.com/project/wx-csbwg-public/fonts/SourceHanSerifCN-SemiBold.otf",
-          "SourceHanSerifCN-Bold"
-        );
-        await loadFont(
-          "https://houseoss.4dkankan.com/project/wx-csbwg-public/fonts/SourceHanSansSCRegular.otf",
-          "SourceHanSansSCRegular"
-        );
-      }
-
-      Taro.createSelectorQuery()
-        .select("#certCanvas")
-        .fields({ node: true, size: true }, async (res) => {
-          const canvas = res.node;
-          const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
-
-          canvas.width = res.width * system.pixelRatio;
-          canvas.height = res.height * system.pixelRatio;
-
-          const bgInfo = await getTempImgPath(
-            "https://houseoss.4dkankan.com/project/wx-csbwg-public/images/cert-min.png"
-          );
-          const ratio = bgInfo.width / canvas.width;
-
-          const bgSource = await loadImg(canvas, bgInfo.path);
-
-          ctx.drawImage(bgSource, 0, 0, canvas.width, canvas.height);
-
-          ctxText(
-            ctx,
-            "特此授予锡善云城·热心市民".split("").join(" "),
-            `${7 * system.pixelRatio}px SourceHanSansSCRegular`,
-            "center",
-            "#424A4A",
-            canvas.width / 2,
-            800 / ratio
-          );
-
-          ctxText(
-            ctx,
-            name.split("").join(" "),
-            `${15 * system.pixelRatio}px SourceHanSansCN-Bold`,
-            "center",
-            "#CFC49E",
-            canvas.width / 2,
-            1020 / ratio
-          );
-
-          ctxTextWrap(
-            ctx,
-            "特此证明，感谢您的热情参与与慷慨支持。您的善举为社区带来了无限的温暖与希望。因您的无私奉献，特授予您热心市民称号，以表彰您对慈善事业的贡献。您的善行将永远激励着我们，为构建更美好的社会贡献一份力量。",
-            `${7 * system.pixelRatio}px SourceHanSansSCRegular`,
-            "center",
-            "#424A4A",
-            canvas.width / 2,
-            1200 / ratio,
-            460 * system.pixelRatio
-          );
-
-          ctxText(
-            ctx,
-            date,
-            `${6 * system.pixelRatio}px SourceHanSerifCN-Bold`,
-            "left",
-            "#424A4A",
-            740 / ratio,
-            1660 / ratio
-          );
-
-          ctxText(
-            ctx,
-            "锡善云城",
-            `${6 * system.pixelRatio}px SourceHanSerifCN-Bold`,
-            "left",
-            "#424A4A",
-            1880 / ratio,
-            1660 / ratio
-          );
-
-          await new Promise((resolve, reject) => {
-            Taro.canvasToTempFilePath({
-              canvas,
-              fileType: "jpg",
-              success(res2) {
-                setImgPath(res2.tempFilePath);
-
-                loaded.current = true;
-                resolve(true);
-              },
-              fail(err) {
-                Taro.showToast({
-                  title: err.errMsg,
-                  icon: "none",
-                  duration: 4000,
+      await new Promise((resolve, reject) => {
+        Taro.createSelectorQuery()
+          .select("#certCanvas")
+          .fields({ node: true, size: true }, async (res) => {
+            const canvas = res.node;
+            const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+
+            canvas.width = res.width * system.pixelRatio;
+            canvas.height = res.height * system.pixelRatio;
+
+            try {
+              const bgInfo = await getTempImgPath(
+                "https://houseoss.4dkankan.com/project/wx-csbwg-public/images/cert-min.png"
+              );
+              const ratio = bgInfo.width / canvas.width;
+
+              const bgSource = await loadImg(canvas, bgInfo.path);
+
+              ctx.drawImage(bgSource, 0, 0, canvas.width, canvas.height);
+
+              ctxText(
+                ctx,
+                "特此授予锡善云城·热心市民".split("").join(" "),
+                `${7 * system.pixelRatio}px SourceHanSansSCRegular`,
+                "center",
+                "#424A4A",
+                canvas.width / 2,
+                800 / ratio
+              );
+
+              ctxText(
+                ctx,
+                name.split("").join(" "),
+                `${15 * system.pixelRatio}px SourceHanSansCN-Bold`,
+                "center",
+                "#CFC49E",
+                canvas.width / 2,
+                1020 / ratio
+              );
+
+              ctxTextWrap(
+                ctx,
+                "特此证明，感谢您的热情参与与慷慨支持。您的善举为社区带来了无限的温暖与希望。因您的无私奉献，特授予您热心市民称号，以表彰您对慈善事业的贡献。您的善行将永远激励着我们，为构建更美好的社会贡献一份力量。",
+                `${7 * system.pixelRatio}px SourceHanSansSCRegular`,
+                "center",
+                "#424A4A",
+                canvas.width / 2,
+                1200 / ratio,
+                460 * system.pixelRatio
+              );
+
+              ctxText(
+                ctx,
+                date,
+                `${6 * system.pixelRatio}px SourceHanSerifCN-Bold`,
+                "left",
+                "#424A4A",
+                740 / ratio,
+                1660 / ratio
+              );
+
+              ctxText(
+                ctx,
+                "锡善云城",
+                `${6 * system.pixelRatio}px SourceHanSerifCN-Bold`,
+                "left",
+                "#424A4A",
+                1880 / ratio,
+                1660 / ratio
+              );
+
+              await new Promise((resolve, reject) => {
+                Taro.canvasToTempFilePath({
+                  canvas,
+                  fileType: "jpg",
+                  success(res2) {
+                    setImgPath(res2.tempFilePath);
+
+                    loaded.current = true;
+                    resolve(true);
+                  },
+                  fail(err) {
+                    Taro.showToast({
+                      title: err.errMsg,
+                      icon: "none",
+                      duration: 4000,
+                    });
+                    reject(err);
+                  },
                 });
-                reject(err);
-              },
-            });
-          });
-        })
-        .exec();
+              });
+
+              resolve(true);
+            } catch (err) {
+              reject(false);
+            }
+          })
+          .exec();
+      });
     } finally {
       Taro.hideLoading();
     }

src/subModule/pages/feedback/index.scss

@@ -41,7 +41,7 @@
     }
   }
   &__label {
-    font-family: "Source Han Serif CN-Bold";
+    font-family: "SourceHanSerifCN-Bold";
     font-size: 38px;
     color: #424a4a;
   }

src/subModule/pages/order/index.scss

@@ -14,7 +14,7 @@
       font-size: 38px;
     }
     .bold {
-      font-family: "Source Han Sans CN-Bold";
+      font-family: "SourceHanSansCN-Bold";
     }
     .size38.bold {
       margin-bottom: 10px;

src/subModule/pages/shopmall/components/Products/index.scss

@@ -43,7 +43,7 @@
       &__price {
         color: #589498;
         font-size: 38px;
-        font-family: "Source Han Sans CN-Bold";
+        font-family: "SourceHanSansCN-Bold";
       }
     }
     &__is-buy {

src/subModule/pages/shopmall/components/Records/index.scss

@@ -32,7 +32,7 @@
     }
     &__rg {
       padding-left: 20px;
-      font-family: "Source Han Sans CN-Bold";
+      font-family: "SourceHanSansCN-Bold";
       font-size: 38px;
       color: #ffce22;
 

src/subModule/pages/shopmall/index.scss

@@ -15,7 +15,7 @@
     z-index: 1;
 
     &__count {
-      font-family: "Source Han Sans CN-Bold";
+      font-family: "SourceHanSansCN-Bold";
       font-size: 70px;
       line-height: 80px;
     }
@@ -86,7 +86,7 @@
 
       &--active {
         color: #589498;
-        font-family: "Source Han Sans CN-Bold";
+        font-family: "SourceHanSansCN-Bold";
       }
       &:nth-child(2) {
         padding: 0 80px;