font-spider(字蛛)官网:
字蛛
github源码
安装
先要安装npm与node
安装好之后就可以直接安装字蛛
我用了centos的服务器 用npm全局安装font-spider
# npm install font-spider -g
安装之后输入
# font-spider
看到下面的就说明安装成功了
使用方式
首先要有项目中的html文件 在其外联的css样式中要规定字体文件
创建的css文件 我这里命名为css.css
在 CSS 中使用 WebFont:
@font-face{
font-family:'汉仪乐喵体简';
src:url(../HYLEMIAOTIJ.TTF);
}
body{
font-family:"汉仪乐喵体简";
}
文件并不是全部都需要只要其中有一个就行。在生成新的字体文件的时候所有对应的格式都会生成
在html中外联这个css文件
font.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>main</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div>这是测试的字1234567890!@#$%^</div>
</body>
</html>
在使用fonts-spider之前先cd到目标文件目录 就是你需要生成的新的字体文件的html目录
或者写全目录
使用font-spider生成:
# font-spider *.html
*是通配符 代表所有的html文件
输入之后回车开始生成:
我这里由于测试的html中字少 所以字体文件只有8kb左右 实际情况下如果html中字的种类越多 生成的字体文件越大 但是绝对比原来的字体文件小很多
生成完毕的字体文件会代替原来的字体文件,而原来完整的字体文件会进入到当前目录下的一个叫.font-spider的隐藏文件中
开心。-。 以后再也不怕设计稿用个大段的特殊字体了。当然最好的解决办法就是尽量别在网页上用特殊字体!
欢迎评论点赞哦