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

这篇具有很好参考价值的文章主要介绍了微信小程序自定义字体样式、字体修改、第三方字体设置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

🍅希望此文章可以帮助到您🍅

微信小程序文章推荐

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

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

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

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

微信小程序绘制marker

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

方法一：本地字体

小程序文本设置,微信小程序,微信小程序,小程序

1：前端界面

<view style="padding: 50rpx;">

  <view style="text-align: center;padding: 50rpx;font-size: 35rpx;font-weight: bold;">字体设置</view>

  <view class="oneFont">

    1：我是第一种字体

  </view>

  <view  style="font-size: 30rpx;margin-top: 20rpx;">

    说明：直接使用（font-family: 楷体）进行字体设置

  </view>

</view>

2：css样式

.oneFont{

  font-family: 楷体;

  font-weight: bold;

  color: #f00;

}

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

小程序文本设置,微信小程序,微信小程序,小程序

方法二：第三方字体

说明：假如你需要使用系统以外的字体的话，那么就需要如下操作；

小程序文本设置,微信小程序,微信小程序,小程序

1：前端代码

  <view class="twoFont" style="margin-top: 50rpx;">

    2：我是第二种字体

  </view>

  <view style="font-size: 30rpx;margin-top: 20rpx;">

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

  </view>

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;

}