在开发中常常会遇到使用字体的时候，但是字体一般体积都很大，网页加载起来会很慢，所以必须要讲字体文件进行压缩（ttf字体压缩，抽取指定字符串，减少字体包大小）。注意点：字蛛只能针对html文件中字体，如果没有使用则不会提取，动态文字就会失效；使用字蛛步骤：首先是要在电脑上先安装NodeJS的。安装好后，打开window+R,输入cmd，进入命令块配置。输入指令：npminstallfont-spid

1、全局安装插件npminstallfont-spider-g2、打开字体文件夹3、新建一个index.html文件Document@font-face{font-family:'AlimamaShuHeiTi-Bold';src:url('./AlimamaShuHeiTi-Bold.ttf');}.font-ali{font-family:'AlimamaShuHeiTi-Bold';}我是字

1、font-spider只能转html格式文件（现在好像有font-spider-plus了，不知道是不是支持格式更多）2、执行命令安装：npminstallfont-spider-g3、建一个html

现在大家开发门户站点都喜欢用一些特定字体，使其更独特更美观，我也是这么想的。于是我用vue-cli自己创建了一个项目，在其中引入字体文件后，问题大发了：字体文件太大了，我引用的方正准圆简体有3M。发布之后的要加载很长一段时间页面才会看到字体变化，太影响性能和用户体验。解决方案必须压缩字体怎么压缩？我在网上看到两种解决方法，但只有第二种可行，下面我们一一道来，诸位请看：1.font-spider这个

1、font-spider字蛛是一款可以压缩字体文件的小工具，其主要的原理就是，通过html页面获得文字以及对应的字体文件，然后把已经使用文字保留，没有的文字去除，生成一个新的字体

字蛛是什么？字蛛是一个中文字体压缩器字体优化前后对比图1、使用前字体包总共大小60.6MB使用字蛛前.png文件夹大小.png2、使用前字体包总共大小13.4MB使用字蛛后.png文件夹大小.png为什么要使用字蛛？由于中文的字体体积太大，一般都是几M以上。英文字体文字部分由26个字母组成，所以字体文件通常不会太大；而中文汉字数量总共约有九万左右，国标(GB)字库有6763字,而根据《现代汉语常用

我手头上有个线上的项目，首页加载速度比较慢，在测试环境中页面呈现出来需要5S左右，正式环境也需要2~3秒，对于用户而言，这个速度显然是无法忍受的。因此，我开始对这个项目做优化。在chrome浏览中按F12打开开发者工具，进入network那一栏，重新加载页面，我发现了这个项目的字体文件love.ttf“”加载居然花费了1.35秒的时间，如下图所示。针对这个问题，我首先想到的是压缩字体文件大小，毕竟

ttf/otf字体文件压缩第一步、全局安装font-spider第二步、准备好文件夹第三步、在html和css文件中写入代码第四步、压缩注意：在压缩前，先获取完整的、包含大多数文字的字体文件在使用font-spider

p=1http://font.chinaz.com/index_2.htmlhttp://www.diyiziti.com/List/kaishu确保电脑上有node.js首先安装font-spider

一、使用原因在本地文件测试时，首屏时间加载速度很快，因为不存在网络传输，当把页面部署到服务器上线测试后，由于字库比较大，在1Mpbs的外网访问带宽下，字体加载需要1分钟。这显然是无法接受的。解决方案，将字库压缩。原理就是，只在字库中保留页面中出现的文字，将其他大量不用的文字删掉，大大提高访问速度。二、安装nodejs1.下载安装包cd/usr/localwgethttps://nodejs.org

1.字蛛的安装，这位前辈写的蛮好的:安装网络上找的都是html的压缩方法，我做的方法也是先在html文件里编译好，然后把编译的字体包放到微信小程序里面，我用的笨方法，将我小程序里面的每一个wxml代码都复制到我的一个html文件中，用字符串的方式引入，然后用正则过滤出汉字，最后去重：正则提取字符串中纯汉字varnores0val=`我是小程序的文本......`//JS正则提取字符串中纯汉字let

好像都是基于font-spider来提取页面所需字体的文字，压缩成一个小的字体文件，有font-spi

运行npminstallfontmin-g时报错如下：npmERR!code1npmERR!pathC:\Users\ying\AppData\Roaming\npm\node_modules\fontmin\node_modules\ttf2woff2npmERR!commandfailednpmERR!commandC:\WINDOWS\system32\cmd.exe/d/s/cnode-g

