Hexo-Icarus主题字体相关设置

Icarus主题默认使用Google的字体CDN，在每次访问网页时都要访问Google的字体CDN获取字体文件，从而显示在网页上。若是网络不好，就会导致字体文件无法加载，网页文字不能按照预期那样显示。于是想修改Icarus主题加载本地字体，保证网页的字体显示效果。

Icarus主题版本：5.1.0

加载本地字体

首先需要准备一个想用的字体文件，这里我选择开源的霞鹜文楷字体的屏幕阅读版，文件名为LXGWWenKaiScreen.ttf。

打开博客根目录，进入/node_modules/hexo-theme-icarus/source文件夹，在这里新建一个文件夹fonts，然后将字体文件放入。
进入/node_modules/hexo-theme-icarus/source/css文件夹，新建一个custom.styl文件，然后进行编辑。在里面输入：

@font-face {
  font-family: "LXGW WenKai Screen";
  src: url("../fonts/LXGWWenKaiScreen.ttf") format("truetype");
}

然后打开/node_modules/hexo-theme-icarus/include/style/base.styl，修改这两个参数：

$family-sans-serif ?= 'LXGW WenKai Screen', sans-serif
$family-code ?= 'LXGW WenKai Screen', monospace

这时候重新部署Hexo就能看到页面已经使用了本地字体了。

字体裁剪，提高网页加载速度

在修改为本地字体后，会发现网页的加载速度变得很慢，因为这里使用的字体文件高达18MB。中文字符由于每个字都不一样，本身字体文件体积就大，字体文件里还包含了很多不常用的字，甚至包括日韩的字，而我们并不需要让页面加载所有的字。一种方法是使用仅包含简体常用字的字体；另一种方法是将字体文件进行裁剪，使其只包含页面需要显示的文字。
对字体文件裁剪的操作比较繁琐，如果你现在使用的本地字体的响应速度你能够接受可以不进行接下来的操作。

安装fontTools

fontTools是一个处理字体的Python库，想要使用首先需要安装Python，之后通过pip安装：

$ pip install fontTools

基本用法

使用pyftsubset命令可以裁剪字体文件，只保留需要的字符：

$ pyftsubset {源字体文件位置} --text={要保留的字符} --output-file={输出字体文件位置}

提取文字

这里我们只想要让网页加载需要显示的文字，所以需要提取网页源码中的所有文字。这里使用Python遍历根目录内的所有html文件，然后生成一个包含所有文字的txt文件。
首先安装依赖：

$ pip install bs4 lxml requests

首先需要在根目录创建一个文件夹存放源字体文件及保存提取的txt文件。这里我设定目录为/资源/文字处理。
然后新建一个py文件，将以下代码粘贴进去并修改路径：

import os
from bs4 import BeautifulSoup

def extract_text_from_html(html_file):
    with open(html_file, "r", encoding="utf-8") as file:
        soup = BeautifulSoup(file, "html.parser")
        return soup.get_text()

def process_html_files(directory):
    output_dir = os.path.join(directory, "资源", "文字处理") # 注意在这里修改路径
    os.makedirs(output_dir, exist_ok=True)
    output_file = os.path.join(output_dir, "all_content.txt")
    with open(output_file, "w", encoding="utf-8") as outfile:
        for root, _, files in os.walk(directory):
            for file in files:
                if file.endswith(".html"):
                    file_path = os.path.join(root, file)
                    text = extract_text_from_html(file_path)
                    outfile.write(f"Extracted from {file_path}:\n")
                    outfile.write(text + "\n\n")
                    print(f"Processed: {file_path}")

    return output_file

if __name__ == "__main__":
    base_directory = os.getcwd()
    #process_html_files(os.getcwd())

    output_file = process_html_files(base_directory)

    with open(output_file, 'r') as file:
        content = file.read()

    content = content.replace(' ', '').replace('\n', '')

    unique_content = ''.join(sorted(set(content), key=content.index))

    with open(output_file, 'w') as file:
        file.write(unique_content)

    print("处理完成，结果已保存在all_content.txt文件中。")

处理完成后在/资源/文字处理路径下就会出现一个all_content.txt文件，里面包含了网站源码的所有字体。

字体裁剪

接下来使用pyftsubset对字体文件进行裁剪，注意修改路径：

$ pyftsubset 资源/文字处理/LXGWWenKaiScreen.ttf --text-file=资源/文字处理/all_content.txt --output-file=资源/文字处理/处理后的字体.ttf

字体压缩

通过字体裁剪，字体文件体积已经减小了非常多，但仍可以进一步压缩减小文件体积。
使用fontTools的ttLib.woff2模块可以将tff文件进一步压缩成woff2文件。

$ fonttools ttLib.woff2 compress -o node_modules/hexo-theme-icarus/source/fonts/LXGWWenKaiScreen.woff2 资源/文字处理/处理后的字体.ttf

注意修改.woff2字体文件名以及处理后的字体的路径。

修改配置

最后记得在custom.styl内将.tff文件改成.woff2文件。

停用字体CDN

未完待续。。。

修改字体大小

文章内容两端对齐