×

Font-Spider(字蛛) - 实现中文WebFont不再是梦

作者:admin2017.01.17来源:Web前端之家浏览:7883评论:0
关键词:font-spider字蛛
微信公众号

微信公众号

在我们拿到设计稿的时候经常会看到设计师用到一些特殊字体,不想用图片代替,而这些字体在普通电脑上是没有的,如果需要正常显示,我们就要下载字体的方式。

对于英文字体,下载下来比较小,一般都是几十K,可以接受。但是对于中文字体就不行了,一个字体都是几M,这个肯定不能让用户访问页面的时候去下载,那么我们一般使用图片来处理,使用图片会造成一些问题:

1.  制作与维护成本很高。切图繁琐、高清屏适配繁琐、合并雪碧图更繁琐,后期修改更加繁琐。
2.  用户体验差。导致网页不支持选中、复制、搜索、翻译、矢量缩放,也会影响视障用户使用读屏器操作网页。
3.  带来更多带宽消耗。导出的图片体积随着文本面积增加,且字形无法重复利用,这消耗着大量的服务器资源。

有什么方法能实现中文字体webFont呢,就是今天讨论的话题:Font-Spider(字蛛)。我们可以去官网下载:http://font-spider.org/

QQ截图20170117171730.png

字蛛是一个中文字体压缩器,让网页自由引入中文字体成为可能。了不让工程与体验制约着设计师对字体选择以及创意的实现,某个团队利用业余时间解决了中文WebFont的两大问题即压缩和转码,于是便有了 Font-Spider (字蛛)的诞生。作为业界首款中文 WebFont 本地自动化压缩与转码工具,中文字体 web 化问题迎刃而解。它是一个 web 字体工具,通过自动化技术来压缩、转码跨平台的中文字体,让网页自由嵌入中文字体成为可能。

字蛛原理

★ 爬行本地 html 文档,分析所有 css 语句

★ 记录@font-face语句声明的字体,并且记录使用该字体的 css 选择器

★ 通过 css 选择器的规则查找当前 html 文档的节点,记录节点上的文本

★ 找到字体文件并删除没被使用的字符

★ 编码成跨平台使用的字体格式

不需要改变 web 工程师现有的编码习惯、工程师可直接通过 css @font-face与选择器定义并应用字体。

压缩 》转码

剔除没有使用的字符,通常可将数 MB 的字体压缩成数十 KB 大小,解决中文字体过大的问题,并编码成跨平台兼容的格式。

20150127172314417.jpeg.jpg

至于安装方法,使用可以去官网看下:http://font-spider.org/

总结

对于Font-Spider(字蛛),在项目中,也应用过,性能还是挺一般的,采用的是Adobe与Google所领导开发的开源字体,而谷歌和Adobe在大陆打开很慢,这样我们还得搞点CDN加速。

所以Font-Spider(字蛛)还需要不断完善,让更多的中文站点可以使用精美的字体。

今天写这篇文章的主要目的:初识实现文字体webFont的解决方案。如果您有好的方法,可以留言~

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/font-spider.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • www.micai18.com

    写的很详细...

  • 子午物联网

    这个博客,由衷的喜欢...

  • 访客

    文章不错,非常喜欢...

  • cnwebe

    新媒体运营交换友情链接https://www.cnwebe.com换吗...

  • admin

    请加上链接...

  • admin

    已加上...

  • 物联网应用

    交换个链接如何?物联网应用www.ziwuiot.com...

  • zzzmh

    你好自己写的个人技术博客https://zzzmh.cn麻烦友链申请...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero