uniapp引入第三方字体库如（宋体、喜鹊燕书体、字小魂歌以晓手迹行楷体等) 最优解决方案 |
您所在的位置：网站首页 › 免费更换字体的软件宋体 › uniapp引入第三方字体库如（宋体、喜鹊燕书体、字小魂歌以晓手迹行楷体等) 最优解决方案 |
uniapp引入第三方字体库如（宋体、喜鹊燕书体、字小魂歌以晓手迹行楷体等) 最优解决方案
|
最近在开发一个写对联的小程序，其中要求对联文字以不同字体呈现，比如（宋体、喜鹊燕书体、字小魂歌以晓手迹行楷体等），如图： 经过几天的研究，找到了最优的一个解决方案： API uni.loadFontFace() + 远程加载.tff字体文件（微信小程序发布的代码主包压缩后不能超过2M，所以将这些静态资源放到服务器上是一个很好的节省容量的方法） API uni.loadFontFace()的使用： uni.loadFontFace({ family: '中英文都可', source: `url('${domain}/xxx/xxx.ttf')`, success() { console.log('success') }, fail(res) { console.log('fail',res) } })使用该api的注意事项： 代码示例： 在uniapp目录下的utils下新建一个font.js文件 font.js内容如下：
// 第三方字体库调用
let loadFont = function() {
// 所有的.tff文件
const fontsArr = [
'Xiquegufengxiaokaiti',
'Xiquejuzhengti',
'Xiqueledunti',
'Xiquexiaoqingsongti',
'Xiqueyanshuti',
'Zixiaohunfeimoshoushu',
'Zixiaohungeyixiaoshoujixinkaiti',
'Zixiaohunqiankunshoushu',
'Zixiaohunxingchaohaibaoti',
]
fontsArr.forEach(itm => {
wx.loadFontFace({
family: `${itm}`, //设置一个font-family使用的名字 中文或英文
global: true, //是否全局生效
source: `url("https://xxxxx.xxx.com/ttf/${itm}.ttf")`, //字体资源的地址
success: function(e) {
console.log(itm, '===>字体调用成功');
},
fail: function(e) {
console.log(itm, '===>字体调用失败');
},
});
})
};
module.exports = {
loadFont: loadFont,
};
在main.js中全局引入
// 第三方字体库调用
const font = require('./utils/fonts/font.js')
font.loadFont(); //下载字体
页面中使用 
谁念西风独自凉
谁念西风独自凉
谁念西风独自凉
谁念西风独自凉
谁念西风独自凉
谁念西风独自凉
谁念西风独自凉
谁念西风独自凉
谁念西风独自凉
谁念西风独自凉
export default {
data() {
return {};
},
methods: {
initData() {},
},
onShow() {
this.initData();
},
created() {},
};
.mine{
line-height: 100rpx;
font-size: 80rpx;
text-align: center;
}
.Xiquegufengxiaokaiti {
font-family: Xiquegufengxiaokaiti;
}
.Xiquejuzhengti {
font-family: Xiquejuzhengti;
}
.Xiqueledunti {
font-family: Xiqueledunti;
}
.Xiquexiaoqingsongti {
font-family: Xiquexiaoqingsongti;
}
.Xiqueyanshuti {
font-family: Xiqueyanshuti;
}
.Zixiaohunfeimoshoushu {
font-family: Zixiaohunfeimoshoushu;
}
.Zixiaohungeyixiaoshoujixinkaiti {
font-family: Zixiaohungeyixiaoshoujixinkaiti;
}
.Zixiaohunqiankunshoushu {
font-family: Zixiaohunqiankunshoushu;
}
.Zixiaohunxingchaohaibaoti {
font-family: Zixiaohunxingchaohaibaoti;
}
参考链接： https://www.cnblogs.com/mengsha/p/14039401.html |
一般UI设计给的都是这种.tff格式的字体文件，如图： 
那么怎么在uniapp中加载第三方字体库呢？
跨域问题解决:【本文地址】
今日新闻 |
推荐新闻 |