zoukankan      html  css  js  c++  java
  • grunt插件[fontspider] : 转码,压缩字体 @fontface

    字蛛插件:压缩与转码静态页面中的 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四种字体格式

  • 相关阅读:
    基于Yarp的http内网穿透库HttpMouse
    Redis+Lua解决高并发场景抢购秒杀问题
    SQL慢查询排查思路
    webrtc之TURE、STUN、摄像头打开实战
    WebService就该这么学
    超详细 Java 15 新功能介绍
    Java 14 新功能介绍
    Java 17 将要发布,补一下 Java 13 中的新功能
    Java 8 Function 函数接口
    PO/DO/VO/DTO/BO/POJO概念与区别
  • 原文地址:https://www.cnblogs.com/king2016/p/5980828.html
Copyright © 2011-2022 走看看