init

xhs-mini-demos/component-case/load-font-face/load-font-face.css

@@ -0,0 +1,12 @@
+.page-body-info {
+  align-items: center;
+  padding: 100px 0;
+}
+
+.font-loaded {
+  font-family: "Bitstream Vera Serif Bold";
+}
+
+.display-area {
+  font-size: 20px;
+}

xhs-mini-demos/component-case/load-font-face/load-font-face.js

@@ -0,0 +1,41 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: '动态加载字体',
+      path: 'packageAPI/pages/load-font-face/load-font-face',
+    };
+  },
+
+  data: {
+    fontFamily: 'Bitstream Vera Serif Bold',
+    loaded: false,
+  },
+
+  onLoad() {
+    this.setData({
+      loaded: false,
+    });
+  },
+
+  loadFontFace() {
+    const self = this;
+    xhs.loadFontFace({
+      family: this.data.fontFamily,
+      source: 'url("https://sungd.github.io/Pacifico.ttf")',
+      success(res) {
+        console.log(res.status);
+        self.setData({ loaded: true });
+      },
+      fail(res) {
+        console.log(res.status);
+      },
+      complete(res) {
+        console.log(res.status);
+      },
+    });
+  },
+
+  clear() {
+    this.setData({ loaded: false });
+  },
+});

xhs-mini-demos/component-case/load-font-face/load-font-face.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "动态加载字体"
+}

xhs-mini-demos/component-case/load-font-face/load-font-face.xhsml

@@ -0,0 +1,14 @@
+<view class="container">
+  <view class="page-body">
+    <view class="page-section">
+      <view class="page-body-info display-area {{ loaded ? 'font-loaded' : '' }}">
+        <text xhs:if="{{!loaded}}">Load {{ fontFamily }}</text>
+        <text xhs:else>{{ fontFamily }} is loaded</text>
+      </view>
+      <view class="btn-area">
+        <button type="primary" bindtap="loadFontFace">加载字体</button>
+        <button type="default" bindtap="clear">清除</button>
+      </view>
+    </view>
+  </view>
+</view>