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

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

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

猜你喜欢

转载自blog.csdn.net/yuge486/article/details/81735145
今日推荐