微信小程序中引入外部字体

问题:在小程序中是不能直接引入字体文件的

解决方式一:将文件转化成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

2、根据使用说明:https://www.zybuluo.com/cherishpeace/note/46809

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值