问题:在小程序中是不能直接引入字体文件的
解决方式一:将文件转化成base64再引入,亲测有效
1、下载需要的字体在本地:http://www.iconfont.cn/
2、访问 https://transfonter.org/ ,如下图操作
3、下载得到文件
4、打开 stylesheet.css,复制全部内容
5、可将代码粘贴到app.wxss文件中,定义使用webfont的样式
app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。如果页面有自己的样式表, 则会覆盖公共样式表
/**自定义外部字体样式**/
@font-face {
font-family: 'FZZhengHeiS-EL-GB';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAUAQAABABARkZUTWYwmBUAG7e0AAAAHEdERUYAKR4YABu2dAAAAB5HUE9TaJFuigAbt5QAAAAgR1NVQswQ5rUAG7aUAAAA/k9TLzJNKFaRAAAByAAAAFZjbWFwtVMFYQAAeJwAAHROY3Z0IAAVAAAAAO6cAAAAAmZwZ21l
......)format('truetype');
font-weight: normal;
font-style: normal;
}
.base-font{
font-family:"FZZhengHeiS-EL-GB" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
6、为文字加上对应的样式
<text class='base-font'>哈哈哈哈哈哈哈哈哈哈哈或</text>
解决方式二:使用阿里字体的线上地址
但是我尝试未成功,不知道啥原因
1、进入网址:http://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.d81ec59f2#!/webfont/index