使用font-spider优化字体

229 阅读1分钟

1.全局安装font-spider npm install font-spider -g

2.font-spider -v 查看是否安装成功

3.在同一目录下 放置index.css index.html 字体.tff
需要什么文件src再引入

@font-face {
    font-family: 'PingFangRegular';
    src: url("./PingFangRegular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

.medium {
    font-family: 'PingFangRegular';
}

ctrl+a 可以获取网页所有文字

<!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>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div>
        <!-- 这里对应的是Bold的压缩包 -->
        <!-- 这里对应的是Medium的压缩包 -->
        <div class="medium">


        </div>
        <!-- 这写在class元素之外的就没有对应的压缩包了 -->
    </div>
</body>

4.运行 font-spider index.html 即可获得压缩过后的字体文件