前言#

这一期继续是 Sakurairo 主题的美化系列，持续记录我的主题自定义过程。这一期是关于字体自定义、首行缩进和增加老文章提示信息。

上一期是：添加网站底部运行时间，图片灯箱自动给图片加链接（fancybox）。

https://hoyue.fun/sakurairo_1.html

字体自定义#

这个很简单，我们可以直接在 css 里做到。当然会发现一些问题，如没有完全被覆盖、访问速度变慢的问题等。因为我的主机地址是在香港的，宽带比较小，而中文的字体文件又比较大，会很影响网站访问速度。或者是使用 googlefonts api，当然可以使用各种其他源来替换，不过你选择的字体就必须是 googlefonts api 支持的了。

对于自己自定义的字体，我们可以对自己的字体进行一系列优化（以下为个人意见）：

转化字体格式；
使用 cdn 存储字体；
动态压缩字体…

首先是转化字体格式，我们知道传统的 ttf 或 otf 格式的字体文件是很大的，我们可以把它转换成一种比较小的格式，例如 woff 或 woff2。在这里我是使用了 woff2 格式的字体。

首先认识下这两种格式：

WOFF 是 Web Open Font Format 几个词的首字母简写。这种字体格式专门用于网上，由 Mozilla 联合其它几大组织共同开发。WOFF 字体通常比其它字体加载的要快些，因为使用了 OpenType (OTF) 和 TrueType (TTF) 字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势，因为所有的现代浏览器都开始支持这种字体格式。

WOFF 2.0 使用 Brotli 压缩，大小比上一版小 30%，相当于 WOFF 的升级版。

我们首先下载好我们的字体文件，根据我们字体文件格式进行转化，这是一些在线字体转换的网站：

TTF TO WOFF2：https://products.aspose.app/font/zh/conversion/ttf-to-woff2 https://cloudconvert.com/ttf-to-woff2
Other WOFF2：https://www.aconvert.com/tw/format/woff2/
字体转化网站大全：https://www.v2ex.com/t/459650

font-sites

转换好了以后我们发现原来很大的字体文件已经减小了很多了。当然只是它减小了可能因为主机宽带不够还是加载缓慢，这时可以把它上传到有 cdn 的对象存储里加快访问速度。

我使用的是腾讯云的 cos，你也可以使用七牛云的免费额度（好像没有 HTTPS）、又拍云的免费额度等满足你的需求，或者购买 cdn 也是可以的。

关于动态压缩字体，即根据你网站需求的字来压缩字体，剔除没用到的字，推荐使用 fonttools。（也可能会出现问题？例如评论等时候出现其他被剔除的字体可能会导致不太美观？）

详情请看：https://hsingko.github.io/post/compress_webfont/

注意：如果你使用了自定义字体，可以直接在 iro 主题设置里 - 全局设置 - 字体设置勾选引用外部字体，填写字体链接和名字，在之后的其他设置里，你若想使用这个字体就可以在使用字体处填写这个名字了。

首行缩进#

[noway]又发现这样简单粗暴会产生很多 bug，建议不要使用！！！[/noway]

我们知道，中文打字在每段开头前会空两格，而英文可能不需要。又因为 GBK 编码中，一个汉字占两个字节，我们可能需要按四下空格才能达到这种效果，而且如果你写文章比较长的时候，这就比较麻烦了。恰好我又是个懒人，所以需要自动首行缩进。

首行缩进实现很简单，只需要给 P 标签加上 style="text-indent:2em;" 就可以了。但在我实际使用中就发现一些问题：

图片会被缩进（灯箱下或者有 lazyload）；
一些嵌入模块会被缩进等。

对于图片，我是采取了把图片默认居中的方法，因为图片居中时，P 标签的缩进会失效。对于嵌入模块我是替换指定关键词代替。当然我图片也替换了一次以防万一，我的代码是：

1
// WordPress 文章首行缩进
2
function paragraph_indentation_sojin($content) {
3
    $content = str_replace('<p>', '<p style="text-indent:2em;">', $content);
4
    $content = str_replace('<p style="text-indent:2em;"><img', '<img', $content);
5
    $content = str_replace('<p style="text-indent:2em;"><iframe class="wp-embedded-content"', '<iframe class="wp-embedded-content"', $content);
6
    return $content;
7
}
8
add_filter('the_content', 'paragraph_indentation_sojin');

只需要把它添加到主题目录的 function.php 中即可。

测试图片： test-image

老文章提示信息#

有时候我们发一些文章可能有时效性，然后有些访问者不知道，他们访问文章时发现文章讲的已经过时了，就会留下不好的影响。所以我们可以在一些分类下，文章发布后指定天数增加一个提示信息，如：

WARNING
本文最后更新于 xxx，已超过 60 天没有更新，可能文章内容已失效，请自行测试！

这样的提示。我们同样是添加下面代码到主题目录的 function.php 中就可以做到了~

1
// 添加老文章提示信息
2
function old_content_message($content) {
3
    $modified = get_the_modified_time('U');
4
    $current = current_time('timestamp');
5
    $diffTime = ($current - $modified) / (60 * 60 * 24);
6
}
7
add_filter('the_content', 'old_content_message');