@font-face引入字体以及字体优化

1. 打开https://www.fontke.com/tool/fontface/

2. 上传字体，点击立即生成

字体生成器.png

3.引入页面

html:
<link rel="stylesheet" href="css/PingFang Regular/PingFang Regular.css">

css:
.pingfangRegular{
     font-family: "PingFang Regular";
}

4.优化字体（字蛛FontSpider）

官网：http://font-spider.org/

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

1）安装

先安装好 NodeJS，然后执行：

npm install font-spider -g

构建插件：grunt-font-spider | gulp-font-spider

2）cd到HTML所在文件夹，运行 font-spider 命令：

font-spider ./demo/*.html

页面依赖的字体将会自动压缩好，原 .ttf 字体会备份

运行font-spider.png