当前位置: 首页 > news >正文

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

相关文章:

  • 异地如何共享视频文件?
  • 指定GPU跑模型
  • 易优cms远程调试
  • CDN缓存命中率较低可能的原因
  • 无人机校企合作
  • Python学习笔记15:进阶篇(四)文件的读写。
  • vue 中实现用户上传文件夹的功能
  • 容器基本概念_从虚拟化技术_到容器化技术_开通青云服务器_并远程连接_容器安装---分布式云原生部署架构搭建007
  • 通过MindSpore API实现深度学习模型
  • 聚合大模型场景助力产业升级,WAIC 2024 容联云论坛即将开幕
  • 一键掌控,4G红外插座引领智能生活新潮流!
  • 21、24年--项目管理概论——项目经理的角色
  • Spring Boot集成tensorflow实现图片检测服务
  • 2024广东省职业技能大赛云计算赛项实战——编排部署ERP管理系统
  • 如何设计一个点赞系统
  • ES6指北【2】—— 箭头函数
  • 【翻译】Mashape是如何管理15000个API和微服务的(三)
  • Codepen 每日精选(2018-3-25)
  • JavaScript新鲜事·第5期
  • Laravel5.4 Queues队列学习
  • mac修复ab及siege安装
  • Map集合、散列表、红黑树介绍
  • Meteor的表单提交:Form
  • 基于阿里云移动推送的移动应用推送模式最佳实践
  • 免费小说阅读小程序
  • 手写双向链表LinkedList的几个常用功能
  • 推荐一个React的管理后台框架
  • 我的业余项目总结
  • ​14:00面试,14:06就出来了,问的问题有点变态。。。
  • ​520就是要宠粉,你的心头书我买单
  • ​Benvista PhotoZoom Pro 9.0.4新功能介绍
  • # wps必须要登录激活才能使用吗?
  • ###C语言程序设计-----C语言学习(3)#
  • #我与Java虚拟机的故事#连载11: JVM学习之路
  • (3)(3.2) MAVLink2数据包签名(安全)
  • (3)医疗图像处理:MRI磁共振成像-快速采集--(杨正汉)
  • (day 12)JavaScript学习笔记(数组3)
  • (ros//EnvironmentVariables)ros环境变量
  • (转)Linux下编译安装log4cxx
  • (自用)仿写程序
  • ***利用Ms05002溢出找“肉鸡
  • .NET CF命令行调试器MDbg入门(一)
  • .NET IoC 容器(三)Autofac
  • .NET(C#) Internals: as a developer, .net framework in my eyes
  • .NET未来路在何方?
  • .NET之C#编程:懒汉模式的终结,单例模式的正确打开方式
  • .php文件都打不开,打不开php文件怎么办
  • .pop ----remove 删除
  • /run/containerd/containerd.sock connect: connection refused
  • @GlobalLock注解作用与原理解析
  • [ C++ ] STL priority_queue(优先级队列)使用及其底层模拟实现,容器适配器,deque(双端队列)原理了解
  • [30期] 我的学习方法
  • [AI Embedchain] 开始使用 - 全栈
  • [android] 切换界面的通用处理
  • [Angular] 笔记 9:list/detail 页面以及@Output