uniapp中nvue页面如何导入自己自定义字体(weex的方式)

从官方文档中可以看到,nvue页面不能使用css导入字体 官方文档

也不能使用uni.loadFontFace加载

 只能使用原生weex的方式进行导入官方addRule文档,使用uniapp内置的也会有很多坑怎么都导入不成功,至少是我导入不成功

 以下都是使用weex的方式进行导入

导入网络字体:

beforeCreate() {
    //获取字体
	const domModule = weex.requireModule('dom')
	domModule.addRule('fontFace', {
		'fontFamily': "hyx",
		'src': "url('http://192.168.0.103:8010/changefile/downloadFile?file=HanYingXiu.ttf')"
			});
    //注意:如何使用本地的接口需要把loaclhost替换成IP地址,否则他会自己帮你转成0.0.0.0的IP地址,就会寻找不到地址
    //后端只需要返回二进制流下载文件形式即可
}

在css中使用
<style>
    .text{
        font-family:hyx;
/* 这里不能使用双引号或者引号括起来,否则使用不成功(引号括起来默认选择的是以css方式导入) */
    }
</style>

导入项目中的地址:

在导入项目中的之前需要使用plus.io.convertLocalFileSystemURL("static/font/HuaWenKaiTi.ttf")获取到文件的绝对路径

 

    

plus.io.convertLocalFileSystemURL()会直接获取到项目根路径
输出为:/storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/www/
plus.io.convertLocalFileSystemURL("static/font/HuaWenKaiTi.ttf")
输出完整路径:/storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/www/static/font/HuaWenKaiTi.ttf


domModule.addRule('fontFace', {
	'fontFamily': "hwxk",
	'src': "url('file:/"+ plus.io.convertLocalFileSystemURL("static/font/HuaWenKaiTi.ttf") +"')"
			});

使用方式跟网络字体的没有区别

//注意:url中的值需要进行字符串的拼接的
"url('file:/"+ plus.io.convertLocalFileSystemURL("static/font/HuaWenKaiTi.ttf") +')"
在最后面的一个单引号中没有使用双引号括起来。不能够获取到字体
下面这个是正确的
"url('file:/" + plus.io.convertLocalFileSystemURL("static/font/HuaWenKaiTi.ttf") + "')"


版权声明:本文为qq_55223496原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。