小程序中用font-spider压缩字体后,字体没效果(解决办法)

因为项目中需要引入外部字体,有两种方案,

第一是把字体下载到本地

第二种是cdn请求服务器放字体的地址 

但是小程序是有大小限制的,所以必须要压缩字体大小,这时候有些人就说了,那把字体放在服务器上,请求它就完了呀,拜托,字体大的话,请求不花时间吗,会造成页面初始化的时候,字体没请求出来,或者请求完成后由初始化字体转换成需要的字体闪烁,体验感不佳,这时候就要用font-spider,接下来我就把思路讲一下、

第一步 下载 

npm install font-spider -g

 第二步新建一个文件夹 ,里面的font文件夹放你要的字体,而demo.html里面放你需要转化的文字.

 

demo代码:

<!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/AaYuanWeiTuSi-2.ttf');
      font-weight: normal;
      font-style: normal;

}
.text{
    font-family: 'Source';
}
    </style>
</head>
<body>
    <div class="text">如果给我一次机会SADSADSDA广泛大锅饭大概,我要asdfdgSFDAFDSFDF</div>
</body>
</html>

第三步:在根目录下运行

font-spider ./demo.html

这时候文件已经被压缩了

这时候再打开页面

但是要注意的是,如果你在小程序中要用这个字体包时,你要改变的文字,必须是在demo中出现的文字,不然的话,在小程序中是没有变化的,像我demo中有 “我是需要转化的文字”,你在小程序中写这几个字就会字体有变化,其他字是没变化的,所以,你想改变,就只能先在demo.html把你需要的文字加进去压缩,记住只要改变了demo.html里面的代码就必须要

font-spider ./demo.html

不然的话没效果,

然后把你压缩完的字体文件复制到你小程序中去引入就ok了 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/727788.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

从复用性角度阐述中台建设

目录 复用性中台定义深思中台建设产品线形态何时演变中台能力落地中台 业务中台架构总结 技术学习永不止步&#xff0c;最近也是看了很多关于架构设计相关的专栏&#xff0c;慢慢总结出来一部分知识&#xff0c;代入自己的思考与理解&#xff0c;以及结合并反思自己之前公司的架…

windows和linux下清空Redis

前言 在本文中&#xff0c;我们将详尽阐述在Windows与Linux操作系统中有效清除Redis缓存的实践方法&#xff0c;旨在为您提供清晰、高效的指导流程&#xff0c;确保数据管理的灵活性与效率。 windows下推荐两款可视化工具 Another Redis Desktop Manager 这是我用的最多也是最…

安卓手机删除的照片如何恢复?2个有效方法,教你找回

手机相册就像是我们的私人宝藏&#xff0c;里面装满了无数珍贵的回忆。但是&#xff0c;如果你不小心把里面的宝贝照片给删了&#xff0c;那可真是让人欲哭无泪啊&#xff01;删除的照片如何恢复&#xff1f;今天&#xff0c;我要给你介绍几个方法&#xff0c;让你轻松找回那些…

网络编程(二)TCP编程 TCP粘包问题

文章目录 一、TCP网络编程&#xff08;一&#xff09;流程&#xff08;二&#xff09;相关函数1. socket2. bind3. listen4. accept5. connect 二、收发函数&#xff08;一&#xff09;send函数&#xff08;二&#xff09;recv函数 三、TCP粘包问题&#xff08;一&#xff09;将…

linux精通 4.1

2.1.3 http服务器实现 目的 reactor应用——webserver webclient 每次上课前 看大纲down code 复习&#xff1a; 不行啊 编译给的代码报错啊 给的最新的不是0430那一版就不行啊 reactor.c:(.text0x254): relocation truncated to fit: R_X86_64_PC32 against symbol begin de…

Gobject tutorial 八

The GObject base class Object memory management Gobject的内存管理相关的API很复杂&#xff0c;但其目标是提供一个基于引用计数的灵活的内存管理模式。 下面我们来介绍一下&#xff0c;与管理引用计数相关的函数。 Reference Count 函数g_object_ref和g_object_unref的…

车载测试面试项目看这一套就够了!车载测试___自我讲解项目

面试官您好&#xff0c;我叫xx来自安微&#xff0c;今年xx岁&#xff0c;毕业于安微新华学院&#xff0c;我是从2017年开始接触软件测试行业&#xff0c;目前从事软件测试工作有5年多时间&#xff0c;第一家公司做了电商和进销存项目app和web都有做过&#xff0c;上家公司做了车…

Python使用策略模式实现绘图功能

