ttf/otf字体文件压缩
第一步、全局安装font-spider第二步、准备好文件夹第三步、在html和css文件中写入代码第四步、压缩注意:
在压缩前,先获取完整的、包含大多数文字的字体文件
在使用font-spider前,确保自己的电脑已安装node环境
第一步、全局安装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就是提取后的文件
注:如果二次使用,记得要把完整的字体文件从文件夹里提出来