web网页引入自定义字体设置

新项目中  设计用了一个自定义的字体，由于不熟悉，折腾了好大一圈，最终在同事的帮助下，顺利解决，记录一下，供有同样疑虑的小伙伴参考。

1、首先需要下载你需要的字体，此项目中用到的字体是思源黑体（light），需要字体文件的格式是.ttf，思源的ttf版字体不好找，我是下载的otf版，又用fontCreate 软件转换了一下，算是得到了ttf字体（废了老大劲，才转换成，网上贴出来的在线转换文字格式的网站试了，不太靠谱）。

2、需要把字体文件放到你的项目文件font中。

3、css中引入字体文件

@font-face {
    font-family: font_light;
    src: url('../lib/font/font-light/SourceHanSansCN-Light.eot');
    src: url('../lib/font/font-light/SourceHanSansCN-Light.eot?#iefix') format('embedded-opentype'),
    url("../lib/font/font-light/SourceHanSansCN-Light.ttf") format("truetype"),
    url("../lib/font/font-light/SourceHanSansCN-Light.woff") format("woff"),
    url("../lib/font/font-light/SourceHanSansCN-Light.svg") format("svg");
    font-weight: normal;
}

按这种格式引入，除了.ttf格式的文件，别的文件会显示找不到该文件，先不要着急（这个后面用font-spider 打包的时候会把那几个格式的文件创建出来），如果是为了初期开发调试效果，可以先把除了.ttf格式的引入注释掉。

4、字体文件太大了，需要用到font-spider  对字体文件压缩。（这个网上都有教程，先要安装node  然后安装font-spider 然后执行打包程序）

    font-spider 安装：npm install font-spider -g

    打包：font-spider /Applications/XAMPP/xamppfiles/htdocs/1lumi/cn/home/index.html       

   这一步就打包完成了，font 文件就会出现下面几个文件格式。.font-spider 文件夹是原来对字体文件，可以删除，也可以留着继续用，看一下现在对字体文件是不是小了很多

记录如上！