您好,小程序模板欢迎您。
小程序模板
当前位置 : 首页> 小程序教程> 微信小程序自定义字体样式、字体修改、第三方字体设置

微信小程序自定义字体样式、字体修改、第三方字体设置

 博主介绍:本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮助到您;

希望此文章可以帮助到您

微信小程序文章推荐

微信小程序布局图片上面显示文字

微信小程序实现左边图片右边文字效果

微信小程序获取当前日期和时间

  微信小程序绘制地图轨迹线路

微信小程序绘制marker

微信小程序之绘制多个marker以及调用手机地图软件导航

方法一:本地字体

1:前端界面


 

  字体设置

  

    1:我是第一种字体

  

  

    说明:直接使用(font-family: 楷体)进行字体设置

  

2:css样式

.oneFont{

  font-family: 楷体;

  font-weight: bold;

  color: #f00;

}

说明:字体的字体样式设计

方法二:第三方字体

说明:假如你需要使用系统以外的字体的话,那么就需要如下操作;

1:前端代码

  

    2:我是第二种字体

  

  

    说明:引用第三方字体进行字体设置

  

2:wxss设置字体文件

@font-face {
    font-family: "PangMenZhengDao";
    src: url("data:font/ttf;charset=utf-8;base64,AAEAAAAPAIAAAwBwR0RFRgASAAwAABR0AAAAFk9TLzJbf/E1AAAKdAAAAGBjbWFwDBG7yAAACtQAAABsY3Z0IAAZACgAABEMAAAACGZwZ23RhEEzAAALQAAABbtnYXNwAB8ACQAAFGQAAAAQZ2x5ZpuHXTUAAAD8AAAIvGhlYWQL1NsHAAAJ9AAAADZoaGVhB9YDcQAAClAAAAAkaG10eAziAGYAAAosAAAAJGxvY2EIYgXdAAAJ2AAAABptYXhwAmYFUAAACbgAAAAgbmFtZX9TRFUAABEUAAAC1HBvc3RTPTq8AAAT6AAAAHxwcmVw4AA8rAAAEPwAAAAQAAIALAAvA2wCogADAAcAF7gAHisAugAHAAQAISu6AAMAAAAhKzAxASE1IRMhNSEDS/0BAv8h/MADQAI7Z/2NZwAEABP//wOFAtIAEwAXABsAIwCnuAAeK7gAJC+4AAkvuAAI3LgAANC4AAgQuAAD0LgACRC4AA3QuAAJELgAEdC4ACQQuAAc0LgAHC+6AB8AHAAIERI5uAAh3AC4ABIvuAAeL7gACC+4ABQvuAAYL7gAIi+6AAUABgAhK7oAAQACACEruAAGELgACtC4AAUQuAAM0LgAAhC4AA7QuAABELgAENC6AB0ACAAeERI5uAACELgAINC4ACAvMDEBMxUjETMVIxUjNSM1MxEjNTM1MwMjEzMBIwMzBSMTMwczESMCk+/vRkaIRkbv74j6fTF8Abx8MX39E1VwhkUlgQKOYv6ZYmRkYgFnYkP9LgH9/gMB/TkBD6j91gAAAgAR//4DhwLSABMALACruAAeK7oADQAOACErugAeACkAISu6AAYABwAhK7oAEAAOAAYREjm6ABEADgAGERI5ugAVACkAHhESOboAGgAOAAYREjm6ACQADgAGERI5uAAGELgALtwAugAmACMAISu6ABIACwAhK7oAGwAcACErugAYABUAISu4AAsQuAAA3LgAB9y4AA3QuAAAELgAD9C6ABAACwASERI5uAAbELgAFNC4ABwQuAAq0DAxATIeAh0BIzU0JiMhFSM1ISczFwM3ITUhFQczFSEVFA4CKwE3MzI2PQEhNQMZFygeEYoSDv2/iwFzGZcZOU/+jQIhYOP+4BEeKBfxJ44NEv54ApoRHigXSjYNElW4ODj+kmljQ4ljXRcoHhFXEg1VYwAAAQAH//8DkQLRADMAhbgAHiu6AA4AGQAhK7gADhC4AArQuAAZELgAHNC4ABkQuAAg0LgADhC4ACbQALgAJC+4ACkvuAAtL7oAFgATACErugAoAAkAISu4ABMQuAAD0LoABwATABYREjm4AAkQuAAd0LgAKBC4AB/QuAAoELgAK9C4AAkQuAAv0LgACRC4ADHQMDEBMwcXIycHIyUnIRUzBxUUDgIrATczMjY9ASM3NSM1MzUHNSUVBxUzJzMXMyczEysCFwLjro9akDaErwEIPv79j48RHigWtiZYDRKFhZubmwGVdOBAkD9FPIVdPUhCGwF5gfmXd+6tLZyFFyceEVYSDRiRnWJDD1koWQtRsrKy/uxLAAAFABT//gOEAtIADAATABcALQAxARG4AB4rugATAAkAISu6AAMAEAAhK7oAHAAnACErugAAABAAAxESOboAAQAJABwREjm4ABAQuAAU0LgAExC4ABXQugAYAAkAHBESObgAHBC4ABnQugAiAAkAHBESOboAKwAJABwREjm6AC0ACQAcERI5ugAvAAkAHBESOboAMQAJABwREjm4ABwQuAAz3AC6AA0AIgAhK7oAGQAbACErugAtACkAISu6AAEAFAAhK7oAFwARACErugAwAC4AISu4AC0QuAAA0LgAIhC4AAjQuAAIL7gAIRC4AAnQuAAJL7gAARC4AArQuAAiELgAJNy4ABsQuAAo0LgAGxC4ACrQuAApELgAK9C6ADEAEQAXERI5MDEBBzMRFA4CIyERMzcTMjY9ASMVEyMVMwEhHQERFA4CIyE3MzI2NRErAjczAyczFwETLbYRHigW/uU8LnQOEnNzc3MBVQEdEh4oFv7zJ6oNErMibzeRM12SXQLSUP3sFygeEQKCUP2REg10kwG8xwE6Bl3+PRcoHhFXEg0Bu6P+NL+/AAAGABQAAgODAs4AFwAbACIAJgAqADoA17gAHiu6ADAAMQAhK7oAGwANACErugAHAAgAISu6AAAAHwAhK7gADRC4AArQuAANELgAD9C4AAgQuAAR0LgABxC4ABPQuAAAELgAFdC4AAgQuAAY0LgABxC4ACHQuAAwELgAK9C4ADEQuAA10AC4AAcvuAAjL7gAKC+4ADAvuAASL7gAOS+6ABwABQAhK7oAEAAOACErugAtAC4AISu4AAUQuAAJ0LgAEBC4ABTQuAAc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") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.twoFont{

  font-family: PangMenZhengDao;

  font-weight: bold;

  color: #f00;

}

说明:使用第三方字体步骤

1:下载需要的字体

2:需要访问Online @font-face generator — Transfonter网站添加字体文件以及导出,操作流程如下:

3:导入下载的文件到wxss里面,也就是

然后在“font-family: PangMenZhengDao;”里面进行设置就可以了;

3:注意点

因为微信小程序的代码上传的时候文件大小不能超过2M;所以直接拿一个字体库放在项目里面是不可以的;因此假如需要第三方字体的话;需要根据如上的操作,吧需要的字体抽取出来;然后在前端界面进行显示的预览;

留个脚印吧

大家要是感觉此篇文章有意义;那就给个关注、点赞,收藏吧;

也可以关注文档末尾公众号

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了