uniapp加载网络字体
文章描述：
uniapp文字加载网络字体样式
默认
效果
template
<template>
<view class="content">
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view>loadFontFaceFromWeb</view>
<!-- <button @click="loadFontFaceFromWeb">从网络加载字体</button> -->
</view>
</template>script
const url = 'https://www.miyil.com/Pacifico.ttf';
export default{
data(){
return{
title: 'Hello'
}
},
onLoad() {
this.loadFontFaceFromWeb()
},
onShow() {
},
methods:{
loadFontFaceFromWeb() {
uni.loadFontFace({
family: 'font-test',
source: `url("${url}")`
})
},
}
}style
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: font-test;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
发布时间：2022/04/12
发表评论