博客字体精简笔记

为博客更换了字体，为了提升加载速度，将字体作精简处理……

安装字蛛

第一步 将字蛛用npm方式安装到全局，需在命令后面加 -g；

1	npm install font-spider -g

第二步 查看是否安装成功：

1	font-spider -V

安装成功将会显示版本号；

处理本博客的所有汉字

提取html所用到汉字

在桌面新建一个空文件夹；
复制public文件夹到新建的文件夹内；
右键用everything搜索.html；
打开批量重命名软件，将搜索出来的结果选中，全部拖入重命名软件中；
任意重命名代编号的，保证每个文件的名字都不重复；
再将重命名后的.html文件复制到新文件夹内（public文件可以删除了）；
打开html2txt软件，将新文件夹内的.html文件拖入软件窗口；
设置保存文件夹位置，执行「开始转换」；
将所有的txt文件合并到一个txt文件内，~~在转换后的txt文件夹内打开「终端」执行命令：~~
1
type *.txt >> D:\Desktop\aa.txt
2022年12月25日更新：
在转换后的txt文件夹内新建一个任意名的空白文档，将以下代码复制进去，保存为.bat格式，并双击运行；
1
copy *.txt aa.txt
用vscode打开刚刚合并完的txt文件，用正则表达式[a-zA-Z]、[0-9]、[\n]将多余的删除，简单清理一下文本内容；
将整理好的txt文本粘贴到引入有字体的html文件内；
将「字体」文件和.html文件放在同一目录；
当前文件夹下，右键打开终端：执行此行命令：
1
font-spider aa.html
用High-Logic FontCreator软件打开精简后的.ttf后缀字体文件，
文件 –> 输出字体为 –> 输出网页字体（woff/woff2）–> 选择版本2 –> Export；

这只是一个笨办法，耗时费力，不过目前还没有摸索出更简便的方法，只好如此了，如果各位看客有更好的操作办法，请留言区交流……

望各位大佬多多赐教🙏

html文件引入字体文件：

<style>
	@font-face {
	font-family:RegularFont;
	src: url(LXGWWenKaiMono-Regular.ttf) format('truetype')
	}
	body {
		font-family:"RegularFont" !important;
	}
</style>

当前文件夹下，右键打开终端：

命令行：

1	font-spider 常用字.html

.font spider 文件夹下会备份原字体；
「常用字.html」文件中含有常用6500字及字母、数字、标点；
若没有的字可按需增加即可；

FontCreator软件使用

仅保留需要的字形

打开原字体文件；
新建一个空白字体文件；
在原字体用字符编码查询到的值搜索定位到需要的字（也可以直接输入文字查询）；
在新建空白字体中插入字形；
将需要的字符复制到新建字体中插入的字形位置；
右键字形属性，填入字码点（$+刚查询到的字符编码）；
以此类推，完成自己所需的所有字体；
导出网页使用字体，后缀woff2；

转换字体格式

现在各主流设备基本都已经支持woff2字体格式（貌似只有除了opera和IE），因此网站中没有必要再引入多种不同格式的字体了，一般只引入woff2就好了;

使用FontCreator软件可以很轻松的完成字体格式间的转换，；

第一步 用FontCreator软件打开字体文件；

第二步 文件 –> 输出字体为 –> 可以选择 输出电脑字体（ttf、otf、fon） 和 输出网页字体（woff/woff2） ；

字体渲染时机

渲染机制

在远程字体还没有加载完成，浏览器会使用什么字体渲染呢？事实上，不同的浏览器表现会不一样的，以下是一些常见的桌面浏览器的表现：

IE： 它会直接使用备用字体渲染，最后等webfont字体加载完毕后重新渲染。
Safari： 它会一直等待webfont字体加载完毕，并且期间不会渲染字体。
Chrome / Firefox： 它们会等待webfont字体加载，如果在3秒之内没有加载完毕，则使用备用字体渲染。最后webfont加载完毕，使用并重新渲染。

想要统一这些行为，比较理想的行为是：先使用系统默认字体，等到远程字体加载完成了再替换成特殊字体。借助于WebFontLoader可以很容易的实现这一效果:

使用方法

在css中通过@font-face定义一个字体：

@font-face {
  font-family: 'myfont';
  src: url('./myfont.woff2') format('woff2');
}

CSS 中只需要定义字体就行，而不要使用使用这个字休。

然后在页面引入webfontloader，将你在css中定义的字体名称添加到custom.families列表中，并在active回调中将该字体添加到对应的元素上，代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script> WebFont.load({
  custom: {
    families: ['myfont'],
  },
  classes: false,
  active() {
    document.body.style.fontFamily = 'myfont';
  },
}); </script>