字蛛的用法以及遇到的问题

简介: 字蛛的用法以及遇到的问题

字蛛是一个中文字体压缩器,可以压缩字体文件,从而解决加载缓慢的问题。字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

字蛛官网网址为:http://font-spider.org/

接下来说一下具体的使用方法:

一、首先安装font-spider

npm install font-spider -g

二、检查字蛛是否安装完成,如果运行后出现版本说明安装成功

    font-spider --version  或者  font-spider -V

    三、使用字蛛

    注意注意注意:

    1. @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成

    2. 开发阶段请使用相对路径的 CSS 与 WebFont

    接下来具体说一下:

    1、首先我们在桌面新一个font文件夹,在font文件夹下面新建一个html页面,比如font.html,然后把我们需要压缩的字体库xxxx.ttf文件放到与font.html同级目录

    2、在font.html页面编译引入我们的字体库,具体写法如下:

    <!DOCTYPE html>
    <html lang="en">
    <style>
        @font-face {
            font-family: HYRunYuan55W;
            src: url("./HYRunYuan-55W.ttf") format('truetype');
            font-weight: normal;
            font-style: normal;
        }
    </style>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div>
        1 2 3 4 5 6 7 8 9
        您一共使用分享资源分享是幸福的而最大的幸福分享给学生那您一定是世界上最幸福的人就是把知识赶快开启您的分享之旅吧分享
        在信息化的道路上您又前进了一步我们一直在知识的奥秘我们共相伴了最美的风景不是天涯海角而是近在咫尺有您一路相伴真好
    </div>
    </body>
    </html>
    <style>
        div{
            font-family: HYRunYuan55W;
        }
    </style>
    

    上面div里面的内容就是我们需要从字体库中要筛选的所有字体,然后重新打包一份ttf文件,这份打包后的ttf文件就是只包含我们定义好的这些字体的文件了

    3、然后打开cmd,在我们的font文件夹里面执行打包命令,注意:字体库一定要是ttf文件

    font-spider font.html

    第一种情况:运行后发现没报错,出现下面图片:说明打包成功了

    运行成功后你会发现,font文件夹会把你之前的很大的ttf文件备份在新生成的.font-spider文件夹下,在font文件夹下打包压缩后的字体文件,发现字体库文件大小已经很小了。就没问题了,然后使用我们打包后的字体库就可以了

    第二种情况:运行时候报错 Cannot read property ‘dirname’ of undefined

    如果在文件里,使用了两次@font-face,分别对两种外部字体进行调用,而第一个调用不存在ttf文件,虽然没有对它进行处理,但是font-spider会对他进行识别,发现没有ttf文件,就自动报错。

    所以一定注意使用的是ttf字体库

    如果是vue项目我们就可以这么引入了

    新建一个公共的aa.css文件

    然后定义好我们的@font-face

    @font-face {
      font-family: HYRunYuan35W;
      src: url("../fonts/HYRunYuan-35W.ttf") format("opentype");
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: HYRunYuan55W;
      src: url("../fonts/HYRunYuan-55W.ttf") format("opentype");
      font-weight: normal;
      font-style: normal;
    }
    

    在main.js引入import ../xxxxx/aa.css

    然后在我们需要的地方就可以使用字体库了

    通过  font-family: HYRunYuan35w;就可以正常使用了

    交流

    对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!欢迎关注公众号共同学习。

    相关文章
    |
    小程序
    微信小程序 - 二维码数据解析,如何扫码进入开发版测试二维码数据
    微信小程序 - 二维码数据解析,如何扫码进入开发版测试二维码数据
    770 0
    |
    JavaScript
    Layui 内置方法 - layer.getChildFrame( 获取iframe页的DOM)
    Layui 内置方法 - layer.getChildFrame( 获取iframe页的DOM)
    748 0
    |
    小程序
    为什么想好的商标名都注册不了
    小云经常听到用户抱怨,想破脑袋想出了一个好听的商标名,但是注册时候总是被告知跟其他在先商标近似了,注册成功率不高,知道创业维艰,没想到从树招牌就开始了。
    830 0
    为什么想好的商标名都注册不了
    uniapp 如何封装uni.request请求(登录接口、业务接口)
    uniapp 如何封装uni.request请求(登录接口、业务接口)
    uniapp 如何封装uni.request请求(登录接口、业务接口)
    uni-app实现swiper滑动放大缩小、实现scroll-view与swiper双向联动
    uni-app实现swiper滑动放大缩小、实现scroll-view与swiper双向联动
    1837 0
    |
    开发工具 git 开发者
    【git merge/rebase】详解合并代码、解决冲突
    【git merge/rebase】详解合并代码、解决冲突
    2253 0
    完美解决 fatal: unable to access ‘https://github.com/Homebrew/brew/‘
    完美解决 fatal: unable to access ‘https://github.com/Homebrew/brew/‘
    2037 0
    |
    JavaScript 测试技术 API
    如何从 Vue 2 无痛升级到 Vue 3,一文搞定!
    如何从 Vue 2 无痛升级到 Vue 3,一文搞定!
    |
    12月前
    |
    前端开发 开发者 容器
    Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
    Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
    950 0
    |
    运维 前端开发 Oracle
    再有人问你WebSocket为什么牛逼,就把这篇文章发给他!
    再有人问你WebSocket为什么牛逼,就把这篇文章发给他!2008年6月诞生了一个影响计算机世界的通信协议,原先需要二十台计算机资源才能支撑的业务场景,现在只需要一台,这得帮"抠门"老板们省下多少钱,它就是大名鼎鼎的WebSocket协议。很快在下一年也就是2009年的12月,Google浏览器就宣布成为第一个支持WebSocket标准的浏览器。WebSocket的推动者和设计者就是下面的Michael Carter,他设计的WebSocket协议技术现在每天在全地球有超过的设备在使用。
    515 1
    再有人问你WebSocket为什么牛逼,就把这篇文章发给他!