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

news2024/10/7 6:44:15

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

第一是把字体下载到本地

第二种是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/YouSheBiaoTiHei-2.ttf');
      font-weight: normal;
      font-style: normal;
}
.text{
    font-family: 'Source';
}
    </style>
</head>
<body>
    <!-- 只要是YouSheBiaoTiHei-2.ttf这种字体的 都在这里转化,千万不要删除已转换的文字,不然的话之前转化的文字字体就没效果 -->
    <p class="text">我是需要转化的文字,ABCD123</p>
</body>
</html>

第三步:在根目录下运行

font-spider ./demo.html

这时候文件已经被压缩了

这时候再打开页面

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

font-spider ./demo.html

不然的话没效果,

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

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

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

相关文章

日常-----最爱的人

今日话题 大家好嗷&#xff0c;今天聊的技术可比之前的重要的多啊&#xff0c;哼哼&#xff0c;也不是今天&#xff0c;大家像我看齐嗷&#xff0c;我宣布个事情&#xff01;&#xff01;&#xff01; 于2024年6月21日晚上&#xff0c;本人遇到了这一生最爱的人 嘿嘿 这种事…

一、Vue 世界初探

我们既然使用idea,当然需要一些配置&#xff0c;不使用idea 的可以忽略。 1、我们打开settings 下载vue.js 插件&#xff0c;然后重启。打开我们创建的项目zlflovemmVue 2、配置js 版本 ECMAScript6 3、HTML 增加 .vue 支持 4、启动项目&#xff0c;在edit Configurations 中增…

【Pandas驯化-15】Pandas中几个特征工程函get_dummies、factorize、diff、rank技巧

【Pandas驯化-15】Pandas中几个特征工程函get_dummies、factorize、diff、rank技巧 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 相关内…

JAVA SDK 整合 AI 大语言模型

目前主流模型厂商的 SDK 并没有很好的支持 JAVA 环境&#xff0c;主流还是使用的 Python &#xff0c;如果希望将 AI 功能集成到业务中来&#xff0c;则需要找找有没有一些现成的开源项目&#xff0c;但是这种项目一般需要谨慎使用&#xff0c;以防有偷取 app_key 等风险问题 前…

python爬虫必须要高匿IP吗 ?

各个平台搜索关键词就可以找到不同品牌的代理IP了。 找倒是不难&#xff0c;难的是能从中挑选出靠谱且合适的代理品牌。 在选择代理IP这块&#xff0c;不建议使用免费和超低价的代理&#xff0c;因为这一类的代理往往非常不稳定&#xff0c;很多都被网站拉黑过&#xff0c;特…

比较(四)利用python绘制平行坐标图

比较&#xff08;四&#xff09;利用python绘制平行坐标图 平行坐标图&#xff08;Parallel coordinate plot&#xff09;简介 平行坐标图可以显示多变量的数值数据&#xff0c;最适合用来同一时间比较许多变量&#xff0c;并表示它们之间的关系。缺点也很明显&#xff0c; 不…

Pandas中将列类型从字符串转换为日期时间格式

在Pandas中处理数据时&#xff0c;遇到时间序列数据并不罕见&#xff0c;我们知道Pandas是在python中处理时间序列数据的非常有用的工具。 让我们看看如何将字符串的字符串列&#xff08;dd/mm/yyyy格式&#xff09;转换为datetime格式。如果日期的格式不正确&#xff0c;我们…

分享:Khoj:你的全能AI助手

在数字化时代&#xff0c;我们每天都会面对海量的信息&#xff0c;如何高效地管理和检索这些信息&#xff0c;同时提升工作效率&#xff0c;成为了许多人关注的焦点。为此&#xff0c;Khoj应运而生——一个功能强大、灵活多变的个人化AI助手&#xff0c;旨在助力用户轻松驾驭信…

AI绘画Stable Diffussion 实操教程: 真人图片秒变动漫风,亲手绘制你的专属动漫头像

大家好&#xff0c;我是向阳 你是否曾幻想过自己置身于动漫世界&#xff0c;拥有那些令人羡慕的二次元特征&#xff1f;随着人工智能技术的飞速发展&#xff0c;这一幻想已不再遥不可及。在本文中&#xff0c;我们将一起揭开Stable Diffusion技术的神秘面纱&#xff0c;探索如…

STM32学习笔记(十一)--SPI总线协议详解

