第一步、全局安装font-spider

win+R打开cmd命令窗口，全局安装font-spider：

npm install font-spider -g

查看版本号，查看自己安装是否成功：

font-spider  -V

第二步、准备好文件夹

在项目外的地方准备一个空文件夹，空文件夹里放进一个html文件（或一个html文件和一个css文件），和完整字体文件
文件目录结构如下：

或

第三步、在html和css文件中写入代码

css部分可以写在css文件中，也可以直接写在html文件内

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--link rel="stylesheet" href="./index.css"-->//style部分可以提取出来放在css文件中，使用link引入，也可以直接写在html文件内<style>@font-face {font-family: 'myFont';//自定义字体名字src: url('./myFont.otf')  format('truetype');//引入字体文件font-weight: normal;font-style: normal;}.myFont{font-family: 'myFont';}</style>
</head><body><!-- 这里对应的是Bold的压缩包 -->//将想要提取的文字放在这里<h1 class="myFont">这里是你想要提取的文字</h1>
</body></html>

第四步、压缩

在html所在的目录执行命令：

font-spider index.html

运行结束后，目录结构将变成：

.font-spider文件夹里放的是原来的完整的字体文件
myFont就是提取后的文件

注：如果二次使用，记得要把完整的字体文件从文件夹里提出来

字蛛（font-spider）教学——ttf/otf字体文件压缩相关推荐

字体文件压缩——字蛛(FontSpider)
简介字蛛(FontSpider) 是一个中文字体压缩器: 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器 ...
html字体库otf文件使用,在webpack中加载.otf字体文件的正确方法是什么？
使用webpack时加载.otf字体文件的适当方式是什么?我曾多次尝试包括在我的webpack.config.js的规则,没有任何成功的基础上,很多例子我大致如下的线路看出:对于在webpack中加载 ...
字体文件压缩 - font-spider (字蛛)
优化加载速度, 压缩字体文件安装: npm install font-spider -g 查看版本: font-spider -v 1. 新建一个fonts文件 2. fonts下新建index. ...
Linux安装TTF/OTF字体
本文转载(有改动),来源:http://www.zhixing123.cn/ubuntu/38758.html Linux下面安装TTF字体已经在最近几年的版本中变得非常容易,双击打开然后点击安装即可 ...
通过上传ttf或者otf字体文件生成对应字体的图片
由于项目需求,需要通过上传的字体文件来生成对应的图片以方便用户快速查看字体效果,经查阅信息后完成此需求,记录下此以供日后学习巩固.根据思路,首先是获取到字体文件的url,然后根据url获取到字体文件, ...
android 字体文件压缩,Android创建assets文件夹并使用字体图标（Icon Font）
首先我们要知道如何在AS中新建引用assets文件 1.将项目切换到Project模式 Project.png 2.要注意assets文件夹要跟Java文件在同一目录下,都包含在main的文件下面. ...
ttf类型的字体文件压缩
一般我们会在web项目中用到一些比较漂亮的字体,比如说fangzheng.ttf等这些字体,但是这些字段往往有好几MB,对网页不太友好,此时我们就想到把这些字体进行压缩,这里只说一下结论,font-s ...
font-spider-plus字体文件压缩
中文字体文件一般都非常庞大,本地开发使用时可能感觉不到,但是部署到服务器之后,会发现页面加载速度被明显拖慢,一个字体文件可能要加载2分钟(增加页面2分钟白屏时间). 只在字库中保留页面中出现的文字,将 ...
android 字体文件压缩,Android 字体使用踩坑指南
Android 字体使用踩坑指南最近项目改版,根据ui的设计,需要使用到三字体.在使用过程中遇到一些坑,于是有了这个避坑指南! 字体压缩第一个坑!字体库的体积太大. 字体压缩的前提是要使用的内容是 ...
TextView 使用otf字体文件
先上代码: Typeface typeFace = Typeface.createFromAsset(getAssets(),"fonts/value_bold.otf");tvM ...

字蛛（font-spider）教学——ttf/otf字体文件压缩

ttf/otf字体文件压缩

第一步、全局安装font-spider

第二步、准备好文件夹

第三步、在html和css文件中写入代码

第四步、压缩

字蛛（font-spider）教学——ttf/otf字体文件压缩相关推荐

最新文章

热门文章