Blog自定义字体

xiaoze2025-01-122025-03-17

自定义字体

本文操作步骤为 anzhiyu 主题

操作步骤

本文操作步骤以 DingTalk-JinBuTi 为例

在\themes\anzhiyu\source中创建fonts文件夹，并将字体文件复制进去。
在source\css下新建一个font.css文件

@font-face {
  /* 为载入的字体取名字(随意) */
  font-family: 'DingTalk-JinBuTi'; 
  /* 字体文件地址(相对或者绝对路径都可以) */
  src: url('../../fonts/DingTalk-JinBuTi.woff2') format('woff2'),   /* 提供 WOFF2 格式(建议格式) */
      url('../../fonts/DingTalk-JinBuTi.woff') format('woff'),     /* 提供 WOFF 格式 */
      url('../../fonts/DingTalk-JinBuTi.ttf') format('truetype');  /* 提供 TTF 格式 */
  /* 定义加粗样式(加粗多少) */
  font-weight: normal;
  /* 定义字体样式(斜体/非斜体) */
  font-style: normal;
  /* 定义显示样式 */
  font-display: block;
}

属性

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

在 _config.anzhiyu.yml 中添加引入css

1
2
3

inject:
  head:
    - <link rel="stylesheet" href="/css/font.css"> #自定义字体

在 _config.anzhiyu.yml 中修改font-family ，两个都需要修改

# 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: 'DingTalk-JinBuTi'
  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: 'DingTalk-JinBuTi'