vue项目中字体文件过大(压缩字体文件)

article/2025/3/10 4:59:58

目前做的一个vue项目当中引入了外部的字体文件,打包之后测试发现加载过慢,需等待较长时间才能看到效果,特此记录在vue项目中压缩字体的操作.

安装字蛛

字蛛是一个中文字体压缩器,通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。
安装方法

npm install font-spider -g

使用方法

首先在项目录当中创建一个font.html文件,并且在static文件夹下创建一个font.css文件,目录文件如图:
目录结构
font.css文件的代码如下图所示:
font.css文件代码图示

@font-face {font-family: 'myFont';src: url('./regular.ttf');
}
#h {font-family: 'myFont';
}

font.html文件的代码如下图所示:
font.html文件代码图示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="stylesheet" href="./static/font.css" /></head><body><h1 id="h">安全高收益</h1></body>
</html>

font.html里的h1标签id对应着font.css里的文字样式

接着在项目目录下执行命令行:

font-spider ./font.html

这里的font.html就是刚刚创建的文件

执行完成之后会自动生成一个压缩之后的字体文件,通过下图可以看到压缩的效果还是非常明显的。
big为源文件,另一个为压缩之后的文件
完成之后在需要使用字体的vue页面引入使用即可
字体使用

End


http://chatgpt.dhexx.cn/article/dQ5XwbNi.shtml

相关文章

或是全球首款接入5G网络手机 华为折叠屏新机2月24日发布

2月21日&#xff0c;华为终端再次宣布2019年2月24日14:00(北京时间2月24日21:00)&#xff0c;旗下首款折叠屏5G手机将在MWC 2019巴塞罗那世界移动大会上正式发布。 在今天官方预告中&#xff0c;华为终端官微强调&#xff0c;自家的折叠屏手机有更多可能&#xff0c;而3天后就是…

几个特别棒的免费可商用字体

免费可商用&#xff0c;且为规避版权风险&#xff0c;所有下载地址都为官方发布地址 站酷免费字体 https://www.zcool.com.cn/special/zcoolfonts/ 【设计师必备 超级棒&#xff0c;有艺术风也有可爱风 每次更新也都在这个地址里】 阿里巴巴普惠体 https://alibabafont.ta…

VS Code中适用于任何中文字体的中英文混合等宽显示的配置方案

在网络上搜索相关配置方案&#xff0c;发现有3种方案&#xff1a;第一种&#xff1a;“VSCode 设置中英混合等宽字体”的作者RJ_Hwang&#xff08;链接“https://www.jianshu.com/p/46fdb5d275a6#comments”&#xff09;&#xff0c;采用等距更纱黑体 SC&#xff08;字体名称配…

Windows Terminal美化增强指南

最终效果 开启复古的 CRT 效果 正常效果 安装 在window商店搜索Windows Terminal&#xff0c;注意不要选择Preview版。 或者在GitHub上下载microsoft/terminal 最开始的样子 查看PowerShell版本 打开PowerShell输入&#xff1a; $PSVersionTable.PSVersion.Major 大家…

github 更纱黑体_【Freeplane相关】一招解决更纱黑体导出思维导图PDF的问题

如下图所示&#xff0c;本人在Freeplane中直接使用更纱黑体导出思维导图PDF&#xff0c;结果导出以后显示的字体却是"方正琥珀"&#xff0c;有时候还会随机崩成其他字体。导出PDF前 导出PDF后 之前在知乎上提了上述问题&#xff0c;链接如下&#xff1a; 想用更纱黑体…

美通社企业新闻汇总 | 百度英业达合作研发超级AI计算平台;《2019大中华薪资指南》发布...

要闻 《2019大中华薪资指南》发布&#xff0c;财会人才需求量依然相当高拜耳推出索来多驱虫项圈&#xff0c;目标中国大城市养宠物女性卡西欧发布与红牛二队最新合作的高性能运动手表百度英业达合作研发超级AI计算平台阿联酋阿布扎比总统府内的文化地标对游客开放Karma汽车在全…

因疫情取消的日内瓦高级钟表展推出线上平台;启迈发布二季度全球供应链报告 | 美通企业日报...

全球抗击新冠疫情 2020“钟表与奇迹”将于4月25日线上揭幕。随着新冠疫情在全球蔓延&#xff0c;今年线下的日内瓦“钟表与奇迹”高级钟表展&#xff08;前身“日内瓦国际高级钟表展”&#xff09;被迫取消&#xff0c;瑞士高级制表基金会迅速做出调整&#xff0c;将于北京时间…

多数CEO预计受疫情影响未来半年收入将下降;上海国际酒店投资加盟展将延期 | 美通企业日报...

全球抗击新冠疫情 关于COVID-19商业影响的新YPO行政总裁全球调查发布。由130个国家超过29000位首席执行官组成的全球领导力社区YPO进行了一项全会员调查&#xff0c;以了解COVID-19的商业影响&#xff0c;了解首席执行官由于这一新的商业现实而采取的行动。调查发现&#xff0c…

