前端字体压缩(免费简单易上手)

news2024/9/25 17:22:12

场景:前端在开发过程中有时候要用到特殊字体,但如果引用网上下载好的字体,它们都是一个全的字体文件,这种字体文件里往往包含了大量你用不到的文字字符,从而导致你引入的字体文件大小高达1M以上,这会严重影响页面渲染,会阻塞浏览器加载资源;因此,我们需要进行字体文件压缩,从中提取出要用到的字体,从而减少字体文件的大小。

备注:这些要使用特殊字体的字符一定要是固定的,不然就会出现压缩过的字符用的特殊字体起效了,有的未压缩过的字符就是系统默认字体,一句话里面字体不统一就好怪,如果实在把握不准具体哪些字符要压缩,那就只能扩大要压缩的字符了(虽然很蠢,但目前好像也只能这样了)。

解决方案:

方案一、使用字蛛

环境准备:需要确保机子安装了node跟python,如果没有安装python,在安装了node和font-spider之后使用font-spider命令行窗口会提示你:

'font-spider' 不是内部或外部命令,也不是可运行的程序 或批处理文件。

这就很难受...

node跟python准备好之后安装font-spider

在全局cmd窗口执行:这里html文件路径根据你实际文件路径自由变换哈。

npm install font-spider -g

font-spider E:\project\demo\index.html

 注意:html中放的是要使用特殊字体的那些字符,这些文字一定要在css中使用到要压缩的特殊字体,不然执行压缩命令不会压缩成功的。

方案二:Fontmin插件(个人强烈推荐)

githup地址点右边→_→:Fontmin - 字体子集化方案

它有npm的方式也有客户端的方式可以使用,个人建议客户端方式(npm有时候会莫名其妙不好用,我装个客户端,怎么折腾都行。) 

客户端有windows和苹果系统2种,自己选个适合自己的就行

 安装包下载不下来取巧办法:githup有时候打开+下载都贼慢,F12选中下载按钮,从html节点中复制按钮下载地址,发给自己手机,手机浏览器下载会快很多,下载好了再转发给电脑。

安装后界面长这样:

点了生成后(原字体文件48k,压缩后1k),它会生成一堆压缩后的字体文件(各个格式都有,虽然你拖进去的只有ttf类型),证据如下:

之后你再复制这个压缩后的ttf字体文件,将它丢到你的项目里面就好了。收工~

祝大家再也不用为特殊字体发愁

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

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

相关文章

C++08函数模板

1.自动推导类型 在C语言和C98中,auto 关键字用于修饰变量(自动存储的局部变量)。 在C11中,赋予了auto 全新的含义,不再用于修饰的变量,而是作为一个类型指示符,指示编译器在编译时推导auto声明的变量的数据类型。 在…

SpirngBoot<读完包你更上一层楼>

目录 一、SpringBoot概念 1.1 什么是SpringBoot 1.2 为什么要学习SpringBoot 1.3 SpringBoot的特点 1.4 总结 二、入门案例 2.1 创建工程 2.1.1 创建一个空工程 2.1.2 工程名为project_test: 2.1.3 设置jdk版本为1.8 2.1.4 新建一个module 2.1.5 填写项…

入职字节外包一个月,我离职了

有一种打工人的羡慕,叫做“大厂”。 真是年少不知大厂香,错把青春插稻秧。 但是,在深圳有一群比大厂员工更庞大的群体,他们顶着大厂的“名”,做着大厂的工作,还可以享受大厂的伙食,却没有大厂…

[附源码]计算机毕业设计springboot吾悦商城管理系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

老司机带带你,教你学会Java中又骚又暴力的“反射”技术

在Java中有这么一个很骚的技术,几乎贯穿了所有主流的框架,在所有主流框架的底层中你都可以看见它的身影,这个技术就是反射。关于反射,有很多小白会觉得很难,搞不清楚到底是怎么回事,也不知道该怎么用&#…

VS Code快速实现Git PR操作

