小程序中用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了 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【人工智能】—基于K-Means算法商场顾客聚类实战教程

在这篇博文之前一直是给大家做机器学习有监督学习教程&#xff0c;今天来一篇无监督学习教程。 K-Means算法是一种基于中心的聚类方法&#xff0c;它试图找到数据点的K个簇&#xff0c;使得簇内的数据点尽可能相似&#xff0c;而簇间的数据点尽可能不同。下面是K-Means算法的详…

Spring Boot集成tablesaw插件快速入门

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

未定义行为总结

解引用空指针&#xff0c;例如解引用空的this指针、解引用空的函数指针 下面的代码尽管能正常运行&#xff0c;但c->fun()等价于(*c).fun()&#xff0c;也就是对空指针解引用了 #include <iostream> struct C {void fun(){std::cout<<"fun"<<st…

苹果cms10影视网整站源码下载/苹果cms模板MXone Pro自适应影视电影网站模板

下载地址&#xff1a;苹果cms10影视网整站源码下载/苹果cms模板MXone Pro自适应影视电影网站模板 模板带有夜间模式、白天晚上自动切换&#xff0c;有观影记录、后台设置页。全新UI全新框架&#xff0c;加载响应速度更快&#xff0c;seo更好&#xff0c;去除多余页面优化代码。…

Ubuntu 22.04 下 CURL(C++) 实现分块上传/下载文件源码

为了帮助大家理解代码&#xff0c;先介绍文件上传/下载流程&#xff1a; 上传文件流程说明&#xff1a;首先向服务器 restful api 接口 /common发送 Post 请求 &#xff0c;服务器端返回 project guid。读取本地文件&#xff0c;按照给定 chunk_size&#xff08;例如 10240 by…

java中函数式编程apply的用法实例?

在Java中&#xff0c;函数式编程的概念主要体现在Lambda表达式、函数接口以及Stream API的使用上。"apply"这个术语通常与函数式接口中的抽象方法关联&#xff0c;比如Function<T, R>接口中的apply方法。这个方法接收一个类型为T的输入参数&#xff0c;并返回一…

从零开始搭建创业公司全新技术栈解决方案

从零开始搭建创业公司全新技术栈解决方案 关于猫头虎 大家好&#xff0c;我是猫头虎&#xff0c;别名猫头虎博主&#xff0c;擅长的技术领域包括云原生、前端、后端、运维和AI。我的博客主要分享技术教程、bug解决思路、开发工具教程、前沿科技资讯、产品评测图文、产品使用体…

Ollma本地大模型沉浸式翻译【403报错解决】

最终效果 通过Chrome的 沉浸式翻译 插件&#xff0c;用OpenAI通用接口调用本地的Ollma上的模型&#xff0c;实现本地的大模型翻译文献。 官方文档指导的Ollama的配置&#xff1a;一定要配置环境变量&#xff0c;否则会出现【403报错】

GoogLeNet(InceptionV3)模型算法

GoogLeNet 团队在给出了一些通用的网络设计准则&#xff0c;以期望在不提高网络参数 量的前提下提升网络的表达能力&#xff1a; 避免特征图 (feature map) 表达瓶颈&#xff1a;从理论上讲&#xff0c;尺寸 (seize) 才包含了相关结构等重要因素&#xff0c;维度(channel) 仅仅…

torch.optim 之 Algorithms (Implementation: for-loop, foreach, fused)

torch.optim的官方文档 官方文档中文版 一、Implementation torch.optim的官方文档在介绍一些optimizer Algorithms时提及它们的implementation共有如下三个类别&#xff1a;for-loop, foreach (multi-tensor), and fused。 Chat-GPT对这三个implementation的解释是&#xf…

账号和权限的管理

文章目录 管理用户账号和组账号用户账号的分类超级用户普通用户程序用户 UID&#xff08;用户id)和(组账号)GIDUID用户识别号GID组标识号 用户账号文件添加用户账号设置/更改用户口令 管理用户账号和组账号 用户账号的分类 超级用户 root 用户是 Linux 操作系统中默认的超级…

React state 更新时机以及强制更新

设置 state 只会为下一次渲染变更 state 的值 一个 state 变量的值永远不会在一次渲染的内部发生变化 React 会使 state 的值始终"固定"在一次渲染的各个事件处理函数内部 React 会等到事件处理函数中的所有代码都运行完毕再处理 state 更新 用 flushSync 可以同步更…

PostgreSQL查询用户

在 PostgreSQL 中&#xff0c;可以通过查询系统表来确定当前用户是否是超级管理员&#xff08;超级用户&#xff09;。具体来说&#xff0c;可以使用 pg_roles 系统表&#xff0c;该表包含数据库中所有角色的信息。 以下是查询当前用户是否是超级用户的 SQL 语句&#xff1a; …

第N5周:调用Gensim库训练Word2Vec模型

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制&#x1f680; 文章来源&#xff1a;K同学的学习圈子 目录 本周任务: 1.安装Gensim库 2.对原始语料分词 3.停用词 4.训练Woed2Vec模型 …

办展览如何盈利?论办展的商业模式

想要弄清楚办展览怎么赚钱这个问题&#xff0c;我可以来说说。 首先来说说展览收益的大头&#xff1a;门票收入。 这个其实是可以大致预测的。简单来说&#xff0c;就是用流量乘以到店率。 但别忘了&#xff0c;这背后得有合适的展览定位、方便的展览场地和合理的票价。 说…

封禁SSH登录的IP

在公网上开放SSHD服务时常被黑客扫描&#xff0c;可用以下方式封禁其IP&#xff1a; 1. 在/etc/hosts/deny中加&#xff1a;sshd: /etc/sshd.deny.hostguard echo "sshd: /etc/sshd.deny.hostguard" > /etc/hosts/deny 2. 然后将/var/log/secure中探测密码的远…

小林图解系统-三、操作系统结构

Linux 内核 vs Windows 内核 内核 作为应用连接硬件设备的桥梁&#xff0c;保证应用程序只需要关心与内核交互&#xff0c;不需要关心硬件的细节 内核具备四个基本能力&#xff1a; 管理进程、线程&#xff0c;决定哪个进程、线程使用CPU&#xff0c;也就是进程调度的能力&a…

Linux——ansible关于“文件操作”的模块

修改文件并将其复制到主机 一、确保受管主机上存在文件 使用 file 模块处理受管主机上的文件。其工作方式与 touch 命令类似&#xff0c;如果不存在则创建一个空文件&#xff0c;如果存在&#xff0c;则更新其修改时间。在本例中&#xff0c;除了处理文件之外&#xff0c;Ansi…

华为设备SSH远程访问配置实验简述

一、实验需求: 1、AR1模拟电脑SSH 访问AR2路由器。 二、实验步骤&#xff1a; 1、AR1和AR2接口配置IP&#xff0c;实现链路通信。 2、AR2配置AAA模式 配置用户及密码 配置用户访问级别 配置用户SSH 访问服务 AR2配置远程服务数量 配置用户远程访问模式为AAA 配置允许登录接入用…

【问题记录】Ubuntu提示: “E: 软件包 gcc 没有可安装候选“

Ubuntu提示: "E: 软件包 gcc 没有可安装候选" 一&#xff0c;问题现象二&#xff0c;问题原因&解决方法 一&#xff0c;问题现象 在虚拟机Ubuntu中进行安装gcc命令时报错&#xff1a;“E: 软件包 gcc 没有可安装候选”: 二&#xff0c;问题原因&解决方法 …