web项目部署，运用font-spider解决字体过大，导致页面加载太慢的问题

最新推荐文章于 2023-07-03 15:06:40 发布
最新推荐文章于 2023-07-03 15:06:40 发布
阅读量337 收藏
点赞数 2
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44831184/article/details/116994941
版权

1.在桌面新建文件夹fontSpider

2.新建index.html

 

3.新建index.css

4.新建fonts文件夹，并放入本地需要压缩的字体

5.全局下载npm install font-spider -g

6.在路径为fontSpider的文件夹下面，通过cmd执行font-spider index.html 得到压缩之后需要用到的字体包

7.在将压缩之后的字体安装包，放在自己的项目中

 

国王与乞丐จุ๊บ
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
用字蛛（font-spider）压缩字体，字体大小不变问题。
weixin_45819746的博客
10-13 1839
用字蛛（font-spider）压缩字体1.安装nodejs和npm扩展2. 安装font-spider3.建一个font.css4.再建立一个font.html5.然后开始压缩字体（其实就是把用到的文字挑出来） 1.安装nodejs和npm扩展 请参照https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html 下载路径https://nodejs.org/en/download/ 安装的时候选择add to PATH 这样node n
自定义字体包过大，导致页面加载缓慢的问题解决
77今天也学习了的博客
11-16 4327
// 字体包过大，在渲染页面客户端时加载缓慢，导致页面加载缓慢影响用户体验。需要处理字体包： // 1. 转码，使得不受不同浏览器之间的限制 2.压缩：使得加载更迅速 // 使用中文字体压缩器：font-spider // 1，npm install font-spider -g全局安装 // 2，使用font-spider的话，一定要注意，必须有ttf格式的本地字体文件 // 其他格式的字体文件没有没关系，font-spider会自动生成 //在线字体转换压缩工具：https://www.fontk
服务器上tomcat发布的网站字体变大,Tomcat服务器
weixin_42533622的博客
08-10 608
我们要想运行一个 Java Web 项目，就必须将它发布到服务器上面，这样我们才能通过浏览器访问到它，其实我们在开发阶段时也是一样，也需要使用一个 Web 容器来运行我们的项目，这样我们就能根据在浏览器中看到的页面效果来对我们的项目进行修改，对于 Java Web 项目来说，最简单的容器也许就是 Tomcat 了，并且它还是开源免费的，因此使用起来非常方便。1.Tomcat 的获取关于如何获取到 ...
web引入font字体文件太大，字体抽取
qq_35430000的博客
06-30 1268
当只有一个活动页面或者一小段文字需要引入特殊字体，字体文件往往会有十几兆或者几十兆，特别在移动端或者弱网情况下有相当差的体验，一个14M左右的文件就需要加载12秒... 所以针对一些小范围使用字体文件或者页面变化不大的项目可以考虑把常用字体抽取出来再生成一个小的字体文件，再进行引入。 发现fontmin 这个框架比较符合需求，它是第一个纯 JavaScript 字体子集化方案，可以使用node命令或者可视化窗口的形式进行操作 官网地址：http://ecomfe.github.io/fontmi.
@font-face字体文件过大导致页面加载缓慢
yu168yu1的博客
11-21 1万+
我们会遇到，一个中文的字体文件10MB，在本地加载不影响，可是上线就会出现字体加载缓慢的情况。 下面以苹方字体为例 https://blog.csdn.net/Creabine/article/details/55099602 http://font-spider.org/ 这个链接是用的font-spider方法，大家可以参考 不过大家会发现这种方法只对部分字体有效，对苹方字体没有任何效果 针对...
nuxt-font-loader-strategy：帮助加载字体并通过预加载来激活它们
02-05
nuxt-font-loader-strategy帮助加载字体并提供基于预加载的加载策略。 定义自己将首先解锁的字体。 这样可以在网站的初始视口中提供最佳体验。 特征： 使用预加载以防止字体闪烁。 自动生成@font-face定义，并...
font-spider-plus:font-spider-plus（字蛛+）是一个智能 WebFont 压缩工具，它能自动分析出本地页面和线上页面使用的 WebFont 并进行按需压缩
04-27
font-spider-plus（字蛛+）是一个智能 WebFont 压缩工具，它能自动分析出本地页面和线上页面使用的 WebFont 并进行按需压缩。 特性 除了兼容font-spider（）支持的特性： 压缩字体：智能删除没有被使用的字形数据，...
详解node字体压缩插件font-spider的用法
01-01
字体包过大，字体包通常在几MB，严重拖累页面加载速度 分析： 文本内容为固定内容，不需要更新 文本内容大多为常用文字，大多文字用不上 插件： font-spider node 安装插件方法：npm install font-spider -g 操作：...
font-spider 字蛛模板
11-23
1. 安装字蛛：npm install font-spider -g 2. cd xx/xx/x目录/demo 3. 将压缩包解压缩到demo目录下,将字体替换成需要压缩的字体 4. cd .. 可以返回上一目录 5. 运行：font-spider ./demo/*.html
web字体文件过大优化方案
SeekerTime
03-16 1万+
使用font-spider[字蛛]对ttf文件进行压缩 原理： 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。 font-spirder 官网：http://font-spider.org/ 第一步：先安装好 NodeJS,然后执行： npm install font-spi
vue3----解决字体包太大响应慢以及打包文件大的问题 && 解决font-spider 报错问题
heavenz19的博客
07-03 2104
使用font-spider压缩字体（亲测可用）
使用 font-display 优化 web 字体加载速度
张旭乾 - 全栈工程师/海归
04-02 1559
在编写网站的时候，或多或少都会用到一些网络上的字体，CSS 3 中虽然加入了对 Web Fonts（网络字体）的支持，但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下，在 Web Fonts 加载时，使用该字体的地方会显示空白，直到字体下载完成之后才会显示，这时通过改变 CSS 中的 font-display 属性，就可以避免这个问题。 什么是 Web Fonts 在介绍 font-display 之前，先了解一下什么是 Web Fonts。在以前使用 CSS 指定字体时
font-spider使用中的注意事项
rwzhang的博客
03-30 298
5、转换成功后会在执行目录生成一个名为“.font-spider”的文件夹，这个文件夹里存放的是源字体文件，原来字体文件的位置存放的是转换提取后的字体文件。6、otf转ttf,试了几个在线otf转ttf的都不行，转出来都只有几kb，后来还是下载了一个叫FontCreater的软件才转成功的。4、好像不能转otf格式的字体，我转otf文件时报错，提示什么dirname错误，把otf文件转成ttf文件后就可以正常运行了，2、执行命令安装： npm install font-spider -g。
【ttf 压缩】html网页引用中文字体，文件过大，加载缓慢的解决办法【字蛛】【web font】
热门推荐
yueyemoyan的博客
07-23 6万+
【以下有部分内容引用的网络文章】 我们在日常需求中，经常会碰到视觉设计师对某个中文字体效果非常坚持的情况，因为页面是否高大上，字体选择是很重要的一个因素，选择合适的字体可以让页面更优雅。面对这种问题，我们通常以下方式来进行设计还原：使用图片背景还原设计，即使用 photoshop 将文本图层单独导出成网页背景图片。产生的问题 制作与维护成本很高。切图繁琐、高清屏适配繁琐、合并雪碧图更繁琐，后期修改
【font-spider】网页中引用字体文件过大的解决办法，网页字体文件压缩
角角兔的博客
09-27 5142
font-spider（字蛛）官网: 字蛛 github源码 安装 先要安装npm与node 安装好之后就可以直接安装字蛛 我用了centos的服务器 用npm全局安装font-spider # npm install font-spider -g 安装之后输入 # font-spider 看到下面的就说明安装成功了 使用方式 首先要有项目中的html文件 在其外联的css样式中要规定字体文...
html字体文件过大导致加载缓慢如何解决？
robinhunan的博客
03-17 4245
在网页设计中，美工通常要求前端使用自己的定义的字体，比如苹果的字体PingFangMedium.ttf， 而实际上除了英文和数字好看外，中文并不好看，特别是windows下，中文发虚。但是字体文件却特别大，因此考虑通过压缩字体， 将汉字这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式，从而在不影响网页效果的前提下，加快网页响应速度。 压缩前字体文件PingFangMedium.ttf高达10.5M 字体压缩的原理就是你要使用的字符单独拿出来，不用的就不包含，其中font-sp.
html 中文字体文件太大,【字蛛】如何压缩体积大的中文字体包
weixin_42144201的博客
06-19 2238
FontSpider:字蛛中文字体压缩器是一个可以让网页自由引入中文字体的源码工具，通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。安装npm install font-spider -g在html中使用字体在 CSS 中声明字体/*声明 WebFont*/@font-face {font-fami...
Vue项目字体文件过大，导致网页加载缓慢，使用字蛛解决。
小绵杨
11-12 7706
问题 网页如果使用自定义的字体，那就必须将字体文件放在服务器对应的文件夹下。但是一般字体文件都非常大，小则几MB，大则几十MB。如果全部从服务器加载到页面上，不仅占用带宽，而且网页加载的十分慢。正常情况下，我们并不会用到所有的中文，如果是文字内容变化比较小的情况下，使用字蛛压缩字体包大小是个不错的选择。 字蛛的原理就是将html页面中用到的自己统计起来，产生一个新的字体包，这个字体包仅仅包含你使用到的文字转换后的字体。 使用 全局安装字蛛 没有安装node的参考：node.js安装教程 npm intsal
anti-webspider
最新发布
01-19
anti-webspider是指用于对抗网络爬虫的方法和技术。 网络爬虫是一种自动化程序，用于获取互联网上的信息。但有些爬虫可能会对网站的正常运行和数据安全造成威胁，例如大量抓取网站内容导致服务器崩溃、盗用网站数据等。为了防止这种恶意行为，许多网站采取了一些对抗网络爬虫的措施。这些措施被称为anti-webspider。 anti-webspider的方法有很多种，其中一种常见的方法是通过验证用户的行为来区分真实用户和机器人。例如，网站可以在登录或提交表单时要求用户输入验证码，以确保是真实用户而非爬虫程序。另一种方法是对请求进行频率限制，如果某个IP地址的请求过于频繁就会进行封禁，这样可以降低爬虫程序的效率。 除了上述方法，还有一些更高级的技术可以对抗网络爬虫。例如，使用JavaScript动态生成网页内容，这种方式可以使爬虫程序难以解析网页。另外，一些网站还会进行资源请求策略的优化，将网页资源分散加载，使得爬虫程序难以完整获取整个页面内容。 总的来说，anti-webspider是网络站点为保护自身利益所采取的一系列措施和技术，以对抗恶意的网络爬虫行为，并确保网站的正常运行和数据安全。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值