码迷,mamicode.com
首页 > 其他好文 > 详细

字蛛 自定义字体

时间:2017-03-03 18:50:19      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:右键   format   执行   分析   -o   字符   字体   open   npm   

 可能 网站中会用到一些漂亮的文字,又不想用图片,

这样可以用自定义字体,

用的工具是 字蛛http://font-spider.org/

字蛛工具 依赖 nodeJs,

先安装好 NodeJS,然后执行安装字蛛:

npm install font-spider -g


字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

以下都是必须的,字蛛生成的字体是文件中有的文字,
第一步 声明@font-face

   第二步要使用指定的字体 

/*声明 WebFont*/
@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‘;
}

第三步 在根目录打开命令 shift+右键 选 在此处打开命令行

font-spider D:\Front\...\...\...html

完成!

字蛛 自定义字体

标签:右键   format   执行   分析   -o   字符   字体   open   npm   

原文地址:http://www.cnblogs.com/juexin/p/6497865.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!