grunt插件[font-spider] : 轉碼,壓縮字體 @font-face

時間 2019-11-16

標籤 grunt 插件 font spider 壓縮字體 face 欄目 Node.js 简体版

原文原文鏈接

字蛛插件：壓縮與轉碼靜態頁面中的 WebFont css

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

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.jsonnpm

運行npm install 自動安裝插件json

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文件必須存在ide

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