码云 提升网页加载速度之字体包体积优化
AI 概述
一、font-spider 介绍二、安装 font-spider三、如何使用注意事项
当我们的页面加载过多的字体文件时，由于字体包的体积过大，会产生页面加载过慢的问题，所以对字体包体积优化势在必行，从而提升我们网页的加载速度，提升用户体验。
一、font-spider 介绍
font-spider（字蛛）是一个智能 WebFont 压缩...
目录
当我们的页面加载过多的字体文件时，由于字体包的体积过大，会产生页面加载过慢的问题，所以对字体包体积优化势在必行，从而提升我们网页的加载速度，提升用户体验。
一、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 文件有效。
以上关于提升网页加载速度之字体包体积优化的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 提升网页加载速度之字体包体积优化
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 提升网页加载速度之字体包体积优化
