zoukankan      html  css  js  c++  java
  • 字体压缩

      背景

       在一个项目中,一定要用到某种字体,但是这个字体下下来有10.55MB,这显然是不行的。

      字体压缩的原理就是你要使用的字符单独拿出来,不用的就不包含,这样就可以使得字体文件更小。

      一 :字蛛是一个中文字体压缩器

        字蛛传送门

      先安装好 NodeJS,然后执行

    npm install font-spider -g

      新建文件夹:

      

       index.css内容

        /*声明 WebFont*/
        @font-face {
            font-family: 'test';
            src: url('./KaiGenGothicSC-Normal.ttf');
            font-weight: normal;
            font-style: normal;
        }
    
        /*使用选择器指定字体*/
        .test {
            font-family: 'test';
        }

      index.html内容  

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="./index.css" />
    </head>
    
    
    <body>
    
        <div class="test">
            日期 摄像头
        </div>
    </body>
    
    </html>

     执行命令:

    font-spider index.html
    

      

    限制

    • 不支持 javascript 动态插入的元素与样式
    • .otf 字体需要转换成 .ttf 格式才能被压缩(免费 ttf 字体资源
    • 仅支持 utf-8 编码的 HTML 与 CSS 文件
    • CSS content 仅支持 content: 'prefix' 和 content: attr(value) 这两种形式

       

  • 相关阅读:
    JS常见错误和分析
    angularjs 笔记(1) -- 引导
    各大浏览器hack
    AngularJS 配置和运行phonecat错误
    npm start 作用
    $.prop()和$.attr() 区别用法
    HDU 1251 统计难题 (Tire树)
    Luogu P3370 【模板】字符串哈希
    Luogu P3385 【模板】负环
    LuoguP1563 玩具谜题
  • 原文地址:https://www.cnblogs.com/gaoht/p/14035968.html
Copyright © 2011-2022 走看看