前言:
很多时候项目会遇到需要引入外部字体,不管是vue,小程序,react等等,但是pc端项目还好,把源文件放我们本地是可以的,小程序就不行了,因为体量比较小,对大小有限制。
font-spider 字蛛 官网地址:最好有翻墙软件,不然太慢了,大概率不成功
font-spider.org - http://ww1.font-spider.org/
具体使用:
1、全局安装插件
npm install font-spider -g
2、检查有没有安装成功
font-spider -V
3、打开你的目录,找到你的源文件在的文件夹,比如我的
4、新建一个index.html,
注意LouisVuittonGlobal-Regular 等名字换成你自己的源文件
<!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,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>font spider</title>
<style>
@font-face {
font-family: 'LouisVuittonGlobal-Regular';
src: url('./LouisVuittonGlobal-Regular.eot');
src:
url('./LouisVuittonGlobal-Regular.eot?#font-spider') format('embedded-opentype'),
url('./LouisVuittonGlobal-Regular.woff') format('woff'),
url('./LouisVuittonGlobal-Regular.ttf') format('truetype'),
url('./LouisVuittonGlobal-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.medium {
font-family:'LouisVuittonGlobal-Regular';
}
@font-face {
font-family: 'LV_Global_Demi';
src: url('./LV_Global_Demi.eot');
src:
url('./LV_Global_Demi.eot?#font-spider') format('embedded-opentype'),
url('./LV_Global_Demi.woff') format('woff'),
url('./LV_Global_Demi.ttf') format('truetype'),
url('./LV_Global_Demi.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.bold {
font-family:'LV_Global_Demi';
}
</style>
</head>
<body>
<div>
<!-- 这里对应的是Bold的压缩包 -->
<div class="bold">
abcdefghijklmnopqrstuvwxyz
</div>
<!-- 这里对应的是Medium的压缩包 -->
<div class="medium">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
<!-- 这写在class元素之外的就没有对应的压缩包了 -->
0123456789
</div>
</body>
</html>
5、右键打开cmd弹框,或者powershell弹框,执行命令
font-spider index.html
6、可以看到下面的界面,源文件2M,压缩以后是60k左右,还有其他格式可以用
7、美滋滋把,用起来,css引入:
@font-face {
font-family: 'LouisVuittonGlobal-Regular';
src: url("../fonts/LouisVuittonGlobal-Regular.ttf") format('truetype'); //主要是这句话
font-weight: normal;
font-style: normal;
}