字体压缩:font-spider

news2024/11/18 16:27:18

1、全局安装插件

npm install font-spider -g

2、打开字体文件夹

在这里插入图片描述

3、新建一个 index.html 文件

<!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: 'AlimamaShuHeiTi-Bold';
        src: url('./AlimamaShuHeiTi-Bold.ttf');
      }
      .font-ali {
        font-family: 'AlimamaShuHeiTi-Bold';
      }
    </style>
  </head>

  <body>
    <!-- 对应AlimamaShuHeiTi-Bold的压缩包,你要什么字, 就写在这里 -->
    <div class="font-ali">我是字样a</div>
  </body>
</html>

4、在字体文件夹下执行命令

font-spider index.html

在这里插入图片描述

命令执行完成后会看到新增了一个 .font-spider 文件夹,这里边保存的是源字体包文件,而外边的是压缩后的

在这里插入图片描述
后续可以把.font-spider 文件夹以及临时新建的 index.html 文件删除,在样式文件中直接引入使用

@font-face {
  font-family: 'AlimamaShuHeiTi-Bold';
  src: url('./font/AlimamaShuHeiTi-Bold.ttf');
}

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

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

相关文章

计算机视觉:人脸识别与检测

目录 前言 识别检测方法 本文方法 项目解析 完整代码及效果展示 前言 人脸识别作为一种生物特征识别技术&#xff0c;具有非侵扰性、非接触性、友好性和便捷性等优点。人脸识别通用的流程主要包括人脸检测、人脸裁剪、人脸校正、特征提取和人脸识别。人脸检测是从获取的图…

Linux脚本shell中将Windos格式字符转换为unix

众所周知&#xff0c;windos的文档直接复制到linux服务器上去&#xff0c;是需要进行格式转换的&#xff0c;否则可能出现以下报错&#xff1a; 解决方法&#xff1a; vim 脚本 输入 :set ff ##会显示字符格式 :set ffunix ##转换为unix格式 :wq ##保存退出

交换机堆叠 配置(H3C)

堆叠用来干什么&#xff1f; 一台交换机网口有限&#xff0c;无法满足网络需求&#xff1b; 无法达到网络要求&#xff0c;为了扩展核心设备的转发要求&#xff0c;不改变原来网络&#xff0c; 可以使用新交换机和原来交换机组成IRF。 配合聚合可以达到备用作用&#xff0c;防…

java创造对象

java创造对象主要分为以下几个步骤 获取对应的类&#xff0c;查看是否加载&#xff0c;如果没有加载把类进行加载根据类的信息可以直接获取到实例的大小&#xff0c;分配对应内存调用实例的方法 比如说 class bb implements Serializable {private String bb; }class aa ext…

跟着 Tubi 同事吃遍全世界

在过去的一年里&#xff0c;Tubi 北京办公室的 Pantry 非常忙&#xff0c;忙于接收 Tubi 同事从全球各地带回的美食。而我们也有幸跟随慷慨的同事们尝遍了大江南北的味道。 细数这 30 多次美食分享&#xff0c;我们发现&#xff0c;大家分享的不仅是食物&#xff0c;还是…… …

从0开始学习JavaScript--JavaScript基础

JavaScript作为一门前端编程语言&#xff0c;在现代web开发中扮演着不可替代的角色。它不仅为网页增添了动态和交互性&#xff0c;而且随着Node.js的崛起&#xff0c;也在服务器端开发中占据了重要地位。在本章节中&#xff0c;我们将探讨JavaScript的作用、重要性以及与其他前…

23款奔驰E300L升级几何多光束大灯 自适应远近功能

奔驰新款E300L升级几何多光束大灯&#xff0c;单侧的LED头灯分别由84颗独立的LED光源组成&#xff0c;与风挡玻璃上的立体摄像机配合&#xff0c;每秒钟可对路况进行100次扫描&#xff0c;针对不同的路况和驾驶状态&#xff0c;智能调整84个独立光源 几何多光束大灯每侧大灯都拥…

rocketmq一主多从搭建

1.四台服务器192.168.4.202&#xff08;master&#xff09;&#xff0c;192.168.4.203&#xff0c;192.168.4.204&#xff0c;192.168.4.205 分别在四台机子上跑namesrv&#xff0c;无需修改参数及启动命令&#xff0c;官方默认启动即可。 2. broker 以下内容复制到4台机子的…

如何用AI交互数字人打造数智文旅?

