码云 提升网页加载速度之字体包体积优化
目录
当我们的页面加载过多的字体文件时，由于字体包的体积过大，会产生页面加载过慢的问题，所以对字体包体积优化势在必行，从而提升我们网页的加载速度，提升用户体验。
一、font-spider 介绍
font-spider（字蛛）是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。以减小字体包的体积。
1. 官网（可能需要翻墙）：点击这里
2. github 地址：点击这里
3. font-spider特性：
- 压缩字体：智能删除没有被使用的字形数据，大幅度减少字体体积；
- 生成字体：支持 woff2、woff、eot、svg 字体格式生成。
二、安装 font-spider
因为font-spider不是频繁用到的工具，所以使用局部安装。
1. 新建文件夹spider
2. 初始化package.json：
npm init -y
3. 安装：
npm install font-spider
三、如何使用
1. 在spider目录下新建index.html，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>font-spider</title>
<style>
@font-face {
font-family: 'source'; /* 名字自己定义就好 */
/* ttf 字体必须存在，否则会报错 */
src: url('./font/source.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* 若使用以下配置，支持生成其他格式的字体 */
@font-face {
font-family: 'source';
src: url('./font/source.eot');
src:
url('./font/source.eot?#font-spider') format('embedded-opentype'),
url('./font/source.woff2') format('woff2'),
url('./font/source.woff') format('woff'),
/* ttf 字体必须存在，否则会报错 */
url('./font/source.ttf') format('truetype'),
url('./font/source.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/* @font-face 可以支持多个 */
</style>
</head>
<body>
<!-- font-family 与上的对应,如果不写这个文案，应该是默认常用字体 -->
<div style="font-family: source">
<!-- 这里面写入需要用到字体的文案 -->
</div>
</body>
</html>
2. 将对应的字体放到对应的文件夹下。
3. 执行以下代码：
// 语法 npx font-spider [options] // 使用 npx font-spider index.html
执行成功后，font 文件夹中会出现一个.font-spider文件夹，里面的是未压缩的文件，font目录下的字体会被相应的替换，为被压缩后的字体，并且会生成多种格式的字体。
注意事项
- 不支持 javascript 动态插入的元素与样式 .（只能是初始化时，就存在于页面中的文本，并且不能通过 js 进行移除和添加）；
otf字体需要转换成.ttf格式才能被压缩；- 仅支持 utf-8 编码的 HTML 与 CSS 文件；
- CSS content 仅支持
content: 'prefix'和content:attr(value)这两种形式； - 执行命令只能对 html 文件有效。
微信
支付宝声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
码云笔记 » 提升网页加载速度之字体包体积优化
码云笔记 » 提升网页加载速度之字体包体积优化
