css引入自定义字体 字体压缩

随便一个网站下载字体：

https://www.fontke.com/

 

再随便一个网站字体转换格式：

https://www.fontke.com/tool/convfont/

 

效果：

 

    
    
    
    


    

        字体(1):
        
点击按钮将数组中的每个元素乘以输入框指定的值，并返回新数组
        

            最小年龄:
            
        
        按钮
        
神新数组
    
    

        字体(2):

        爱国【艾尔个奥恩；奥利给哦豁
    

@font-face {
    font-family:'106font';
    src: url('../font/106font.ttf');
    src: url('../font/106font.ttf') format('truetype'),
    	 url('../font/106font.woff') format('woff'),
		 url('../font/106font.eot?#iefix') format('embedded-opentype'),
         url('../font/106font.svg#ChunkFiveRegular') format('svg');
}
@font-face {
    font-family:'sureEye';
    src: url('../font/sureEye.ttf');
    src: url('../font/sureEye.ttf') format('truetype'),
         url('../font/sureEye.woff') format('woff'),
         url('../font/sureEye.eot?#iefix') format('embedded-opentype'),
         url('../font/sureEye.svg#ChunkFiveRegular') format('svg');
}
.font_box{
    font-family: '106font';
    font-size: 16px;
    text-shadow: none;
}
.font_eye{
    padding-top:20px;
    font-family: 'sureEye';
    font-size: 16px;
}

这样字体是引入成功了，但是看下font文件夹会发现字体文件非常大，随便都是几十M

 

当我们开发完之后，用'字蛛'压缩，提取需要的字体，官网：

http://font-spider.org/

 

命令行全局安装：

npm install font-spider -g

再在根目录位置 命令行：

注意：执行这个命令行之前，记得备份一下你的字体包文件，因为它会直接压缩成新的字体包，只会帮你备份.ttf后缀的字体，其他后缀的不会帮你备份

(在 font-spider 后面写的是html页面在你电脑的路径，用*表示作用于这位置下全部的html页面)

font-spider D:\mySelf\project\aaa\*.html

//在根目录的话，可以直接 font-spider *.html

 

压缩完的font文件夹如下：

大小变成了kb，同时它会给你备份没压缩之前的.ttf后缀的字体在'.font-spider'文件夹里面

 

不过压缩这个步骤，最好在项目开发完，准备上线再执行，因为'字蛛'的压缩是只提取页面使用到的文字有字体效果。

压缩完再在页面添加，之前没有的文字，新增的文字是没字体效果的。

(千言万语，不知道看的人懂不懂，不理解我最后这句话的，就自己实操一下吧)