最近做小程序 RPshare 的时候,设计稿使用到了优设标题黑的字体,实际搭建的时候使用到了 base64 压缩字体直接纯代码引入的方法,我个人是比较喜欢这种方法的,比起来添加文件,用纯代码解决更简单方便些。刚好最近有人问到了我中文字体压缩引入的办法,虽然博客之前写过,但是里面压缩字体的网站失效,并且步骤也较为繁琐,不够优雅,遂写下了这篇帖子。
准备工作
- nodejs 安装字蛛
- 需要压缩的字体文件重命名
font.ttf
- 一个
font.html
文件
安装字蛛
如果已经安装过nodejs环境的用下面命令直接安装就可以了,没安装nodejs的请看这里
npm install font-spider -g
font.html 文件
创建一个 font.html 文件,这个是字蛛压缩字体必须要用到的步骤,内容如下,把 div
里的内容替换成你需要的文字,压缩出来的文件将包含这些文字,字蛛会自动去重,所以重复了也没关系。
<!DOCTYPE html>
<html lang="en">
<style>
@font-face {
font-family: font;
src: url("./font.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM文件库图片代码新建代码取分享功能暂未开放!可申请文件分享权限改删更简介::快速打
</div>
</body>
</html>
<style>
div{
font-family: font;
}
</style>
开始压缩
创建好的 font.html
文件和 font.ttf
文件放在同一目录下,右键点击文件夹空白处,选择 在此处打开Powershell窗口 ,输入以下命令
font-spider font.html
出现这样的命令,就代表压缩成功了,原文件夹下的 font.ttf
被替换为了压缩后的字体文件,未压缩的原字体文件在字蛛新建的文件夹 .font-spider
下,如果习惯直接使用文件就可以在网页上直接使用了,由于微信小程序不支持直接使用字体文件,需要网络链接的字体文件,或者 base64 直接引入。我需要把字体转换为 base64 代码。
字体转换为 base64
我自己使用的是这个网站,打开 Base64 encode
选项,关闭下边几个字体文件的勾选(非必要,勾选的话会生成这几种字体文件),因为我需要的仅 base64 ,就取消勾选了。
Add font
选择你使用字蛛压缩的字体文件,然后 Convert
, Download
下载压缩后打包的文件,里面 style.css
就是 base64 的压缩后的字体引入代码,接下来把他添加到你的 css 文件即可,小程序可以添加到全局 css 文件里,这样所有页面都可以使用这个字体了~
本文作者:自在废物
本文链接:https://rabithua.club/archives/719/
版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
一开始我也是用的字蛛,后来找到Fontmin,一键生成真的秒杀一切工具
搜了下,好像是挺好用的👍
能不能支持对接流量主呀,能那种看广告阅读全文的
可以的,微信有接口,不过可能要一些资质之类的,你可以翻翻微信文档了解一下,我自己这边没做流量主的功能
感谢分享,赞一个
要是能写一个一键转换的脚本就好了