中国家电创新成果奖德国IFA揭晓 A.O.史密斯荣获四项年度大奖

南京2018年9月3日电 /美通社/ -- 8月31日&#xff0c;由中国家用电器研究院主办的“第十四届中国家用电器创新成果推介”活动在德国柏林IFA展上举行。经过消费者投票&#xff0c;并结合专家评审&#xff0c;A.O.史密斯继续成绩斐然&#xff0c;不仅再度折桂“年度最具创新力家电…

A.O.史密斯净水新品闪耀德国IFA展 斩获年度产品创新成果奖

南京2018年9月27日电 /美通社/ -- 近日&#xff0c;由中国家用电器研究院主办的“第十四届中国家用电器创新成果推介”活动在德国柏林IFA展上同期举行。最终&#xff0c;经过消费者投票&#xff0c;并结合专家评审&#xff0c;A.O.史密斯“可直接出热水”的净水机 -- 净水热饮机…

消费新品周报 | 老板推出新款消毒柜;A.O.史密斯橱下冷热即饮净水机上市

摘要 老板、A.O.史密斯、Gululu、阿迪达斯、安踏、THOMAS SABO、自然堂、恰恰、Aspinal of London发布最新产品。 消费者科技 老板消毒柜推出XB831新品 基于消毒柜在健康饮食的重要作用&#xff0c;消费者在选购的时候就需要考虑到方方面面&#xff0c;除了要考虑消毒功能&…

A.O.史密斯净水热饮机 -- 直接获得多温度净水,热饮不再等待

南京2018年7月30日电 /美通社/ -- 近年来&#xff0c;水资源污染日益严峻&#xff0c;重金属污染已经成为越来越多消费者关注的问题&#xff0c;为了家人的饮水安全&#xff0c;很多家庭都选择安装一台反渗透净水机。在日常使用净水机的时候&#xff0c;是否出现了以下的情况&a…

【STM32】 SG90舵机

目录 一&#xff1a;介绍 二&#xff1a;传感器参数 三&#xff1a;接口说明 四&#xff1a;SG90舵机模块接口原理图 五&#xff1a;SG90舵机模块实物图 一&#xff1a;介绍 舵机是一种位置&#xff08;角度&#xff09;伺服的驱动器&#xff0c;适用于那些需要角度不断变…

NodeMcu(ESP8266)控制SG90

一、ESP8266控制SG90 #include <Arduino.h> #include <Servo.h>Servo servo; int i0; void setup (){//PWM引脚设置&#xff0c;与GPIO引脚号对应.servo.attach(14); } void loop (){ //写入角度servo.write(i);//延时2Sdelay(2000);//角度40ii40;if(i>180){i0…

51单片机——SG90舵机

文章目录 一.PWM介绍二.如何实现PWM信号输出三.接线四.sg90代码 一.PWM介绍 1.PWM是pulse width modulation&#xff0c;是脉冲宽度的缩写&#xff0c;它是通过一系列脉冲宽度进行调剂&#xff0c;等效出所需的波形&#xff08;包含形状以及幅值&#xff09;。 2.PWM信号图解…

单片机 舵机 SG90 舵机 控制原理 MSP432 单片机

文章目录 实物接线msp432程序 实物 https://www.cnblogs.com/yasina/p/12439035.html 接线 接线&#xff1a; pwm:橙色信号线 VCC:红色&#xff08;4.8-6v&#xff09;不能是3.3V GND:棕色 &#xff08;1&#xff09;单片机需要输出PWM波形控制舵机角度。 &#xff08;2&…

MSP430 STM32 单片机 SG90 舵机

接线&#xff1a; 注意&#xff1a; 1 工作电压&#xff1a;4.2-6V 2 PWM给20ms周期&#xff0c;也就是50HZ 3 手册可能写的是高电平是1ms到2ms&#xff0c;其实给0.5ms到2.5ms&#xff0c;还是要试试才知道。 4 给舵机直流电5V&#xff0c;但黄色信号线可直接连单片机引脚&am…

micropython(esp8266)SG90舵机控制

文章目录 SG90舵机接线控制方法 micropython程序部分示例实际操作 SG90舵机 接线 接线方法 有三根线&#xff0c;分别对应 红色-VCC 棕色-GND 橙色-信号线 这里接在D1也即是GPIO5处 控制方法 控制方法通过pwm控制信号线&#xff0c; 从而控制电机的运动 PWM周期&#xff1a…

雪碧enjoy_雪碧牛

雪碧enjoy 作者 克里斯科耶尔 已发表 2011年6月21日 翻译自: https://css-tricks.com/sprite-cow/ 雪碧enjoy

HTML css jQuery实现导航栏(华丽动画)

<!DOCTYPE html> <html><head><meta charset"utf-8" /><title>HTML css jQuery实现导航栏(华丽版)</title><style>* {/* 清除默认内边距 */padding: 0;/* 清除默认外边距 */margin: 0;}body {/* 设置默认字体 */font-weig…