注意:建议先学习git的基本操作。 安装插件 下图中红圈标记的插件都安装好。 Fork上游仓库 在网页上点击你想要fork的仓库,点击fork 然后该仓库就会fork到你的github账户下面,如下图。 现在可以在你账户下面的repo(我们称为下…

[附源码]Python计算机毕业设计Django和vue的茶文化交流平台的设计与实现

项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等等。 环境需要 1.运行环境:最好是python3.7.7,…

Global Mapper 导出图层功能的妙用(重采样、设置文件类型、切片、按掩膜提取or裁剪……)

许多GIS软件都有导出的功能,但其中大部分的导出功能比较单一直接,仅仅是导出而已,或者最多可以改个导出的格式,改个坐标。但是Global Mapper 不一样,导出功能非常非常多,比如重采样(可以设置重采…

Vue3框架的创建的两种种方案(第十二课)

1 VueCLi脚手架的安装 Home | Vue CLI (vuejs.org) 使用方法 | Yarn 中文文档 (bootcss.com) 3 Vite脚手架的安装 Vite | 下一代的前端工具链 4 使用的软件 Visual Studio Code webstorm64.exe IntelliJ IDEA 2022.2.3 HBuilder X 方案一 VueCLi脚手架的安装 1 创…

[附源码]计算机毕业设计在线招聘网站Springboot程序

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

MobileViT

还是vit系列啊 只不过这次是Apple团队出的轻量级、通用且移动友好的网络框架 论文地址:https://arxiv.org/pdf/2110.02178.pdf 轻量级卷积神经网络 (CNN) 是移动视觉任务的事实。他们的空间归纳偏差使他们能够在不同的视觉任务中以较少的参数学习表示。 轻量级卷积…

微服务自动化【集群搭建】

目录 搭建 etcd 集群 etcd构建自身高可用集群主要有三种形式: 1. 静态部署(前提) 2. 集群搭建 3. 集群测试 搭建 etcd 集群 etcd构建自身高可用集群主要有三种形式: 静态发现:预先已知etcd集群中有哪些节点, 在启动时通过--initial-cluster参数直接指定好etc…

[附源码]JAVA毕业设计互联网保险网站(系统+LW)

[附源码]JAVA毕业设计互联网保险网站(系统LW) 目运行 环境项配置: Jdk1.8 Tomcat8.5 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术&a…

JavaWeb(一)

前言 首先深入了解之前,先回顾一些基础知识 C/S & B/S 就比如咱们日常生活中,咱们说的CF是cs游戏,这个cs是什么意思(年幼的我也十分痴迷CF游戏,过去式了 hhh)这里的cs可不是咱们说的csgo或者cs游戏。…

Vue 官方文档2.x教程学习笔记 1 基础 1.4 模板语法 1.4.1 插值

Vue 官方文档2.x教程学习笔记 文章目录Vue 官方文档2.x教程学习笔记1 基础1.4 模板语法1.4.1 插值1 基础 1.4 模板语法 【介绍】 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 所有 Vue.js 的模板都是合法的 HTML&…

Flink SQL管理平台flink-streaming-platform-web安装搭建-整理

目录 步骤 安装 第二步 下载flink 第三步 安装flink-streaming-patform-web 第四步 配置flink web平台 第五步 运行demo 在Flink学习的入门阶段,非常重要的一个过程就是Flink环境搭建,这是认识FLInk框架的第一步,也是为后续的理论学习和…

全栈性能测试教程之性能测试理论(一) mockserver应用

1、mockServer 1.1什么是mockServer moco替代 Server服务 mocoServer即为测试替身的服务 主要针对于单元测试的应用,主要应用于解除单元测试之间的依赖 1.2mocoServer使用的场景 前端程序员 前端已经写好页面,但是后端的接口没有写好&#xff…

[Android]Mac电脑Android Studio使用真机调试运行

一、Mac电脑连接Android真机 我这里是一台中兴手机 1. 手机打开USB调试 打开“设置”找到“关于手机”进入,连续点击版本号,直到提示“您已经进入开发者模式”。回到“设置”找到“系统与更新”进入,再进入“开发者选项”,打开…

Vue笔记_03组件_mavonEditor组件(基于vue)

目录下载mavonEditor导入并注册mavonEditor组件[1] 全局注册[2]局部注册使用mavonEditor属性修改举例说明1-不展示预览分屏工具栏修改举例说明-根据配置显示工具栏编辑器插槽举例说明-自定义工具栏按钮函数监听下载mavonEditor 使用命令 npm install mavon-editor --s 进行下载…

Koa 6 响应(Response)

Koa Koa 本文仅用于学习记录,不存在任何商业用途,如侵删 6 响应(Response) 文章目录Koa6 响应(Response)6.1 APIStringBufferStreamObjectKoa Response 对象是在 node 的原生响应对象之上的抽象,提供了诸多对 HTTP 服务器开发有用的功能。 6…