亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

字蛛(font-spider)的使用

標簽:
Html5 CSS3

随着发展,有些页面需要用到特殊字体,css3的@font-face提供了这样一个引用特殊字体的路径。@font-face可以实现从服务器端加载字体,所有浏览器中使用的字体就可以不受本地字体的限制。

但是整个字体文件的引用会导致加载缓慢,影响页面性能。

现在来总结一下小白对字蛛官网的使用方法总结

1、下载、安装node.js (不懂的小伙伴,请直接度娘~官网下载,傻瓜式安装即可)

2、打开命令行(Ctrl+R)

https://img1.sycdn.imooc.com//5bfe61f00001004f04270262.jpg

3、安装字蛛(npm install font-spider -g)

@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';
   }

https://img1.sycdn.imooc.com//5bfe6a650001a1fd06170228.jpg

注:红色框是命令,玫红色框是 所使用文字html的路径(上图是单一HTML文件字体压缩)

https://img1.sycdn.imooc.com//5bfe62b9000180b705350217.jpg

上图*.html指同一文件内所有的html

https://img1.sycdn.imooc.com//5bfe66810001fffb07230213.jpg

上图两个地址(若不同文件夹,使用该方式)

4、生成的字体文件(圈起来的是备份出来的源文件)

https://img1.sycdn.imooc.com//5bfe6aa20001f67d05910174.jpg

不足:

这里建议对需要替换大段文字的文本少使用字蛛,因为使用后这样你会发现在有标点和空格的地方会出现“!”。

解决方案:

1.可以利用标签嵌套标点的方法进行微调。

2.有网友说 写成 font-family:Arial +自己的字体,感叹号就会消失 (本人未亲自测试)。


點擊查看更多內容
3人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
13
獲贊與收藏
318

關注作者,訂閱最新文章

閱讀免費教程

感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消