font-spider（字蛛）的正确打开方式

最新推荐文章于 2024-08-20 08:47:13 发布

和代码去流浪

最新推荐文章于 2024-08-20 08:47:13 发布

阅读量487

点赞数

分类专栏： # 前端框架--综合杂项文章标签：前端 font-spider

原文链接：https://juejin.cn/post/6904541605265899527

版权

前端框架--综合杂项专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在Vue项目中遇到ttf字体文件加载慢的问题，通过引入font-spider进行字体压缩。首先安装font-spider依赖，然后在项目根目录创建fonts文件夹存放字体，创建index.css定义@font-face并设置class，再创建index.html引入css并设置字体使用。执行font-spider生成压缩后的ttf文件，并将其应用到项目中，从而减少字体加载时间。

摘要由CSDN通过智能技术生成

前言

最近在部署vue项目之后，在打开网页的时候，ttf文件下载时间实在是太久了，在经过合理的运用搜索引擎之后，可能自己的固化思维消化不了大佬们给出的方案，于是在他们的基础之上做了一些小小的改动，便叙文记之。

1. 引入font-spider的依赖

首先我们执行npm install font-spider -g引入依赖，执行完成后，可以输入font-spider -V来检查是否引入成功

2. 在根目录下创建三个文件

2.1 fonts

这里放入原字体包，Lato-Medium.ttf、Lato-Bold.ttf 这里可以更换为自己想要用到的ttf字体包

2.2 index.css

在这里设置@font-face和对应的class元素,为了方便比较，我们引入两个字体来看对比

@font-face {
    font-family: 'Lato-Medium';
    src: url('./fonts/Lato-Medium.eot');
    src:
        url('./fonts/Lato-Medium.eot?#font-spider') format('embedded-opentype'),
        url('./fonts/Lato-Medium.woff') format('woff'),
        url('./fonts/Lato-Medium.ttf') format('truetype'),
        url('./fonts/Lato-Medium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.medium {
    font-family:'Lato-Medium';
}
@font-face {
    font-family: 'Lato-Bold';
    src: url('./fonts/Lato-Bold.eot');
    src:
        url('./fonts/Lato-Bold.eot?#font-spider') format('embedded-opentype'),
        url('./fonts/Lato-Bold.woff') format('woff'),
        url('./fonts/Lato-Bold.ttf') format('truetype'),
        url('./fonts/Lato-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.bold {
    font-family:'Lato-Bold';
}
复制代码

这里，我们的css工作就做完了，接下来就操作html文件吧

2.3 index.html

这里首先在<head>处要引入index.css文件<link rel="stylesheet" href="index.css">，然后在<body>处压缩我们想要的字体吧，这里只能压缩静态字体哦

<!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的压缩包 -->
        <div class="bold">
            abcdefghijklmnopqrstuvwxyz
        </div>
        <!-- 这里对应的是Medium的压缩包 -->
        <div class="medium">
            ABCDEFGHIJKLMNOPQRSTUVWXYZ
        </div>
        <!-- 这写在class元素之外的就没有对应的压缩包了 -->
            0123456789
    </div>
</body>

</html>
复制代码

这里html里面的写法只会把小写的a～z压缩成Lato-Bold字体，也就是是说Lato-Bold这个ttf文件在被压缩之后，内部只包含了a～z的字体，Lato-Medium同理。

3.生成新的ttf包

做完上面的这些操作之后，就可以执行font-spider index.html生成新的压缩ttf文件了，这个时候，不仅会生成ttf文件，还会生成eot、woff、svg这些文件，我们取我们要用到的ttf文件即可

4.应用到自己的项目中

将生成的ttf文件放到自己的项目文件目录夹下，然后在css文件引入的时候，需要这么写src: url("../fonts/Lato-Bold.ttf") format('truetype');

@font-face {
    font-family: 'Lato-Bold';
    src: url("../fonts/Lato-Bold.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}
复制代码

写在最后

在初次接触这个问题的时候，我看到的都是用.html的方式来使用font-spider方法的，当时我固化思维的就一个劲的查询Vue怎么使用font-spider，搜索结果不尽人意，当时有一种挫败感，什么辣鸡玩意儿，都不支持vue...后面在寻求多方帮助之后，自己沉下心来，终于解决了这个问题。

和代码去流浪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
font-spider（字蛛）的正确打开方式

前言最近在部署vue项目之后，在打开网页的时候，ttf文件下载时间实在是太久了，在经过合理的运用搜索引擎之后，可能自己的固化思维消化不了大佬们给出的方案，于是在他们的基础之上做了一些小小的改动，便叙文记之。1. 引入font-spider的依赖首先我们执行npm install font-spider -g引入依赖，执行完成后，可以输入font-spider -V来检查是否引入成功2. 在根目录下创建三个文件2.1 fonts这里放入原字体包，Lato-Medium.ttf、Lat
复制链接

扫一扫

专栏目录