feat: load-font-face
parent
975d676e52
commit
3c4303488a
|
@ -0,0 +1,35 @@
|
||||||
|
// pages/API/load-font-face/load-font-face.js
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
fontFamily: 'Bitstream Vera Serif Bold',
|
||||||
|
loaded: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad() {
|
||||||
|
this.setData({
|
||||||
|
loaded: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
loadFontFace() {
|
||||||
|
const self = this
|
||||||
|
wx.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})
|
||||||
|
}
|
||||||
|
})
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "动态加载字体"
|
||||||
|
}
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!--pages/API/load-font-face/load-font-face.wxml-->
|
||||||
|
<import src="../../common/head.wxml" />
|
||||||
|
<import src="../../common/foot.wxml" />
|
||||||
|
|
||||||
|
<view class="container">
|
||||||
|
<template is="head" data="{{title: 'loadFontFace'}}"/>
|
||||||
|
|
||||||
|
<view class="page-body">
|
||||||
|
<view class="page-section">
|
||||||
|
<view class="page-body-info display-area {{ loaded ? 'font-loaded' : '' }}">
|
||||||
|
<text wx:if="{{!loaded}}">Load {{ fontFamily }}</text>
|
||||||
|
<text wx: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>
|
||||||
|
|
||||||
|
<template is="foot" />
|
||||||
|
</view>
|
||||||
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
/* pages/API/load-font-face/load-font-face.wxss */
|
||||||
|
.page-body-info {
|
||||||
|
align-items: center;
|
||||||
|
padding: 100px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-loaded {
|
||||||
|
font-family: "Bitstream Vera Serif Bold";
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-area {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
Loading…
Reference in New Issue