使用字蛛对ttf字体文件进行压缩

因为页面需要，就去网上找了个字体下载使用，比如这个网站

但是下载下来的字体文件有近20MB，直接放到网页上需要加载很久，因为字体文件包含了几乎所有的中文字符，但是网页用不了那么多的字，所以下面使用字蛛工具对tff文件进行压缩，实际就是提取你网页中用到的汉字，然后根据原tff文件生成一个新的ttf文件、

参考官网：http://font-spider.org/

我的目录如下

1.首先要安装node.js，然后使用下面命令安装字蛛

npm install font-spider -g

2.在 CSS 中使用 WebFont，我的base.css文件内容如下， .ttf 文件必须要有，其他的文件会自动生成

@font-face {font-family: 'font-logo';src: url('../font/font-jianhu.eot');src:url('../font/font-jianhu.eot?#font-spider') format('embedded-opentype'),url('../font/font-jianhu.woff') format('woff'),url('../font/font-jianhu.ttf') format('truetype'),url('../font/font-jianhu.svg') format('svg');font-weight: normal;font-style: normal;
}
.css-font {font-size: 34px;font-family: "font-logo";
}

PS：调用css尽量使用相对路径，比如： <link rel="stylesheet" href="./css/base.css">

3.运行命令生成新的 ttf 文件， *是匹配所有的html文件名字

font-spider ./*.html

最后生成的文件如下，原来ttf文件会备份到 .font-spider 文件夹中

使用字蛛对ttf字体文件进行压缩相关推荐

LVGL学习之路——基于lv_lib_freetype库的TTF字体文件动态加载中文字体（阿里普惠字体）
前言在学习lvgl中,在英文字体上很多人都用过,但是中文字体往往需要靠取模去实现.那么我就在想,如何像windows那样加载动态的字体呢,这样想做多大字体都行.于是就开始了字体的移植. 什么是t ...
java 解析ttf字体文件
要了解ttf字体文件的原理更方便对代码的理解 package com.maoyan.movie.ttf.encode;public class PostTableHeader {public long ...
【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )
文章目录一.FlutterIcon 下载图标二.自定义 svg 图标生成 ttf 字体文件三.使用下载的 ttf 图标文件四.完整代码示例五.相关资源一.FlutterIcon 下载图标 ...
如何编辑ttf字体文件
libfreetype的目标是以最小的内存最快的速度,读取和渲染字体.因此libfreetype并不适宜用来编辑ttf字体文件. 编辑字体文件,可以用FontCreator.微软fonttools.f ...
ttf文件 python 打开_[译]JS解析TTF字体文件
把字体拖到下边的方框,获取其中的奥妙!点此获取示例ttf字体文件. TTF文件拖到这里在这篇文章,我们计划操作如下: 将字体文件拖入网页,并读取之尽管ttf文件是为C语言读取设计的,但我们仍试图解 ...
.ttf字体文件引入vue项目及使用
出自文章:.ttf字体文件引入vue项目及使用 UED要求使用非系统自带字体 1.在项目的assets文件夹中创建fonts文件夹,将下载好的.ttf字体文件放进去,并创建font.css文件 2.在 ...
win7使用android字体文件,处置win7系统安装TTF字体文件的详细步骤
技术小编发觉操作系统在使用途中会有win7系统安装TTF字体文件的问题,但是很多朋友还不了解win7系统安装TTF字体文件的情况该怎么操作,今天我就来将win7系统安装TTF字体文件的方法分享给你们, ...
css如何引用.ttf字体文件|@font-face
这里复习一下如何在css文件里引用.ttf字体文件. 如下图,红色圈起来的标题需要使用productsans字体,绿色圈起来的小标题需要使用roboto字体,字体文件已下载到fonts文件夹里,接下来 ...
小程序引入ttf字体文件
首先要把我们需要使用的TTF字体文件上传到服务器上,拿到一个网络路径,如下图引入到wxss文件内: 然后直接使用上面我们定义的名称就可以.
使用自定义字体包太大导致加载太慢解决办法用font-spider字蛛解决自定义字体包太大的问题
第一步:创建文件夹 1.创建一个文件夹 2.创建一个index.html 3.创建font文件夹 4.在font文件夹中放入字体文件示例图: 第二步:index.html <!doctype ...

使用字蛛对ttf字体文件进行压缩

使用字蛛对ttf字体文件进行压缩相关推荐

最新文章

热门文章

使用 字蛛 对ttf字体文件进行压缩

使用 字蛛 对ttf字体文件进行压缩相关推荐

最新文章

热门文章

使用字蛛对ttf字体文件进行压缩

使用字蛛对ttf字体文件进行压缩相关推荐