font-spider压缩字体文件--vue项目用法

最新推荐文章于 2024-08-09 08:00:42 发布
最新推荐文章于 2024-08-09 08:00:42 发布
阅读量7.3k 收藏 7
点赞数 2
分类专栏： vue font-spider 文章标签： font-spider 字体压缩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/impossible1994727/article/details/94561859
版权
本文介绍了如何使用font-spider工具在Vue项目中压缩字体文件。首先确保安装了Node.js，然后创建一个名为index的文件夹并设置相应结构。通过cmd运行font-spider命令进行压缩。注意，该方法仅适用于压缩已知文字，未知文字可能仍会显示为系统字体。压缩后的字体文件显著减小，可将其复制到Vue项目中使用。
摘要由CSDN通过智能技术生成

这个只能压缩固定的文字，如果有需要用到的不在压缩范围文字可能还会显示系统字体；

可用的字体网站：
http://www.zitiweb.com/index.php?p=1

http://font.chinaz.com/index_2.html

http://www.diyiziti.com/List/kaishu

确保电脑上有node.js

首先安装font-spider:

npm install font-spider -g

然后再桌面上新建一个文件夹index，文件夹内部结构如下：

上面的.font-spider是我压缩后自动生成的文件，里面保存的是原本的字体文件。

在index.html引入css\index.css，index.html内部如下：

