小程序使用自定义字体

可乐西瓜冰

于 2024-08-06 15:54:25 发布

阅读量376

点赞数 4

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_49012497/article/details/140957024

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用font-spider压缩字体

参照的帖子连接

下载安装node.js和安装npm我就不多说了，网上一大堆，可以去查查，编译器我是用vscode编译器。

第一步新建一个文件，在vscode打开，安装font-spider如下：

安装语句 npm install font-spider -g

在新建一个html文件，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'Source';
      src: url('./font/YeZiGongChangZuiHanJiangXingCao-2.ttf');
      font-weight: normal;
      font-style: normal;
}
.text{
    font-family: 'Source';
}
    </style>
</head>
<body>
    <!-- 只要是YouSheBiaoTiHei-2.ttf这种字体的 都在这里转化，千万不要删除已转换的文字，不然的话之前转化的文字字体就没效果 -->
    <p class="text">孤心浪客</p>
</body>
</html>

第三步在根目录下执行此语句

font-spider ./demo.html

我截了个图说明一下，大家可以看看
在这里插入图片描述

以上是在vscode通过一系列手段得到得字体压缩文件，接下来是要把得到的字体文件转换成base64格式

这个是字体转base64格式的网址：https://transfonter.org/
按照下面步骤，把之前字体压缩包，按照流程走一遍
这是具体操作
下载后会得到一个压缩包，解压完会得到这样的文件夹
在这里插入图片描述
在编译器内打开stylesheet.css这个文件

把这串代码复制到小程序用到这个文字得WXSS文件内，然后就可以使用了，案例：

大功告成

最重要的一件事！！！

如果你在小程序中要用这个字体包时，你要改变的文字，必须是在demo中出现的文字，不然的话，在小程序中是没有变化的，所以，你想改变，就只能先在demo.html把你需要的文字加进去压缩

可乐西瓜冰

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
小程序使用自定义字体

如果你在小程序中要用这个字体包时，你要改变的文字，必须是在demo中出现的文字，不然的话，在小程序中是没有变化的，所以，你想改变，就只能先在demo.html把你需要的文字加进去压缩。这个是字体转base64格式的网址：https://transfonter.org/安装语句 npm install font-spider -g。下载后会得到一个压缩包，解压完会得到这样的文件夹。按照下面步骤，把之前字体压缩包，按照流程走一遍。我截了个图说明一下，大家可以看看。
复制链接

扫一扫

专栏目录