首页 > 技术文章 > grunt插件[font-spider] : 转码,压缩字体 @font-face

king2016 2016-10-20 14:45 原文

字蛛插件:压缩与转码静态页面中的 WebFont 

需要注意的是,目前只支持 grunt@0.4.1

package.json

{
  "name": "fontS",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^0.4.1",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-font-spider": "^0.1.5"
  }
}

复制package.json

运行npm install  自动安装插件

Gruntfile.js

module.exports = function(grunt) { grunt.initConfig({ // 拷贝文件到发布目录,这样字体可被反复处理 copy: { main: { src: './src/**', dest: './dest/' }, }, // 字蛛插件:压缩与转码静态页面中的 WebFont 'font-spider': { options: {}, main: { src: './dest/**/*.html' } } }); grunt.loadNpmTasks('grunt-font-spider'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.registerTask('default', ['copy', 'font-spider']); };

html/css中需要写好@font-face ,  ttf文件必须存在

    @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;
    }

font-spider,只会提取html中应用@font-face 字体的文字,

生成相应的ttf,woff,svg,eot四种字体格式

 

推荐阅读