最低0.47元/天 解锁文章
impossible1994727
关注
专栏目录
font-spider（字蛛）的正确打开方式
lgxzzz的博客
08-19 495
前言 最近在部署vue项目之后，在打开网页的时候，ttf文件下载时间实在是太久了，在经过合理的运用搜索引擎之后，可能自己的固化思维消化不了大佬们给出的方案，于是在他们的基础之上做了一些小小的改动，便叙文记之。 1. 引入font-spider的依赖 首先我们执行npm install font-spider -g引入依赖， 执行完成后，可以输入font-spider -V来检查是否引入成功 2. 在根目录下创建三个文件 2.1 fonts 这里放入原字体包，Lato-Medium.ttf、Lat
如何在 Vue 项目中缓存字体文件以提高性能
最新发布
繁依Fanyi的博客
09-03 2336
在 Vue.js 项目中优化字体文件的加载速度可以显著提升用户体验。通过浏览器缓存、服务工作者（Service Worker）、PWA、字体子集优化以及等方式，你可以减少字体文件的加载时间，并确保用户在离线或网络状况不佳的情况下依然能够快速访问你的应用。每种方法都有其优缺点，具体选择应根据项目的实际情况进行权衡。如果你的应用需要支持离线访问或对性能要求较高，推荐使用 Service Worker 或 PWA 进行缓存。如果字体文件较大且只需要使用其中的一部分字符，字体子集优化或则是更好的选择。
字蛛(font-spider)安装与使用指南
gitblog_00426的博客
08-09 547
字蛛(font-spider)安装与使用指南 font-spiderSmart webfont compression and format conversion tool项目地址:https://gitcode.com/gh_mirrors/fo/font-spider 一、项目的目录结构及介绍 当你克隆或下载了font-spider项目后, 其基本目录结构如下: ├── bin/ │ └...
Vue3——压缩字体font-spider，完美解决字体压缩后会出现字体消失现象
NanChen的博客
09-21 5459
打包出现字体文件过大怎么办？压缩字体后出现问题怎么办？来看这篇文章哦~
字蛛的使用教程
05-18
字蛛的使用教程
js vuecli react-app 字体引入加载缓慢 ，font-spider 根据使用字体生成新的字体文件
weixin_44544388的博客
04-14 1425
闲言少叙 下载 安装 Font-spider npm 跟着官方教程操作就OK了 使用 之前引入字体，发现都很大，非常影响加载速度， font-spider可以抽离出你使用到的字体， 但是对于单页面的动态数据有点不可行， 因为你也不知道返回的数据到底有哪些字体， 所以我抽离的少一些固定的标题和十个数字字体。 一、测试文件夹如下 二、html里面引入字体，在页面输出用到的字体，方便font-spid...
利用字蛛FontSpider压缩webfont字体演示
weixin_34290096的博客
03-30 404
WebFont 技术可以让网页使用特殊字体，它通过 CSS 的@font-face语句引入字体资源，使用 CSS 选择器指定运用字体的文本，在通常的前端开发工作中，由于中文字体文件普遍都好几M，尤其像是移动端项目，加载完整的字体文件不太现实，考虑到性能问题，可以选择使用font-spider对字体文件进行压缩。 安装 FontSpider依赖Node,先安装...
font-spider 压缩字体文件 html vue
TWL1203的博客
09-21 1646
font-spider 压缩字体 vue html
vue使用ttf字体包压缩 字蛛 font-spider
weixin_58437310的博客
05-28 1731
1.可以先建一个文件夹 里面包括 2.1>.css文件夹->index.css2>.font(里面放的是ttf字体包) 3>.index.html 引入 4>.没有 .font-spider文件夹 这个是安装字蛛完才显示 3.css里面需要引入字体 @font-face{ font-family:"AlibabaPuHuiTi-Medium,AlibabaPuHuiTi"; src:url("../font/Alibaba-...
技术分享：font-spider（字蛛）的正确打开方式
mashibing_web的博客
12-10 897
前言 最近在部署vue项目之后，在打开网页的时候，ttf文件下载时间实在是太久了，在经过合理的运用搜索引擎之后，可能自己的固化思维消化不了大佬们给出的方案，于是在他们的基础之上做了一些小小的改动，便叙文记之。 1. 引入font-spider的依赖 首先我们执行npm install font-spider -g引入依赖， 执行完成后，可以输入font-spider -V来检查是否引入成功 2. 在根目录下创建三个文件 2.1 fonts 这里放入原字体包，Lato-Medium.ttf、Lat
HTML字体压缩
08-31
字体压缩 HTML
H5（nuxt）项目引入字体
破鞋何苦阑珊的博客
09-04 3755
H5（nuxt）项目引入字体 闲话少说 方法1： 1.下载所需要的字体，.ttf格式本文以（FZCYJ.ttf 为例） 2.先自己定义一个font.css文件，字体文件的路径引入 @font-face { font-family: "华文行楷"; src: url('stxingka.ttf'); font-weight: normal; font-style: normal; ...
Vue进阶之Vue项目实战（四）
qq_34306228的博客
05-29 1114
编辑器 -> 管理端发布上线 ->应用端但是一般很多公司产品的管理端和应用端结合，进行高度复用。这是因为，在管理端进行拖拽的时候，是比较消耗性能的，要更好的考虑性能，所以很多产品都会用 canvas，用画布的形式画、绘制 对齐的网格线，或者编排过程中的辅助线；但是在渲染过程中，在应用端是没有任何的辅助线和网格线，所以一般将管理端和应用端分开考虑。管理端和应用端中间的联系一般是组件的复用，但是在页面中，编排引擎，渲染器方面，他们俩不是高度复用illaretool。
自定义字体包过大，导致页面加载缓慢的问题解决
77今天也学习了的博客
11-16 4467
// 字体包过大，在渲染页面客户端时加载缓慢，导致页面加载缓慢影响用户体验。需要处理字体包： // 1. 转码，使得不受不同浏览器之间的限制 2.压缩：使得加载更迅速 // 使用中文字体压缩器：font-spider // 1，npm install font-spider -g全局安装 // 2，使用font-spider的话，一定要注意，必须有ttf格式的本地字体文件 // 其他格式的字体文件没有没关系，font-spider会自动生成 //在线字体转换压缩工具：https://www.fontk
vue-使用字蛛font-spider压缩字体文件 解决字体加载慢问题
yyanglirong的博客
01-03 1223
特殊字体
vue项目优化打包 压缩字体文件,使用字蛛(font-spider)
范天缘的博客
03-05 3969
1.安装 npm install font-spider -g 2.查看版本: font-spider -v 出现版本号就代表成功 3.因为vue打包项目生产的文件后缀都会生成动态字符,所以我们在存放字体的文件夹里面新建一个index.html，引入字体文件,字蛛会帮我们自动检测 4.cmd进入font文件夹,输入命令font-spider index.html 5.成功,对比字体前后大小 从10m变成了2k,优化度极高 6.现在查看打包前后体积 21m变成了6m(我项目中优化了三个字体文
vue项目中字体文件过大(压缩字体文件)
热门推荐
qq_43364234的博客
09-03 1万+
目前做的一个vue项目当中引入了外部的字体文件，打包之后测试发现加载过慢，需等待较长时间才能看到效果，特此记录在vue项目中压缩字体的操作. 安装字蛛 字蛛是一个中文字体压缩器，通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。 安装方法 npm install font-spider -g 使...
阿里云字体图标在vue-cli中的使用
xk_initial的博客
11-12 477
阿里云字体图标在vue-cli中的使用（笔记） 1. 这里只说在线引用的方式 fontclass的方式 第一步：拷贝项目下面生成的fontclass代码： at.alicdn.com/t/font_8d5l8fzk5b87iudi.css 放入到index.html中 <link rel="stylesheet" href="https://at.alicdn.com/t/font_1323...
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值