Hexo自定义字体

若雨2024-06-24

基于anzhiyu主题修改

准备好字体文件，推荐woff2格式，在[BlogRoot]\source\css\custom.css（没有就自己创建）中添加以下代码：

css

@font-face {
  /* 为载入的字体取名字(随意) */
  font-family: 'Pors';	
  /* 字体文件地址(相对或者绝对路径都可以) */
  src: url(/font/Porsnold.woff2);
  /* 定义加粗样式(加粗多少) */
  font-weight: normal;
  /* 定义字体样式(斜体/非斜体) */
  font-style: normal;
  /* 定义显示样式 */
  font-display: swap;
}

各个属性的定义：
font-family属性值中使用webfont来声明使用的是服务器端字体，即设置文本的字体名称。
src属性值中首先指定了字体文件所在的路径。
format声明字体文件的格式，可以省略文件格式的声明，单独使用src属性值。
font-style：设置文本样式。取值：normal:不使用斜体；italic:使用斜体；oblique:使用倾斜体；inherit：从父元素继承。
支持格式：.eot(老版本IE)，.otf，.ttf，.woff，*.woff2(推荐)
font-display: 一般为 swap

在主题配置文件_config.anzhiyu.yml中的font配置项以及blog_title_font配置项写上你刚刚引入的字体名称，系统会根据先后次序从前到后依次加载这些字体：

yaml

# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size: 16px
  code-font-size:
  font-family: Pors
  code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

# Font settings for the site title and site subtitle
# 左上角网站名字 主页居中网站名字
blog_title_font:
  font_link:
  font-family: Pors, PingFang SC, 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif