Coder Social home page Coder Social logo

minify-font's Introduction

网页字体文件精简版

网页为了美观可能需要单独加载字体文件,字体文件一般比较大(接近 10M ),并且字体文件中大部分字符都用不到。可以通过删除不常用文字,来减小字体文件大小,加快网页速度。

字体压缩工具

https://ecomfe.github.io/fontmin/

3500 常用字数据

https://github.com/DavidSheh/CommonChineseCharacter
字体(免费可商用) 精简前 精简后
思源黑体 8.1M 834K 下载
阿里巴巴普惠体 9.6M 1M 下载
OPPO Sans 10.1M 1.1M 下载
霞鹜楷体 16.3M 1.7M 下载
小米字体 MiSans 7.9M 833K 下载

手动精简方法

  1. 拷贝字体文件到 fonts 目录
  2. 修改 index.js 文件,把新字体文件添加到编译方法中
  3. 执行 build 方法
npm i
npm run build

新的精简版字体文件输出到 dist 目录中.

本地演示

下载项目,然后直接打开根目录下的 demo.html 文件。

minify-font's People

Contributors

deronw avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.