精华内容
下载资源
问答
  • 苹方字体全套-无损版-字蛛可压缩版,web可用字体苹方字体全套-无损版-字蛛可压缩版,web可用字体苹方字体全套-无损版-字蛛可压缩版,web可用字体
  • 字蛛+(Font-spider-Plus) font-spider-plus(字蛛+)是一个智能 WebFont 压缩工具,它能自动分析出本地页面和线上页面使用的 WebFont 并进行按需压缩。 特性 除了兼容font-spider()支持的特性: 压缩字体:智能...
  • 字蛛的使用教程

    2017-05-18 21:39:15
    字蛛的使用教程
  • font-spider 字蛛模板

    2018-11-23 15:07:58
    1. 安装字蛛:npm install font-spider -g 2. cd xx/xx/x目录/demo 3. 将压缩包解压缩到demo目录下,将字体替换成需要压缩的字体 4. cd .. 可以返回上一目录 5. 运行:font-spider ./demo/*.html
  • 字蛛下载安装

    2020-11-18 10:24:36
    在下载字蛛之前要准备好环境: 保证node.js的npm版本在5.0.0以下 下载了python2.x.x环境 注意:因为如果需要用npm下载vue-cli的话,vue-cli对node的版本也有要求,要两者一起考虑。 node老版本下载 node下载安装...

    第一步:下载准备

    在下载字蛛之前要准备好环境:

    1. 保证node.js的npm版本在5.0.0以下
    2. 下载了python2.x.x环境

    注意:因为如果需要用npm下载vue-cli的话,vue-cli对node的版本也有要求,要两者一起考虑。
    node老版本下载
    node下载安装教程
    python下载官网
    python环境变量配置

    第二步:下载安装

    字蛛官网
    全局安装,安装完成的路径C:\Users\26910\AppData\Roaming\npm\node_modules\font-spider

    npm install font-spider -g
    

    下载后通过此代码可以查看是否安装成功

    font-spider -version
    

    下载时间很长,cmd中出现了页面结构则为成功

    第三步:使用字蛛

    首先项目中必须含有.TTF文件
    1.在css文件中写
    下面的pinghei是自己起的名字,注意不要重复(外部引入和系统默认存在的)
    压缩字体的时候不要有英文和空格
    如果以下文件都有,就这样写

    @font-face {
      font-family: 'pinghei';
      src: url('../font/pinghei.ttf');
      src:
        url('../font/pinghei.eot') format('embedded-opentype'),
        url('../font/pinghei.woff') format('woff'),
        url('../font/pinghei.ttf') format('truetype'),
        url('../font/pinghei.svg') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    h1{font-family:'pinghei'}
    

    如果只有一个.TTF文件则这样写

    @font-face {
      font-family: 'myfont';
      src: url('../font/优设标题黑.TTF');
    }
    

    2.在html文件中调用css,在含有html的文件夹位置中打开cmd

    font-spider *.html
    或者font-spider xxx.html
    

    若不在指定文件夹打开的cmd则后面要加路径

    font-spider e:/home/html/index.html
    

    注意:
    css引入TTF文件的时候路径一定要是相对路径,路径一定要写正确否则会出现下面等错误。

    <web font not found>
    

    html文档中哪些字使用了字体,在用字蛛压缩后,字体文件中只会有那些使用过字体的文字,后面再用新的字使用就无效了

    展开全文
  • 字蛛的工作原理是把页面上用到的文字从字体包中提取出来打包成同名的新字体包。压缩阶段没有出现过的文字,则新字体包中不会包含。 需要工具: node、npm环境 font-spider npm包 待压缩的字体包 需要使用字体的...

    写在前面的话:
    字蛛的工作原理是把页面上用到的文字从字体包中提取出来打包成同名的新字体包。压缩阶段没有出现过的文字,则新字体包中不会包含

    需要工具:

    • node、npm环境
    • font-spider npm包
    • 待压缩的字体包
    • 需要使用字体的网页

    操作步骤:

    1、安装node ,npm

    下载Nodejs https://nodejs.org/en/download/
    安装的时候选择add to PATH 这样node npm 模板都安装了
    安装完毕后,输入cmd后敲回车,在打开的命令行界面,依次输入命令:
    node -v
    npm -v
    如果正确输出版本号,说明我们的NodeJS和NPM就安装好了
    node、npm正确安装示例-来自csdn张安金博客

    2、全局安装 font-spider
    打开运行命令框输入cmd,进入dos环境
    执行 npm install font-spider -g
    

    出现如图所示信息即安装成功:
    font-spider正确安装示例-来自csdn张安金博客

    3、准备待压缩的字体包

    字体文件--来自csdn张安金博客

    4、压缩字体文件

    新建一个文件夹,文件夹中新建一个html文件复制下方代码,并把上一步的字体放到html同级的文件夹
    来自csdn张安金博客

    <!--index.html-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>字蛛压缩字体</title>
    </head>
    <style>
       @font-face {
       font-family: 'pBold';
       src: url('pbold.ttf');
       }
    
       @font-face {
           font-family: 'pMedium';
           src: url('pmedium.ttf');
       }
    
       .btn1{
       	color: #FF7139;
           background: #fff;
           font-size: 18px;
           font-family: 'pBold';
       }
    </style>
    <body>
       <div class="div1">要使用字体包的文字</div>
    </body>
    </html>
    
    打开运行命令框输入cmd,进入dos环境
    执行 font-spider index.html
    

    成功压缩以后文件目录结构变为了:
    来自csdn张安金博客
    至此,字蛛压缩字体完成。

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

    字蛛是一个中文字体压缩器,可以压缩字体文件,从而解决加载缓慢的问题。字蛛通过分析本地 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;就可以正常使用了

     

    交流

    1、QQ群:可添加qq群共同进阶学习: 进军全栈工程师疑难解  群号:   856402057

    2、公众号:公众号「进军全栈攻城狮」 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

                                                      

     

     

    展开全文
  • 1、安装 font-spider npm install font-spider --save //或 yarn add font-spider 2、创建html 及 font文件目录 在 public 文件夹内创建 index.html 及font文件夹 在index.html 内写入需要保留的字体。 ...<...

    1、安装 font-spider

    npm install font-spider --save
    //或
    yarn add font-spider
    

    2、创建html 及 font文件目录

    在 public 文件夹内创建 index.html 及font文件夹 在index.html 内写入需要保留的字体。
    index.html

    <!DOCTYPE html>
    <html lang="">
    
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
    </head>
    <style>
      @font-face {
        font-family: "YouSheBiaoTiHei";
        src: url("../public/font/YouSheBiaoTiHei.ttf");
      }
    
      .YouSheBiaoTiHei {
        font-family: "YouSheBiaoTiHei" !important;
      }
    </style>
    
    <body>
      <noscript>
        <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
          Please enable it to continue.</strong>
      </noscript>
      <div id="app">
      </div>
    
      <div class="YouSheBiaoTiHei">易用灵活精准</div>
      <!-- built files will be auto injected -->
    </body>
    
    </html>
    

    font文件夹 放入字体
    在这里插入图片描述

    3.效果

    font文件夹下字体变小, 生成 .font-spider文件夹,.font-spider文件夹里面存储源字体文件。
    在这里插入图片描述

    在这里插入图片描述
    使用压缩后的字体仍生效(使用vue npm run build 压缩后的dist文件内进行进行字体压缩好像不行 待解决,目前使用原生html生效,uniapp h5 压缩也可以)
    在这里插入图片描述

    展开全文
  • 字蛛的用法

    千次阅读 2018-10-07 23:07:25
    字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。 运行该程序,电脑需要先下载node应用程序...下载字蛛,全局安装 npm...
  • 1.可以先建一个文件夹 里面包括 ...没有 .font-spider文件夹 这个是安装字蛛完才显示 3.css里面需要引入字体 @font-face{ font-family:"AlibabaPuHuiTi-Medium,AlibabaPuHuiTi"; src:url("../font/Alibaba-...
  • 字蛛压缩后有些文字不起作用 字蛛在压缩过程中只将调用字体的文字进行压缩,其他文字将不被压缩 1.准备 在页面中引用字体 <html> <head> <!-- <link rel="stylesheet" href="css/font.css...
  • 五、字蛛(Font-Spider)诞生 为了实现上述设想,我们需要拥有这三个小伙伴: 分析模块:负责收集字体与字体使用的字符 压缩模块:负责删除字体中没有使用的字符实现压缩 转码模块:负责将字体转换成...
  • npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5 npm WARN deprecated graceful-fs@3.0.11: please ...
  • FontSpider:字蛛中文字体压缩器是一个可以让网页自由引入中文字体的源码工具,通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式...
  • 字蛛使用

    千次阅读 2016-11-03 17:11:17
    2、安装好之后就开始字蛛的安装,git复制这句:npm install font-spider -g3、接着一大堆乱七八糟的不用看懂;打开你做好的html文件夹,字体记得建一个font文件夹放进去,和images、CSS文件夹并排,字体名称一定要换...
  • 随着当前Web技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体例如:一个注册页面的“注册会员”几个CSS3引入的@font-face这一属性可以很好的解决这个问题,可以帮助...
  • 字蛛(font-spider)压缩字体

    千次阅读 2019-06-04 15:56:30
    字蛛(font-spider)压缩字体 因项目需求使用自定义字体,发现页面加载很慢,字体在8m左右,所以使用font-spider压缩字体大小,提升页面加载速度。 1. 安装node ,npm 请参照...
  • 第二步:百度 @font-face生成器 (客网 https://www.fontke.com/tool/fontface/ 生成不同格式和字体和样式,页面引用即可) 解决chrome浏览器下@font-face字体图标出现锯齿: 要注意不同格式字体引用顺...
  • 使用说明 安装 npm install font-spider -g 使用 1.在css中使用webFont,例如: /声明 WebFont/ @font-face { font-family: ‘pinghei’; src: url(’…/font/pinghei.eot’);...url(’…/font/pinghei.eot?...
  • 使用 字蛛 对ttf字体文件进行压缩

    千次阅读 2019-07-29 11:31:57
    但是下载下来的字体文件有近20MB,直接放到网页上需要加载很久,因为字体文件包含了几乎所有的中文字符,但是网页用不了那么多的字,所以下面使用 字蛛 工具对tff文件进行压缩,实际就是提取你网页中用到的汉字,...
  • 1、安装字蛛 npm install font-spider -g
  • 使用字蛛压缩字体后在vue组件中使用无效,在控制台发现转换为base64文件了,而且还是 0kb显示,跪求大神破解 在vue组件样式中引用压缩后的字体,发现没有效果,在netWork中看到字体被转为base64格式了,直接引用没有...
  • font-spider(字蛛)! 官网http://font-spider.org/index.html 我们就可以将我们喜欢的字体包下载下来,然后使用font-spider,它就会自动筛选出我们网页的文字,然后对应的删减字体包中除这些字以外的字,于是!...
  • 正常情况下,我们并不会用到所有的中文,如果是文字内容变化比较小的情况下,使用字蛛压缩字体包大小是个不错的选择。 字蛛的原理就是将html页面中用到的自己统计起来,产生一个新的字体包,这个字体包仅仅包含你...
  • 今天写完网页加载的自定义字体文件,发现需要加载30s,非常影响网站访问,于是找到了字蛛(FontSpider)对字体进行压缩 1.FontSpider的原理: 通过对本地CSS 与HTML 文件的爬取,将用到的字符爬取出来并将没用到的...
  • 字蛛——文字压缩

    2021-01-19 20:13:05
    字蛛 字蛛是一个中文字体压缩器 让网页自由引入中文字体成为可能 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。 安装...
  • font-spider c:\Users\Administrator\Desktop\demo\index.... C:\Users\Administrator\AppData\Roaming\npm\node_modules\font-spider\node_modules font-spider --debug c:\Users\Administrator\Desktop\font\inde...
  • 我的解决方案:每次压缩就压缩一个字体 就好了
  • 字蛛 font-spider 压缩字体使用方法

    千次阅读 2018-03-04 12:52:54
    1、 npm install font-spider -g 安装字蛛 2、 css样式表中引入 @font-face 例如: /* 汉仪力量黑字体 */ @charset “UTF-8”; @font-face { font-family: “HYLiLiangHeiJ”; src: url(“../fonts/...
  • font-spider字蛛怎么用,踩坑记录

    千次阅读 2020-12-16 14:10:13
    font-spider字蛛有什么用? 在已知使用字符的情况下,压缩字体包, 把html中使用到的字符进行打包,生成新的字体包,减小体积 font-spider字蛛怎么用 1.Git下载https://github.com/aui/font-spider/tree/master/src ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,738
精华内容 1,095
关键字:

字蛛