最近在用到小程序的字体，用起是真的有一丝烦躁，各种莫名其妙的bug。下面做一些总结，免得大家犯同样的错误，同样也希望官方能出一个详细的字体解决说明。 问题原因： 首先使用字体无非就是用font-family，在网页上是有很多很好的探讨的文章。但是在小程序中，我们并不知道font-family支持哪些字体，据我这一周的查找，官方也没有详细的说明。 因此如果我们想使用某种字体，最好的方法只有通过font-face外部引入字体。 但是小程序是不支持引入本地的字体文件，即font-face中的src属性的值不能是本地路径。否则会报do-not-use-local-path错： [图片]     因此我所知道的最终的解决方案就有两种     1.引入网络路径     2.通过base64编码引入     ①引入网络路径的方法是将你的字体文件放在服务器中，然后通过网络路径引入，需要注意跨域的问题（可能因为我把字体文件放在腾讯云的对象存储中了，因此没有专门处理跨域也没有问题，但是不排除你可能会遇到跨域问题）。使用这种方法时要注意字体文件不能太大，具体限制我也不清楚。这里我只测试过3M的中文字体，会报ERR_CACHE_MISS[图片]，这个情况下，虽然在开发工具上显示的字体是正确的，但是预览到真机上就直接表现为字体文件没有加载的效果。（另外，即使你的字体文件很小，也会在 清除缓存后第一次编译 报这个错，但这种情况下预览到真机上是没有问题的） ②第二种方式就是通过base64编码引入。使用这种方法时需要注意一点，很多转base64编码的工具（例如我这里使用的font-min）会自动帮你兼容ie，生成的代码像这样：[图片] 在网页上这样用是没有问题的，还兼容其他浏览器。 但是在小程序中是不行的，必须把多余的部分全部删除，只留base64那一行，不然在开发工具上显示直接没有加载字体的效果，像这样： [图片] 另外据说base64编码不能太大，否则也会出错；这里由于我的需求只是需要几个固定文字，因此生成的base64很小，没有遇到这个问题。 以上就是我在处理小程序字体时遇到的问题总结，希望大家遇到时能少走弯路； 总结的不对的地方，欢迎大家讨论指正。

背景 俗话说，产品有三宝：弹窗、浮层加引导，足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来说，实现一个模态框基本都可以达到信手拈来的地步，但是，当模态框里边的内容滚动起来以后，就会出现各种各样的让人摸不着头脑的问题，其中，最出名的想必就是滚动穿透。 什么是滚动穿透？ 滚动穿透的定义：指我们滑动顶层的弹窗，但效果上却滑动了底层的内容。 具体解决方案分析如下： 改变顶层：从穿透的思路考虑，如果顶层不会穿透过去，那么问题就解决了，所以我们尝试给蒙层加catchtouchmove，但是发现部分场景无效果，那么就不再赘述了。 改变底层：既然是顶层影响了底层，要是底层不会滚动，那就没这个问题了。 如何改变底层解决该问题呢？ 不成熟方案： 底部页面最外层view设置position: fixed;页面不可滚动，但是这个时候会导致页面回到顶部。 滚动时监听滚动距离，弹窗时记录滚动位置，关闭弹窗后使用wx.pageScrollTo回滚到记录的位置。 成熟方案 使用page-meta组件，通过该组件我们可以操作Page的style样式，类似于h5里body设置overflow: hidden; 控制页面不可滚动。文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html 使用wx.setPageStyle设置overflow: hidden， 也可以实现给Page组件设置样式。） page-meta组件： 通过该组件我们可以直接操作[代码]Page[代码]组件 ，我们给它的wxss样式overflow动态设置[代码]hidden[代码]or[代码]visible[代码]or[代码]auto[代码] 就可以控制整个页面是否可以滚动。 [图片] wx.setPageStyle方法： 调用这个api，动态设置它为hidden/auto，用于控制页面是否可滚动，主要用于页面组件内使用，比如封装好的弹窗组件，就不用单独写page-meta组件了。。 [代码]wx.setPageStyle({ style: { overflow: 'hidden' // ‘auto’ } }) [代码] 老规矩，结尾放代码片段： https://developers.weixin.qq.com/s/U6ItgQmP7upQ 拓展 支付宝小程序虽然存在page-meta组件，但是由于内核为69版本，给page设置overflow: hidden 也无法控制底部元素不可滚动，目前已联系支付宝的底层开发同学提供API控制页面disableScroll，目前正在封装Appx，近期开放。