概述&#xff1a;Serial Peripheral Interface&#xff0c;一组多从 传输速率比I2C快 但是线多 无应答 是一种同步&#xff08;具有时钟线需要同步时钟SCL&#xff09;、串行&#xff08;一位一位的往一个方向发送&#xff09;、全双工&#xff08;发送接收同时&#xff09;通…

Nvidia Isaac Sim图编程OmniGraph 入门教程 2024(6)

Nvidia Isaac Sim 入门教程 2024 版权信息 Copyright 2023-2024 Herman YeAuromix. All rights reserved.This course and all of its associated content, including but not limited to text, images, videos, and any other materials, are protected by copyright law. …

嵌入式实验---实验八 ADC电压采集实验

一、实验目的 1、掌握STM32F103ADC电压采集程序设计流程&#xff1b; 2、熟悉STM32固件库的基本使用。 二、实验原理 1、使用STM32F103R6采集可变电阻上的电压信号&#xff0c;并通过计算把当前ADC转换值和电压值显示在LCD1602液晶屏上&#xff1b; 2、对照电压表读数&…

《昇思25天学习打卡营第1天|ghqt》

参与这个类活动&#xff0c;我会坚持完成它的。目前MindSpore文档里面的内容还看的不是很懂&#xff0c;希望自己在能不断进步。 第一天学到的内容—— 昇腾应用使能&#xff1a;华为各大产品线基于MindSpore提供的AI平台或服务能力MindSpore&#xff1a;支持端、边、云独立的…

【自然语言处理系列】安装nltk_data和punkt库(亲测有效)

目录 一、下载nltk_data-gh-pages.zip数据文件 二、将nltk_data文件夹移到对应的目录 三、测试 四、成功调用punkt库 问题&#xff1a; 解决方案&#xff1a; 在使用自然语言处理库nltk时&#xff0c;许多初学者会遇到“nltk.download(punkt)”无法正常下载的问题。本…

FL Studio 21.2.3官方中文版重磅发布,手把手教你图文安装

FL Studio 21.2.3官方中文版重磅发布纯正简体中文支持&#xff0c;更快捷的音频剪辑及素材管理器&#xff0c;多样主题随心换&#xff01; 在数字音乐制作领域&#xff0c;FL Studio一直以其强大的功能和用户友好的界面而备受赞誉。随着技术的不断进步和音乐制作需求的日益增长…

HarmonyOS Next开发学习手册——应用启动框架AppStartup

概述 AppStartup提供了一种简单高效的初始化组件的方式&#xff0c;开发者可以使用AppStartup来显示的设置组件的初始化顺序以及之间的依赖关系&#xff0c;支持异步初始化组件加速应用的启动时间。开发者需要分别为待初始化的组件实现AppStartup提供的 StartupTask 接口&…

达梦(DM8)数据库备份与还原(逻辑备份)一

一、达梦数据库的逻辑备份分四种级别的导出&#xff08;dexp&#xff09;与导入&#xff08;dimp&#xff09;的备份 第一种是&#xff1a;数据库级&#xff1a;导出或导入数据库中所有的对象。主要参数是&#xff1a;FULL 第二种是&#xff1a;用户级别&#xff1a;导出或导…

Kafka精要

Apach Kafka 是一款分布式流处理框架&#xff0c;用于实时构建流处理应用。它有一个核心 的功能广为人知&#xff0c;即 作为企业级的消息引擎被广泛使用 kafka设计 Kafka 将消息以 topic 为单位进行归纳 将向 Kafka topic 发布消息的程序成为 producers. 将预订 topics 并消…

实例080 进度条百分比显示

本文仅供学习交流&#xff0c;严禁用于商业用途&#xff0c;如本文涉及侵权请及时联系本人将于及时删除 目录 1.实例说明 2.技术要点 3.实现过程 4.实例结果 5.示例拓展 2.10 进度条控件典型实例进度条控件&#xff08;Progress&#xff09;用于显示程序的进度&#xff0c…

乐鑫云方案研讨会回顾|ESP RainMaker® 引领创业潮,赋能科创企业

近日&#xff0c;乐鑫信息科技 (688018.SH) ESP RainMaker 云生态方案线下研讨会和技术沙龙在深圳成功举办&#xff0c;吸引了众多来自照明电工、新能源、安防、宠物等垂类领域的客户与合作伙伴。活动现场&#xff0c;与会嘉宾围绕产品研发、测试认证、品牌构建、跨境电商等多维…