本来想着新账号的第一篇 要来点仪式感之类的 后来想想 每次都这样 一旦有了仪式感 如果后续没坚持下去 就会整段垮掉 别说日更周更 直接会破罐破摔 不更了

所以这次换换思路 想到什么写什么 只是想保持一个不间断分享和记录的习惯 无他 希望能不间断 并且不水文字的坚持很久

分享下我怎么给客户的小程序用上其他字体的 之前开发过许多 都是正常小程序提供的原生字体 23年有个客户问我 有没办法给我的程序用上和其他小程序不一样的字体 至少看着个性一些

因为甲方爸爸有实力 然后就学习了下关于字体更换和商用授权等等方面的一些信息 印象里当时有好多办法 但是好像都挺繁琐 而且之前微信小程序代码包的大小有限制 用老办法做的其他字体大部分打包完都会超过代码包打包限制 比较不友好

后来经过这几年的更新迭代 近一年都在用阿里巴巴iconfont的 包括图标和字体 挺方便 在程序里部署和使用也相对简单 下面分享一下 没什么高深的技术 也算是做个技术记录

1.打开官网：

https://www.iconfont.cn/

没注册的一般都需要注册登录一下

2.顶部的菜单里 按照下图找到字体库

栏目里有几个可以选择的字体 选一个自己喜欢的[字体这个还是挺多坑 如果项目大 或者曝光量多的 还是建议去 字由 或者其他正规品牌里购买字体正规商用 避免麻烦]

如果可以免费使用的 一般都会有明显的提醒标识 记得注意看 字体侵权还是挺麻烦的

3.选上自己喜欢的字体之后 右边那个按钮 字体包下载 下载完成之后 一般都是个.zip的压缩包 解压以后里面会有字体文件

我一般会在小程序里引用 .woff 的字体文件 文件名改不改都ok 然后把字体包传到自己的图床[对象存储]里 图床的话 项目里换着使用阿里和七牛 近一年大部分使用的是七牛 如果有需要的可以喊喊 晚点也写一写七牛连接小程序的使用

4.扯远了 我的习惯一般会把 .woff 字体文件上传到图床里 然后获取一个cdn加速域名 类似

https://xxx-cdn.com/AlimamaDongFangDaKai-Regular.woff

[记得图床还是得做下时间戳防盗链或者各种鉴权之类的 CDN被盗刷还是蛮糟心的]

5.接下来到小程序里 app.js 文件 加上字体加载代码

第一个箭头的值可以自己写 按照自己习惯填喜欢的就OK

第二个箭头的值 填你做好的图床字体CDN连接[格式得稍微注意下 写错了会识别不出来]

6.如果需要整个程序加载新字体 在app.wxss里 加上下面的代码

如果只是程序里的某一个页面用 那就单独在那个页面文件的.wxss里加上面这段代码 比如只有主页需要使用 在index.wxss里加上就ok

7.如果你什么都没写错 程序重载刷新之后 就可以看到字体效果了[上图是小程序原生字体的效果 下图是加载了阿里字体的效果]

至此 所有步骤就这样 有需要的话可以尝试着更换一下 如果没效果记得检查一下是不是有代码写错或者像我一样 图床那边欠费了...

保持好奇 不断进步 下期见~