引言

灵感来源于eurkon。单靠肉眼识别字体大小来判断标题等级不是件容易的事情，若 h1~6 标题使用不同图标的话，那么识别会容易许多。

小插曲：我之前在此问题上花了很多功夫，比如加大各等级标题字体大小之间的差值（肉眼还是难以分别）、更换颜色（确实好分辨，但主色过多不符合我对网站视觉美感的要求）、部分标题加不同样式的左边框（还是不太符合视觉美感要求，不够直观）

实现方法

在<Custom>.css里添加以下代码

1
2
3
4
#article-container h1:before {
  content: "<Custom>";
}
/* h2~6以此类推 */

其中<Custom>部分可以填写一下内容：

  • H¹、H²、H³、H⁴、H⁵、H⁶
  • H₁、H₂、H₃、H₄、H₅、H₆
  • H1、H2、H3、H4、H5、H6
  • fontawesome的 icon 图标代号（例如’\f06c’）
  • 可以加阿里图标
1
2
3
4
#article-container h1:before {
  font-family: "iconfont";
  content: "<Custom>"; /*阿里图标的Unicode*/
}

Hexo 三连即可看到效果

参考链接：https://blog.harriswong.top/posts/9d49f75f/