rabithua: "最近做小程序 RPshare 的时候，设计稿使用到了优设标题黑的字体，实际搭建的时候使用到了 base64 压缩字体直接"

rabithua·2 years ago

最近做小程序 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

微信截图_20220717130455.png

出现这样的命令，就代表压缩成功了，原文件夹下的 font.ttf 被替换为了压缩后的字体文件，未压缩的原字体文件在字蛛新建的文件夹 .font-spider 下，如果习惯直接使用文件就可以在网页上直接使用了，由于微信小程序不支持直接使用字体文件，需要网络链接的字体文件，或者 base64 直接引入。我需要把字体转换为 base64 代码。

字体转换为 base64

我自己使用的是这个网站，打开 Base64 encode 选项，关闭下边几个字体文件的勾选（非必要，勾选的话会生成这几种字体文件），因为我需要的仅 base64 ，就取消勾选了。

微信截图_20220717130940.png
Add font 选择你使用字蛛压缩的字体文件，然后 Convert , Download 下载压缩后打包的文件，里面 style.css 就是 base64 的压缩后的字体引入代码，接下来把他添加到你的 css 文件即可，小程序可以添加到全局 css 文件里，这样所有页面都可以使用这个字体了~