自定义字体与字蛛使用方法及坑点

相信很多做前端的都会遇到这一类问题,当前网页需要引入一些特殊字体,过去这些字体通常使用图片代替,不仅增加了request请求,交互起来也不方便。

CSS3 @font-face(自定义字体)

相信很多人已经了解这个新特性了,在CSS3之前web设计师必须使用用户计算机上已经安装好的字体,如果需要特殊字体,必须以图片的形式放置在网页上。而现在我们可以通过CSS3的@font-face规则来定义我们想要的字体。
@font-face可以实现从服务器端加载字体,所有浏览器中使用的字体就可以不受本地字体的限制。对于@font-face可参照 w3school的@font-face
就像任何一项技术的产生都会带来相应的利与弊一样,要使用“自己的”字体的话,需要使用@font-face属性。这就产生了个让人头疼的问题,中文不像英文,只有26个字母和一些简单的符号。中文有上万个字,每一个字都需要载入的话,一打开网页为了加载几个字就会话无缘无故花掉很多(很多)流量。

字蛛的使用方法

就像某参老师跟我们说的一样,要想精通一件事情,就要先理解它的机制和原理。
字蛛的工作原理:通过对本地 CSS 与 HTML 文件的爬取,将用到的字符爬取出来并将没用到的这些字符数据从字体中删除以实现压缩,再生成跨浏览器使用的格式。
下面放上字蛛的链接 字蛛官网

字蛛

粗略看了下字蛛官网的的使用说明,感觉说的很详细了。不过对于一些小白来说可能还有很多看不懂的地方。这里详细的介绍下:

  • 安装NodeJS

像官网说的那样安装好NodeJS;附NodeJS下载链接

  • 安装字蛛

打开Node.js command prompt如下图所示,并输入命令:npm install font-spider -g 回车执行


NodeJS管理工具
  • 在 CSS 中声明WebFont

切换到你写的css页面声明字体,方法与CSS3的@font-face方法类似

          @font-face {
          font-family: 'pinghei';
          src: url('../font/pinghei.eot');
          src:
          url('../font/pinghei.eot?#font-spider')
          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;
          }
        /*使用选择器指定字体*/
        .home h1, .demo > .test {
        font-family: 'pinghei';
        }

注意:
1.<small>@font-face中的src定义的 .ttf 文件必须存在,其余的格式将由工具自动生成</small>
2.<small> 开发阶段请使用相对路径的 CSS 与 WebFont</small>

  • 爬取所需的字

运行 font-spider 命令:font-spider ./路径/文件名.html
页面所需的字体将会自动压缩好,原 .ttf 字体会备份,就是那个很大的文件夹。爬取压缩结束后原来8M左右的中文字体包现在只要6KB,还能将你页面所用到的字显示出来。


爬取压缩
备份的字体文件

字蛛坑点:

这里建议对需要替换大段文字的文本少使用字蛛,因为使用后这样你会发现在有标点和空格的地方会出现“!”。
解决方案:
1.可以利用标签嵌套标点的方法进行微调。
2.有网友说 写成 font-family:Arial +自己的字体,感叹号就会消失 (本人未亲自测试)。

其他webFont在线制作网站

阿里webFont不仅能在线获取webFont还有海量图标网站制作的时候用起来很方便。
fontmin懒得写代码,fontmin客户端帮你解决问题,点击生成 duang~的一下生成新的字体包

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容