220 lines
9.8 KiB
HTML
220 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
|
|
<head>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>利用fontspider压缩博客字体大小，达到加快访问速度</title>
|
|
<link rel='stylesheet' href='/css/light.css'>
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
<link rel="stylesheet" href="/css/normalize.css">
|
|
<link rel="stylesheet" href="/css/remixicon.css">
|
|
<link rel="stylesheet" href="/css/uikit.min.css">
|
|
<link rel="stylesheet" href="/css/nprogress.min.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
|
|
<link rel="stylesheet" href="/css/barrager.css">
|
|
<script src="/js/jquery.min.js"></script>
|
|
<script src="/js/jquery.barrager.js"></script>
|
|
<script src="/js/jquery.scrollUp.min.js"></script>
|
|
<script src="/js/pjax.js"></script>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
|
|
|
|
<script>console.log("\n %c Amigo Theme %c https://usj.cc \n", "color: #fadfa3; background: #030307; padding:3px; font-size:12px;", "color: #ffffff;background: #16171a; padding: 3px; font-size: 12px;");</script>
|
|
<meta name="keywords" content="大学,教程,blog,优世界,优设计,博客,大学生博客,生活,文案," />
|
|
<meta name="template" content="Ying" />
|
|
</head>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="main">
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="head_author_img load-memos-editor">
|
|
<img src="https://avatars.githubusercontent.com/u/94612053" class="blog-img" width="80" height="80" alt="优世界" />
|
|
</div>
|
|
<div class="site-description">
|
|
<h2><span class="uk-invisible">风吹云散，云卷云舒</span></h2>
|
|
<nav class="nav social uk-visible@m">
|
|
<ul class="flat">
|
|
|
|
|
|
<a href="https://pan.usj.cc" title="GitHub" target="_blank"><i class="ri-cloudy-2-line"></i></a>
|
|
|
|
<a href="https://space.bilibili.com/525472039" title="Twitter" target="_blank"><i class="ri-bilibili-line"></i></a>
|
|
|
|
<a href="https://github.com/imzql" title="LinkedIn" target="_blank"><i class="ri-github-fill"></i></a>
|
|
|
|
|
|
</ul>
|
|
<div class="yiyandes">风吹云散，云卷云舒</div>
|
|
</nav>
|
|
</div>
|
|
<nav class="nav">
|
|
<ul class="flat">
|
|
<li class="active"><a href="https://usj.cc/">首页</a></li>
|
|
<li class="active"><a href="https://usj.cc//about">关于</a></li>
|
|
<li class="active"><a href="https://usj.cc//says">留言</a></li>
|
|
<li class="active"><a href="https://usj.cc//archives">归档</a></li>
|
|
<li class="active"><a href="https://usj.cc//links">友链</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
|
|
<div id="pjax-container">
|
|
<article style="margin-bottom: 3.5em;">
|
|
<h1 class="post-title" itemprop="name headline">利用fontspider压缩博客字体大小，达到加快访问速度</h1>
|
|
<div class="meta">
|
|
作者: 小赵同学 浏览: 字数: 862 分类:
|
|
|
|
<a href="%e6%95%99%e7%a8%8b">教程</a>
|
|
|
|
</div>
|
|
<div class="post-content" itemprop="articleBody">
|
|
<h2 id="前言">前言</h2>
|
|
<p>作为一个博客的发烧友，最喜欢给自己主题diy各种花里花哨的字体</p>
|
|
<p>因为默认的字体微软雅黑总差点意思，但是一般的字体大都很大</p>
|
|
<p>有的甚至大到7mb，10mb的，都有，这对于小水管服务器十分的不友好</p>
|
|
<p>特别是一些国外的小鸡且带宽不理想的小鸡，可能访客文章都看完，博客字体还没加载完</p>
|
|
<p>前段时间有博友私聊我，博客的字体怎么压缩，那时候在准备四级，简单的回复了一下</p>
|
|
<p>今天考完，写一下方法给有需要的朋友，很简单</p>
|
|
<h2 id="感谢fontspider作者">感谢fontspider作者</h2>
|
|
<p>项目地址：https://github.com/aui/font-spider</p>
|
|
<h2 id="准备node和npm环境">准备node和npm环境</h2>
|
|
<p>这个可以在nodejs官网下载</p>
|
|
<p><a href="https://nodejs.org/en/download">https://nodejs.org/en/download</a></p>
|
|
<p>安装的时候选择add to path 这样就可以直接安装node和npm环境</p>
|
|
<p>因为程序化，基本上一直默认勾选就可以安装了，很简单</p>
|
|
<p>但是如何自己校验自己的win系统是否安装了这两个环境了，只需要win+R输入cmd</p>
|
|
<p>召唤出自己的pc端的cmd控制台，输入node-v和npm-v，就如下图我这样，就表示安装完毕</p>
|
|
<p><img src="/pics/2022/06/4046170908.png" alt=""></p>
|
|
<h2 id="全局安装-font-spider">全局安装 font-spider</h2>
|
|
<p>这里我们还是老样子 win + R 输入cmd，输入</p>
|
|
<pre><code>npm install font-spider -g
|
|
</code></pre>
|
|
<p>如果提示这个，就代表搞定了</p>
|
|
<p><img src="/pics/2022/06/3204045101.png" alt=""></p>
|
|
<h2 id="开始压缩字体">开始压缩字体</h2>
|
|
<p>我们首先在桌面创建文件夹，注意尽量是英文，例如ziti</p>
|
|
<p>然后在文件夹里面把自己需要压缩的字体放在该ziti文件夹</p>
|
|
<p>因为考虑到一些朋友不会css，所以这里我已经给各位朋友压缩好了，直接下载解压就可以了</p>
|
|
<p><a href="https://wwi.lanzoup.com/iM6ur0695bcj">https://wwi.lanzoup.com/iM6ur0695bcj</a></p>
|
|
<p>我们将自己需要压缩的字体ttf文件拖入该文件夹即可，然后将该字体ttf文件的文件名改为font.ttf</p>
|
|
<p>注意：这里需要解压成文件夹放在桌面上哦，否则无法执行字体压缩</p>
|
|
<p><img src="/pics/2022/06/1554922097.png" alt=""></p>
|
|
<p>这里我原字体的大小是15mb，这里我把它拖到ziti文件夹里面，将该字体命名为font.ttf</p>
|
|
<p><img src="/pics/2022/06/2949738509.png" alt=""></p>
|
|
<p>然后打开cmd 控制台输入以下代码</p>
|
|
<pre><code>cd ziti
|
|
</code></pre>
|
|
<p>然后再输入以下代码，这样就可以了</p>
|
|
<pre><code>font-spider index.html
|
|
</code></pre>
|
|
<p>然后你会发现自己ziti文件夹会多出一个font-spider文件夹，此文件夹里面的font.ttf就是压缩前的字体</p>
|
|
<p>根目录则是已经压缩后的字体，还有其他格式字体，该工具全部帮你压缩，直接应用到网页即可，非常方便</p>
|
|
<p><img src="/pics/2022/06/1342016947.png" alt=""></p>
|
|
<p>再看看被压缩的ttf字体大小，居然不到几kb</p>
|
|
<p><img src="/pics/2022/06/3372263093.png" alt=""></p>
|
|
<p>是不是很方便！</p>
|
|
|
|
</div>
|
|
<div class="post-tags" style="margin-top: -30px;">
|
|
<nav class="nav tags">
|
|
<ul class="flat">
|
|
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</article>
|
|
<hr class="uk-divider-icon">
|
|
<div id="comments" class="comments-area">
|
|
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/@waline/client@v3/dist/waline.css"
|
|
/>
|
|
<div id="waline"></div>
|
|
<script src="https://cdn.jsdelivr.net/npm/@waline/client"></script>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
|
|
var currentPath = "\/post\/83\/";
|
|
console.log(currentPath);
|
|
|
|
fetchCommentsAndCreateBarrager(currentPath, {
|
|
looper_time: 3000,
|
|
defaultAvatar: 'static/default-avatar.png',
|
|
defaultInfo: 'No comment',
|
|
defaultLink: '#',
|
|
close: true,
|
|
speed: 6,
|
|
color: '#fff',
|
|
old_ie_color: '#000000'
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="footer">
|
|
<nav class="nav" style="clear: both;">
|
|
© 2019 - 2024
|
|
<br>
|
|
<a href="https://beian.miit.gov.cn/" target="_blank"><span style="color:#999999;">鄂ICP备2022015735号-1</span></a>
|
|
<br>
|
|
本站由<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="blank" title="又拍云"
|
|
style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
|
|
<span style="color: var(--contentColor);font-weight: 700;">又拍云CDN</span>
|
|
</a>提供CDN加速服务
|
|
<br>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/js/iconfont.js"></script>
|
|
<script src="/js/lightgallery.umd.min.js"></script>
|
|
<script src="/js/uikit.min.js"></script>
|
|
<script src="/js/EasyLazyload.min.js"></script>
|
|
<script src="/js/view-image.min.js"></script>
|
|
<script src="/js/main.js"></script>
|
|
<script src="/js/mypjax.js"></script>
|
|
<script src="/js/nprogress.js"></script>
|
|
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@waline/client"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
if (document.querySelector("#waline")) {
|
|
Waline.init({
|
|
el: '#waline',
|
|
serverURL: 'https://waline.usj.cc',
|
|
lang: "zh-cn",
|
|
imageUploader: false,
|
|
search: false,
|
|
copyright: false,
|
|
reaction: [
|
|
'https://s2.loli.net/2023/09/24/EhqxZ6DFIJojGNa.gif',
|
|
'https://s2.loli.net/2023/09/24/qmf5As3evWNXwGQ.gif',
|
|
'https://s2.loli.net/2023/09/24/ueWLPkmYw75x4cs.gif',
|
|
'https://s2.loli.net/2023/09/24/nsC1OGoBKfa8Hel.gif',
|
|
'https://s2.loli.net/2023/09/24/VKuBXqR91TPHnyc.gif',
|
|
'https://s2.loli.net/2023/09/24/2OmAWPeulq4ta8T.gif'
|
|
],
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
|