不得不感叹，ai时代的强大，博主的本职是一个运维，对前端和CSS懂的不多，用的软件是Hugo，其实对这个也一窍不通，就是选了一个自己看得顺眼的theme，然后就是用来写文章，期间也尝试去做些改变，均已失败告终，主要是对hugo、theme、css不清楚，也不知道怎么改。
现在有了AI的加持，这个一直用了好多年的blog的样子也看烦了，准备换掉。
旧的界面：
新的界面：
用了gemini，花了一天时间，主要是嫌弃底部的前一页、后一页看起来永无止境，于是让ai搓了一个底部导航条。也定制了css。确实惊艳一枪
但是过程中吧，用到了一个开源的字体：OPPOSans-Regular.ttf ，OPPO手机的字体，这个文件居然有9兆之巨
完犊子了，加载字体都要花半天时间，这也太恐怖了，于是搜优化方案
那就是压缩字体，把博客中出现的所有字扫描一遍，然后生成小字体文件，这样就好了
那就要用到 glyphhanger 了
注意：这个软件用起来及其麻烦，一定要在Windows下装，Linux下简直是垃圾成堆
本体是一个nodejs的软件，用到了python的fonttools，还装了puppyteer进行网页的抓取，简直是杂烩大集合
# 要压缩成woff2，所以要装python的2个包
npm install -g glyphhanger
pip install fonttools
pip install brotli
#打开hugo的预览，http://localhost:1313/
hugo serve
# 当前目录下的OPPOSans-Regular.ttf，生成压缩过的字体文件，格式是woff2
glyphhanger --subset OPPOSans-Regular.ttf --formats=woff2 --output ./ http://localhost:1313/posts/
ttf的完整字体经过压缩成woff2，从9兆变成了4.52兆，然后扫描网页后又压缩到了最终的75.5KB.
这会生成一个OPPOSans-Regular-subset.woff2的新字体文件，75.5KB
没完呢，我们还要在CSS里指定字体范围
# 压缩字体文件，同时生成CSS样式
glyphhanger --css --subset fonts/OPPOSans-Regular.woff2 --formats=woff2 --output newfonts http://localhost:1313/posts/
会生成CSS文件，我们把它放进定制的custom.css中即可
@font-face {
font-family: OPPO Sans;
src: local("OPPO Sans"),
url(OPPOSans-Regular-subset.woff2) format("woff2");
unicode-range: U+A,U+20-3E,U+40-7D,U+A9,U+B7,U+BB,U+2013,U+25BA,U+2705,U+3001,U+3002,U+4E00,U+4E09-4E0B,U+4E0D,U+4E14,U+4E1A,U+4E1C,U+4E24,U+4E2A,U+4E2D,U+4E34,U+4E3A,U+4E3B,U+4E48,U+4E49,U+4E4B,U+4E4E,U+4E50,U+4E5F,U+4E66,U+4E71,U+4E86,U+4E89,U+4E8B,U+4E8C,U+4E8E,U+4E94,U+4E9B,U+4EA6,U+4EA7,U+4EAB,U+4EBA,U+4ECA,U+4ECE,U+4ED3,U+4EE3-4EE5,U+4EEC,U+4EF6,U+4EFB,U+4EFD,U+4F01,U+4F1A,U+4F20,U+4F3C,U+4F46,U+4F53,U+4F55,U+4F59,U+4F5C,U+4F60,U+4F73,U+4F7F,U+4FBF,U+4FDD,U+4FE1,U+4FEE,U+5019,U+503C,U+5047,U+504F,U+505A,U+50CF,U+513F,U+5143,U+5148,U+5165,U+5168,U+516B,U+516C,U+5171,U+5173,U+5176,U+5177,U+517C,U+5185,U+518D,U+5197,U+5199,U+51B3,U+51B5,U+51C0,U+51C6,U+51FA,U+51FB,U+51FD,U+5206,U+5212,U+5219-521B,U+521D,U+5220,U+522B,U+5230,U+524D,U+526F,U+529E-52A1,U+52A8,U+52B2,U+5305,U+5316,U+5355,U+535A,U+5360,U+5361,U+5373,U+5386,U+53BB,U+53C2,U+53C8,U+53CA,U+53D1,U+53D6,U+53D8,U+53E3,U+53E4,U+53EA,U+53EF,U+53F0,U+53F7,U+53F8,U+5404,U+540C-540E,U+5411,U+5426,U+5427,U+542F,U+544A,U+5462,U+547D,U+548C,U+54EA,U+554A,U+5565,U+5668,U+56DB,U+56DE,U+56E0,U+56E7,U+56FD,U+56FE,U+5728,U+5730,U+573A,U+5740,U+5757,U+578B,U+57DF,U+585E,U+5883,U+589E,U+5904,U+5907,U+590D,U+5916,U+591A,U+5927,U+5929,U+592A,U+5931,U+5948,U+597D,U+5982,U+59CB,U+5B50,U+5B57,U+5B58,U+5B83,U+5B89,U+5B8C,U+5B98,U+5B9A,U+5B9E,U+5BA2,U+5BB6,U+5BB9,U+5BBD,U+5BC6,U+5BCC,U+5BF9,U+5BFC,U+5C01,U+5C06,U+5C31,U+5C3D,U+5C45,U+5DDE,U+5DF1,U+5DF2,U+5E02,U+5E03,U+5E38,U+5E72-5E74,U+5E76,U+5E78,U+5E7F,U+5E8F,U+5E93,U+5E94,U+5EFA,U+5F00,U+5F04,U+5F0F,U+5F20,U+5F31,U+5F39,U+5F52,U+5F53,U+5F55,U+5F85,U+5F88,U+5F97,U+5FAA,U+5FC3,U+5FC5,U+5FD7,U+5FEB,U+6000,U+6001,U+600E,U+601D,U+6027,U+603B,U+6062,U+606F,U+6089,U+60A8,U+60C5,U+60F3,U+6109,U+610F,U+613F,U+6210-6212,U+6216,U+6237,U+623F,U+6240,U+624B,U+624D,U+6253,U+6254,U+6258,U+6267,U+6269,U+627E,U+6280,U+628A,U+62A5,U+62C9,U+62DF,U+62E9,U+62EC,U+62FF,U+6301,U+6307,U+6309,U+636E,U+6377,U+6389,U+6392,U+63A5,U+63A8,U+641C,U+642D,U+6446,U+6447,U+64CD,U+652F,U+6539,U+653E,U+6545,U+6570,U+6574,U+6587,U+65AD,U+65B0,U+65B9,U+65E0,U+65E5,U+65E9,U+65F6,U+660E,U+6613,U+662F,U+663E,U+666F,U+66B4,U+66F4,U+6700,U+6708,U+6709,U+670D,U+671F,U+672A,U+672C,U+672F,U+673A,U+6743,U+6765,U+677E,U+677F,U+6790,U+679C,U+67D0,U+67E5,U+6807,U+6837-6839,U+683C,U+6848,U+6863,U+68AD,U+68C0,U+6A21,U+6B21,U+6B4C,U+6B62,U+6B63,U+6B65,U+6B7B,U+6BB5,U+6BCF,U+6BD4,U+6C42,U+6C89,U+6CA1,U+6CD5,U+6CE8,U+6D3B,U+6D4B,U+6D88,U+6DFB,U+6E05,U+6E90,U+6EE5,U+6F0F,U+706B,U+70B9,U+70C2,U+70E6,U+7130,U+7136,U+7167,U+719F,U+723D,U+7248,U+7279,U+72B6,U+72EC,U+73A9,U+73AF,U+73B0,U+7406,U+751F,U+7528,U+7531,U+754C,U+7591,U+7684,U+76D6,U+76EE,U+76F4,U+76F8,U+7701,U+770B,U+771F,U+77E5,U+77ED,U+7801,U+7814,U+786E,U+793A,U+79BB,U+79CD,U+79D2,U+79DF,U+79F0,U+79FB,U+7A00,U+7A0B,U+7A76,U+7A7A,U+7ACB,U+7AD9,U+7ADE-7AE0,U+7AEF,U+7B2C,U+7B49,U+7B54,U+7B7E,U+7B80,U+7B97,U+7BA1,U+7C7B,U+7CFB,U+7D22,U+7E41,U+7EA7,U+7EAF,U+7EC6,U+7ECF,U+7ED3,U+7ED9,U+7EDC,U+7EDF,U+7EED,U+7F3A,U+7F51,U+7F6E,U+7F72,U+7FA4,U+8003,U+8005,U+800C,U+800D,U+8017,U+804C,U+8054,U+80AF,U+80CC,U+80FD,U+8106,U+8111,U+811A,U+817E,U+81EA,U+81F4,U+8272,U+8282,U+8350,U+83B7,U+83DC,U+85CF,U+8651,U+865A,U+884C,U+88AB,U+88C2,U+88C5,U+88D5,U+897F,U+8981,U+8986,U+89C9,U+89D2,U+89E3,U+8A00,U+8B66,U+8BA1,U+8BA2,U+8BAF,U+8BB2,U+8BBA,U+8BBE,U+8BBF,U+8BC1,U+8BD5,U+8BDD,U+8BE2,U+8BE5,U+8BE6,U+8BED,U+8BEF,U+8BF4,U+8BF7,U+8C03,U+8C37,U+8C61,U+8D25,U+8D44,U+8D70,U+8D77,U+8DD1,U+8DDF,U+8DEF,U+8DF3,U+8DF5,U+8F7B,U+8F7D,U+8F83,U+8F93,U+8FC1,U+8FC7,U+8FD0,U+8FD4,U+8FD8,U+8FD9,U+8FDB,U+8FDE,U+9000-9002,U+9009,U+901A,U+903C,U+9047,U+904D,U+9053,U+9075,U+90A3,U+90E8,U+90FD,U+914D,U+91CA,U+91CC,U+91CD,U+91CF,U+94FE,U+9501,U+9519,U+952E,U+955C,U+957F,U+95EE,U+95F4,U+9632,U+963B,U+9645,U+964B,U+9650,U+9664,U+968F,U+9690,U+969C,U+96BE,U+96C6,U+9700,U+975E,U+9762,U+9875,U+9876,U+987B,U+9884,U+9891,U+9898,U+9996,U+9AA4,U+9AD8,U+9EBB,U+FF01,U+FF0C,U+FF1A,U+FF1F;
font-style: normal;
font-display: swap;
font-weight: 300 700;
}
把压缩后的字体和CSS再次提交后博客的速度就变得飞快了。
似乎有点不务正业了，感慨，AI委实要让前端要灭亡了。