项目开发阶段构建太慢超过300秒，按需加载所有组件也需50秒，转为vue-cli3.0配置少量webpack即可达到10秒的构建速度效果,热重载2秒，可以接受vue-cli2>>>>vue-cli3项目处理src直接移植到cli3项目处理pug语法;vue.config.js补充chainWebpackchainWebpack:config=>{config.plugins.delete('pre

首先电脑上安装nodejsimage.png然后安装font-spidernpminstallfont-spider-g进入html所在目录，执行命令font-spiderD.cshtml原理就是爬虫抓到你网页上使用的字体，精简你的ttf字体库，有可能从14M变成20kb如图，字体文件就会从14兆压缩到91kbimage.pngMVC项目View页面代码展示：hyclskbft.TTF就是需要压缩

@media的问题没碰到,但是我的却一直报错.后来把样式表里的文件全部删除,居然好用了.然后逐类删除,逐行删除,发现问题在.clearfix:after{content:"\20";display:block;visibility:hidden;clear:both;font-size:0;height:0;line-height:0;}.clearfix{*zoom:1;}问题在于content

闲言少叙下载安装Font-spidernpm跟着官方教程操作就OK了使用之前引入字体，发现都很大，非常影响加载速度，font-spider可以抽离出你使用到的字体，但是对于单页面的动态数据有点不可行，因为你也不知道返回的数据到底有哪些字体

项目开发阶段构建太慢超过300秒，按需加载所有组件也需50秒，转为vue-cli3.0配置少量webpack即可达到10秒的构建速度效果,热重载2秒，可以接受vue-cli2>>>>vue-cli3项目处理src直接移植到cli3项目处理pug语法;vue.config.js补充chainWebpackchainWebpack:config=>{config.plugins.delete('pre

font-spider（字蛛）？是什么鬼？不知道你们第一次看到是不是跟我一样的疑惑，虽说我做前端有好几年了，看到这个也是一脸懵逼，不知道这是什么，接下来小编讲解一下，立马大彻大悟，原来不过如此嘛！

font-spider（字蛛）？是什么鬼？不知道你们第一次看到是不是跟我一样的疑惑，虽说我做前端有好几年了，看到这个也是一脸懵逼，不知道这是什么，接下来小编讲解一下，立马大彻大悟，原来不过如此嘛！

问题：有一天项目上线前，给产品经理演示，却上演了很尴尬的一幕，我没有测试360浏览器的兼容等情况，而认为webkit内核就是一致的，有关锯齿的问题，似乎样式无法解决，然后还是百度找了下360下锯齿的解决方案：开启实验室的高清字体渲染功能，问题顺利的解决了（距离的问题也没了，瞬间蒙蔽）这样的解决方案只是个人体验上的问题，但是产品是给客户用的，不能采用这种方式，然后一直不停的寻找解决方案。偶然的机会接

zuolan/font-spider：压缩中文字体，压缩图片。还有一个镜像执行web服务任务：nginx:alpine：提供web访问服务。

1.安装node.jsnode.js官方下载地址：摸我2.安装font-spider插件cmd中输入npminstallfont-spider-g进行自动安装，出现如下图表示安装成功，该插件只需安装一次

最近准备重新捣鼓一个个人博客，博客的标题我想用好看的中文字体，我想到了两种方法来实现：在网上下载喜欢的免费字体导入Photoshop或者sketch，生成标题的切图引入项目；直接引入字体文件；因为我手里的电脑没有安装图像处理软件，所以我选用的是方法2，而由于中文的字库过于庞大，中文的字体文件体积也非常夸张。所以方法二中最重要的问题就是如何实现字体的瘦身，仅仅将需要用到的汉字引入项目，我使用的是一个

字蛛是一个中文字体压缩器。字蛛通过分析本地CSS与HTML文件获取WebFont中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。安装Node.js参照安装node.js安装font-spidernpminstallfont-spider-g使用。在CSS中使用WebFont：/*声明WebFont*/@font-face{font-family:'pinghe

使用font-spider抓取字体，结果只有部分被抓取，搜索看到下面这段文字，才解决了问题今天在项目中使用了外部字体使用font-face引入后发现字体微生效控制台network查看字体也确实加载了后来发现是

原文链接：使用font-spider对webfont网页字体进行压缩随着当前Web技术的日新月异，网页界面内容越来越丰富，让人眼花缭乱，其中就包括了网页中的各种自定义字体。

原文链接：使用font-spider对webfont网页字体进行压缩随着当前Web技术的日新月异，网页界面内容越来越丰富，让人眼花缭乱，其中就包括了网页中的各种自定义字体。

一、使用font-spider1.1、下载官网：http://font-spider.org项目地址：https://github.com/aui/font-spider用法打开官网就有，和font-converter

需求：根据甲方要求，使用UI中指定字体移动端默认显示系统默认字体，非系统默认字体需要自行引入字体包字体包过大，字体包通常在几MB，严重拖累页面加载速度分析：文本内容为固定内容，不需要更新文本内容大多为常用文字，大多文字用不上插件：font-spidernode安装插件方法：npminstallfont-spider-g操作：安装插件提取项目文字：创建一个临时html，将所有项目需要用到的文本放到h

一、使用font-spider1.1、下载官网：http://font-spider.org项目地址：https://github.com/aui/font-spider用法打开官网就有，和font-converter

#font-spider')format('embedded-opentype'),url('../font/

先附上官方链接：字蛛github：font-spider关于font-spider的官方说明字蛛是一个中文字体压缩器具体意思就是可以自由的使用你所需要的字体，他能自动检测网站内自定义的字体，并且从你自定义的字体里面提取出相应的中文字

我们在日常需求中，经常会碰到视觉设计师对某个中文字体效果非常坚持的情况，因为页面是否高大上，字体选择是很重要的一个因素，选择合适的字体可以让页面更优雅。面对这种问题，我们通常以下方式来进行设计还原：使用图片背景还原设计，即使用photoshop将文本图层单独导出成网页背景图片。产生的问题制作与维护成本很高。切图繁琐、高清屏适配繁琐、合并雪碧图更繁琐，后期修改更加繁琐。用户体验差。导致网页不支持选中

我们在日常需求中，经常会碰到视觉设计师对某个中文字体效果非常坚持的情况，因为页面是否高大上，字体选择是很重要的一个因素，选择合适的字体可以让页面更优雅。面对这种问题，我们通常以下方式来进行设计还原： 使用图片背景还原设计，即使用 photoshop 将文本图层单独导出成网页背景图片。 产生的问题 1.    制作与维护成本很高。

文章摘要：    1>>  font-spider 字体神奇   由于活动项目推广的需要，页面需要用到一些漂亮好看的字体，example :