随着旅游业不断发展壮大&#xff0c;景区的功能不断扩展、业态不断延伸、硬件不断升级&#xff0c;但如何利用自身文旅资源打造差异化、数智化文旅景点&#xff0c;吸引游客与市民成为一大经营痛点。 而AI交互数字人的出现&#xff0c;可以极大地将文旅资源以可视化、具象化的…

Vatee万腾智能创新探索:Vatee科技引领创新发展

在Vatee万腾的智能创新探索中&#xff0c;我们见证了一场科技领域的革命。Vatee万腾通过其独到的智能时代愿景&#xff0c;正引领着科技创新发展的浪潮&#xff0c;塑造着未来的数字化格局。 Vatee万腾以其卓越的科技引领力&#xff0c;将智能创新推向新的高度。通过整合先进的…

源码级JVS低代码功能新增:动态配置、逻辑多级循环嵌套等等

低代码更新功能 新增: 1.下拉组件选项新增动态配置&#xff1b; 选项的内容可以根据特定的条件或数据源进行动态变化的功能&#xff0c;通过动态配置&#xff0c;用户可以灵活地设置下拉组件的选项内容&#xff0c;例如从数据库或其他数据源中获取选项数据&#xff0c;或者根…

AXglyph——轻量级科研绘图软件

今天博主将推荐一款简约却不简单的制图软件——axglyph。 AxGlyph是一款十分优秀的矢量绘图软件&#xff0c;官方版界面简洁&#xff0c;功能强大&#xff0c;支持自由矢量画笔、混合矢量路径和矢量漫水填充。支持自由定义的磁力点阵&#xff0c;支持插图编号及引用管理&#…

idea启动类运行后报错:Port 6380 was already in use.

问题原因&#xff1a; idea窗口中某个项目还在启动中时 误关了窗口&#xff0c;导致在其他项目运行时报错端口被占用 解决办法&#xff1a; 先杀掉占用端口&#xff0c;再重新启动 步骤如下&#xff1a; 1.先找到6380端口对应pid winr打开cmd命令行窗口 输入命令&#xf…

RT-Thread STM32F407 DMA

这里以串口的DMA方式接收为例&#xff0c;串口1进行调试&#xff0c;串口2进行DMA接收 第一步&#xff0c;进入RT-Thread Settings配置DMA 第二步&#xff0c;进入board.h&#xff0c;定义串口及DMA宏 第三步&#xff0c;回到main.c&#xff0c;配置串口及DMA模式 第四步…

c# 字符串转化成语音合成,System.Speech

C# 语音合成可以使用 System.Speech.Synthesis 命名空间中的 SpeechSynthesizer 类来实现。SpeechSynthesizer 类提供了一系列方法和属性&#xff0c;可以用来控制语音合成的过程&#xff0c;包括设置语音、音调、语速等。 下面是一个简单的示例&#xff0c;用来演示如何使用 …

专业的SRM系统全流程管理服务

一、什么是SRM系统 SRM系统&#xff0c;即供应商关系管理&#xff0c;是供应链管理中的重要组成部分&#xff0c;帮助企业与供应商建立、维护和改善业务关系&#xff0c;以实现双方共赢。本文将从供应商寻源到合同签订、订单履行、到付款及供应商评价等环节&#xff0c;阐述SR…

基于SSM的宠物综合服务平台的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

NineData慢查询分析:数据库性能优化的专家

在日常的数据库运维中&#xff0c;慢查询是一个常见的问题&#xff0c;它可能由复杂的查询语句、不充分的索引设计、大量数据的处理、硬件资源不足等多种因素引起。这些慢查询会消耗大量的数据库服务器资源&#xff0c;甚至可能导致数据库死机&#xff0c;无法响应业务请求。因…

infercnv

文章目录 brief安装使用体验输入文件制作运行试试吧结果部分others brief InferCNV is used to explore tumor single cell RNA-Seq data to identify evidence for somatic large-scale chromosomal copy number alterations, such as gains or deletions of entire chromoso…

程序员的护城河:技术深度与软实力的并重

程序员的护城河&#xff1a;技术深度与软实力的并重 作为一名资深的IT行业从业者&#xff0c;我一直在思考一个问题&#xff1a;在我们这个以数据驱动和技术创新为核心的时代&#xff0c;程序员的价值究竟体现在哪里&#xff1f;毫无疑问&#xff0c;程序员在维护系统安全、数…