首页 > 其他分享 >网页字体包大小优化

网页字体包大小优化

时间:2022-08-16 13:49:34浏览次数:53  
标签:文件 网页 spider html 字体 font 优化 css

在日常开发中,我们经常会使用一些字体包来美化我们的网站,然而中文字体包体积确实非常大的,小则 4 - 5 MB,大则 10 MB 以上,

非常的消耗资源,今天就记录下如何优化字体包的大小

 

解决方案:字蛛

需要注意的是,字蛛只适用于静态的,动态生成的文字是不适用的。

使用步骤:

  1.  npm install -g font-spider 
  2. 创建html文件,创建css文件,
  3. 在css文件中使用 @font-face 声明字体,并且将字体应用到body元素上(只是一种方式,你也可以自定义其他的选择器)
  4. 将css文件通过 link引入到html文件中
  5. 运行font-spider index.html

这样就会生成一个小的字体包来代替原有的字体包了,原有的字体包也不会被删除,而是会放到 .font-spider文件夹下

2022-08-16

标签:文件,网页,spider,html,字体,font,优化,css
From: https://www.cnblogs.com/alone4436/p/16591254.html

相关文章

  • 16 Django页面优化1
    需要用到bootstrapmodels.pyclassTransactionRecord():"""交易记录"""charge_type_class_mapping={1:"success",2:"danger",......
  • 【快应用】webview接口打开网页,网页会被自动放大,如何适配手机大小
    【现象描述】通过webview接口打开网页,网页会被自动放大,问题代码如下:webview.loadUrl({url:'https://cdn.langqing.club/jQuery/index.html',allowthirdpartycookies:......
  • .NET性能优化-快速遍历List集合
    简介System.Collections.Generic.List<T>是.NET中的泛型集合类,可以存储任何类型的数据,因为它的便利和丰富的API,在我们平时会广泛的使用到它,可以说是使用最多的集合类。在......
  • 重修 斜率优化 Dp
    斜率单调暴力移指针斜率不单调二分找答案\(x\)坐标单调开单调队列\(x\)坐标不单调开平衡树/cdq分治P4072[SDOI2016]征途我们要求方差最小,而总和不变,等价于要每......
  • 0/1背包优化
    【问题描述】八戒在魔法森林游玩时,不慎迷路,沿着小溪路走下去,不知不觉来到一个洞口前。八戒壮着胆子进入洞中,走了几十步,竟豁然开朗。原来洞中深处是无尽的宝藏,八戒立刻......
  • 通过网页形式创建vue
      命令:npmui  在终端输入vueui进入网页    即可进行创建......
  • 二进制优化
    二进制枚举优化比如要枚举0->1023中所有的数我们平常的枚举方法就是:0,1,2,3,4,5,...,1023。这样枚举1024次使用二进制枚举优化,就可以只需枚举10次就可以枚举出任意一个......
  • SQL优化这5个极简法则,直接让查询原地起飞!
      SQL作为关系型数据库的标准语言,是IT从业人员必不可少的技能之一。SQL本身并不难学,编写查询语句也很容易,但是想要编写出能够高效运行的查询语句却有一定的难度。......
  • 支付宝网页端 调用沙箱 支付环境
    <dependency><groupId>com.alipay.sdk</groupId><artifactId>alipay-sdk-java</artifactId><version>4.33.1.ALL</version></dependency>@Datapublicclass......
  • 【学习笔记】线段树优化建图
    先开坑,有时间再说。例题CF786BLegacyCode//线段树优化建图,从寒假一直咕到暑假//之前觉得难得不行,现在看还是挺好理解的#include<queue>#include<cstdio>#includ......