【ttf压缩】html⽹页引⽤中⽂字体，⽂件过⼤，加载缓慢的解决办法【字蛛】
【webfont】
【以下有部分内容引⽤的⽹络⽂章】
我们在⽇常需求中，经常会碰到视觉设计师对某个中⽂字体效果⾮常坚持的情况，因为页⾯是否⾼⼤上，字体选择是很重要的⼀个因素，选择合适的字体可以让页⾯更优雅。⾯对这种问题，我们通常以下⽅式来进⾏设计还原：
使⽤图⽚背景还原设计，即使⽤ photoshop 将⽂本图层单独导出成⽹页背景图⽚。
产⽣的问题
1. 制作与维护成本很⾼。切图繁琐、⾼清屏适配繁琐、合并雪碧图更繁琐，后期修改更加繁琐。
2. ⽤户体验差。导致⽹页不⽀持选中、复制、搜索、翻译、⽮量缩放，也会影响视障⽤户使⽤读屏器操作⽹页。
3. 带来更多带宽消耗。导出的图⽚体积随着⽂本⾯积增加，且字形⽆法重复利⽤，这消耗着⼤量的服务器资源
WebFont技术提供了在⽹页使⽤特殊字体的可能，从⽽避免⽤图⽚的⽅法。它的实现⽅法是通过CSS的@font-face引⼊字体。很多互联⽹公司已经率先采⽤了这种⽅法，⽐如Apple官⽹就是采⽤了⾃⼰的字体。Google也推出了免费的WebFont云托管服务，在国外⽹站⾃定义字体得到很好的应⽤。
在中⽂⽅⾯⾃定义字体却迟迟没有⼴泛应⽤，这是有什么原因呢？
中⽂WebFont的困境：
中⽂字体体积⼤
英⽂字体⽂字部分由26个字母组成，所以字体⽂件通常不会太⼤；⽽中⽂汉字数量总共约有九万左右， 国标(GB)字库 有6763字, ⽽根据《现代汉语常⽤字表》统计数据，常⽤汉字也要有3500个左右。 中⽂字体⽂件通常都会⼏M的⼤⼩，参照现在中国的⽹络环境，显然不适合在项⽬中使⽤。
订婚浏览器⽀持
不同浏览器对字体的⽀持也是不同的，没有⼀种可以⽀持所有浏览器的字体，这就要求我们针对不同的浏览器制作不同的字体。(N=Not supported, P=Partial support, Y=Supported)
table
针对以上的问题，我们可以得出中⽂WebFont要解决的问题是：压缩和转码。
Font-Spider中⽂WebFont解决⽅案的诞⽣：
为了不让⼯程与体验制约着设计师对字体选择以及创意的实现，我们利⽤业余时间解决了中⽂WebFont的两⼤问题即压缩和转码，于是便有了 Font-Spider （字蛛）的诞⽣。作为业界⾸款中⽂ WebFont 本地⾃动化压缩与转码⼯具，中⽂字体 web 化问题迎刃⽽解。它是⼀个web 字体⼯具，通过⾃动化技术来压缩、转码跨平台的中⽂字体，让⽹页⾃由嵌⼊中⽂字体成为可能。
原理
1. 爬⾏本地 html ⽂档，分析所有 css 语句
2. 记录@font-face语句声明的字体，并且记录使⽤该字体的 css 选择器
3. 通过 css 选择器的规则查当前 html ⽂档的节点，记录节点上的⽂本
十大名校4. 到字体⽂件并删除没被使⽤的字符
5. 编码成跨平台使⽤的字体格式
编码零⼲预
不需要改变 web ⼯程师现有的编码习惯、⼯程师可直接通过 css @font-face与选择器定义并应⽤字体。
压缩与转码汉堡加盟排行榜
剔除没有使⽤的字符，通常可将数 MB 的字体压缩成数⼗ KB ⼤⼩，解决中⽂字体过⼤的问题，并编码成跨平台兼容的格式。
【以上有部分内容引⽤的⽹络⽂章】
接下来说重点，其实上⾯的可以不看，哈哈。。。
最近在给公司的⽹站做改版，放到服务器上之后发现加载特别慢，查原因，是ttf字体库导致的，⼀看10M，太⼤了，页⾯加载半天才能出来，于是在晚上需求解决⽅案，终于发现了⼀好办法【字蛛】，感觉不错，⽂件可以瞬间⼩很多，其实原理我觉得很简单，英⽂就26个字母，中国汉字那么多，字体⽂件肯定会很⼤，【字蛛】只不过是把你页⾯上要⽤的汉字都给提取出来重新⽣成⼀个新的字体⽂件，显然会很⼩，废话不多说，接下来上步骤：
1、【安装nodeJs】
这步我就不多说了，不是本⽂的重点，⼤家可以度娘，⼀堆
这⾥要注意的事需要⽤到npm安装， 中国的⽹络你懂的，墙很⾼，怎么办，有办法
⽤淘宝镜像，命令如下：
⾸先打开nodejs客户端
输⼊⼀下命令：
npm config set registry registry.
npm info underscore （如果上⾯配置正确这个命令会有字符串response）
这样⼀来速度会快很多了
2、【安装字蛛】
输⼊命令苹果xs价格
南京旅游路线npm install font-spider -g
会看到⼀堆警告，没关系，到最后会出现如下显⽰
说明成功了
3、【运⾏】
安装成功之后就开始压缩了
我的⽬录是这样的
我的css⽂件是开头是这样的
这⾥要确保ttf⽂件⼀定要有，其他的不管在你的html中也引⽤了相应的css⽂件
接下来就是最后⼀步了 ⽣成新的字体库
nodejs 命令⾏输⼊
font-spider C:\Users\wangchao\Desktop\index*.html
也就是你的html完整路径 【*】 是通配符，表⽰会扫描所有的html⽂件
然后回车
这样就成功了，在你原来的字体⽂件⽬录下会多出相应的压缩之后的字体⽂件，发现⼩了很多吧 然后你再引⽤相关的新的字体⽂件就⾏了
到这⾥就O了，很简单。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论