字蛛的使用总结—用于网页中需要使用特殊字体的情况

一、第一步
在找字网中找出自己需要的字体并下载
发现下载的字体文件的格式为otf
二、第二步
使用工具对字体文件进行转换
使用这个FontCreator软件可以将字体文件转换为ttf文件
三、第三部
在自己的项目中建立一个文件夹font
将ttf格式的字体文件放到font文件夹中
1、下载字蛛 全局安装

npm install font-spider -g

2、安装完毕 检查是否安装成功

font-spider  -V

3、在css文件夹中使用WebFont

/*声明 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';
}

官方提醒注意事项：

1. @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成

2. 开发阶段请使用相对路径的 CSS 与 WebFont

运行 font-spider 命令

font-spider ./demo/*.html