目录

博客字体精简笔记

注意
本文最后更新于 2021年11月29日,若内容或图片失效,请留言反馈。

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

安装字蛛

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

1
npm install font-spider -g

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

1
font-spider -V

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

处理本博客的所有汉字

提取html所用到汉字

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

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

望各位大佬多多赐教🙏

html文件引入字体文件:

1
2
3
4
5
6
7
8
9
<style>
	@font-face {
	font-family:RegularFont;
	src: url(LXGWWenKaiMono-Regular.ttf) format('truetype')
	}
	body {
		font-family:"RegularFont" !important;
	}
</style>

当前文件夹下,右键打开终端:

命令行:

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

FontCreator软件使用

仅保留需要的字形

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

转换字体格式

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

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

第一步FontCreator软件打开字体文件;

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

字体渲染时机

渲染机制

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

  • IE: 它会直接使用备用字体渲染,最后等webfont字体加载完毕后重新渲染。

  • Safari: 它会一直等待webfont字体加载完毕,并且期间不会渲染字体。

  • Chrome / Firefox: 它们会等待webfont字体加载,如果在3秒之内没有加载完毕,则使用备用字体渲染。最后webfont加载完毕,使用并重新渲染。

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

使用方法

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

1
2
3
4
@font-face {
  font-family: 'myfont';
  src: url('./myfont.woff2') format('woff2');
}
注意
CSS 中只需要定义字体就行,而不要使用使用这个字休。

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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>

这样浏览器一开始就会使用默认字体渲染内容,等字体加载完成后再使用特殊字体重新渲染。

参考链接


微信扫一扫 分享朋友圈 avatar