策略模式&#xff08;Strategy Pattern&#xff09;:允许定义一系列算法&#xff0c;将它们封装起来&#xff0c;使得它们可以互换。 实现绘制不同类型的图表&#xff08;如折线图、柱状图和饼图&#xff09;功能。 下面是一个示例&#xff0c;展示如何传入横坐标和纵坐标内容…

Spring Boot集成tablesaw插件快速入门

1 什么是tablesaw&#xff1f; Tablesaw是一款Java的数据可视化库&#xff0c;主要包括两部分&#xff1a; 数据解析库&#xff0c;主要用于加载数据&#xff0c;对数据进行操作(转化&#xff0c;过滤&#xff0c;汇总等)&#xff0c;类比Python中的Pandas库&#xff1b; 数据…

JVM中的垃圾回收机制

文章目录 什么是垃圾为什么需要垃圾回收早期垃圾回收Java的垃圾回收机制垃圾回收主要关注的区域垃圾判定算法引用计数算法可达性分析算法 垃圾收集算法标记清除算法复制算法标记整理算法分代收集思想增量收集算法分区算法 什么是垃圾 垃圾回收&#xff08;Garbage Collection&…

Java面试八股之Mybatis和JPA的区别

Mybatis和JPA的区别 Mybatis 和 JPA&#xff08;Java Persistence API&#xff09;是两种在 Java 应用程序中用于数据持久化的框架&#xff0c;它们各有特点和适用场景。下面是它们之间的一些主要区别&#xff1a; 映射方式&#xff1a; Mybatis 是半自动的 ORM 框架&#xf…

Vue66-vue-默认插槽

一、默认插槽需求 1-1、原本的写法&#xff1a; 在每个category组件中用v-show来做条件渲染&#xff0c;但是不方便&#xff01; 1-2、默认插槽 img标签&#xff0c;ul标签&#xff0c;video标签&#xff0c;都是在app组件中完成解析之后&#xff0c;塞到category组件中的&…

实验室装修公司教你:真菌实验室设计建设的必备技巧

在当今的科学研究和生物技术领域&#xff0c;真菌实验室设计建设显得尤为重要。然而&#xff0c;很多实验室在实际操作中常常面临空间布局不合理、设备配置不当以及环境控制不到位等诸多挑战&#xff0c;导致实验效率低下&#xff0c;甚至危及人员安全。那么要怎么才能设计建设…

【Unity】AssetBundle打包策略

【Unity】AssetBundle打包策略 在游戏开发过程中&#xff0c;AssetBundle(AB)打包策略的重要性不容忽视。游戏开发者往往手动设置游戏资源包名进行管理&#xff0c;难免会造成资源确实或导致冗余&#xff0c;因此对于AB包的打包流程来说&#xff0c;进行策略管理显得十分重要。…

卓越的 App UI 风格引领潮流

卓越的 App UI 风格引领潮流

fastadmin多语言切换设置

fastadmin版本&#xff1a;1.4.0.20230711 以简体&#xff0c;繁体&#xff0c;英文为例 一&#xff0c;在application\config.php 里开启多语言 // 是否开启多语言lang_switch_on > true, // 允许的语言列表allow_lang_list > [zh-cn, en,zh-tw], 二…

Linux环境编程基础学习2

For循环累加求和&#xff0c;两种方式&#xff0c;c方式的运算更快 打开文件操作 cat操作的实现 EOF: 1.diff A B比较两个文件是否一样&#xff0c;一样则什么结果都没有 Od -c 文件名可以显示出文件中的不可见字符

Stable Diffusion WebUI 使用ControlNet:IP-Adapter保持生图的角色一致性

IP-Adapter-FaceID可以在保持人脸一致的条件下生成各种风格的图像。 下载 IP Adapter 需要的 Face ID 模型和 Lora 下载地址&#xff1a;https://huggingface.co/h94/IP-Adapter-FaceID/ 下载 ip-adapter-faceid-plusv2_sd15.bin 和 ip-adapter-faceid-plusv2_sd15_lora.saf…

Linux:文件描述符

文件描述符实际上就是一个小整数 0 & 1 & 2 Linux进程默认情况下会有3个缺省打开的文件描述符&#xff0c;分别是标准输入0&#xff0c; 标准输出1&#xff0c; 标准错误2. 0,1,2对应的物理设备一般是&#xff1a;键盘&#xff0c;显示器&#xff0c;显示器 所以输入输…

SpingBoot快速入门下

响应HttpServietResponse 介绍 将ResponseBody 加到Controller方法/类上 作用&#xff1a;将方法返回值直接响应&#xff0c;如果返回值是 实体对象/集合&#xff0c;将会自动转JSON格式响应 RestController Controller ResponseBody; 一般响应 统一响应 在实际开发中一般…