2023-07-08  2024-09-18    353 字  1 分钟

1. 下载字体

添加到static/fonts文件夹下,若使用了主题则可以放在主题的fonts文件夹下,如themes/archie/static/fonts

2. 添加字体

fonts.css中添加字体,如themes/archie/assets/css/fonts.css

otf目前可以在大多数浏览器中使用。

/* NotoSansSC Black */
@font-face {
  font-family: 'NotoSansSC Black';
  font-style: black;
  font-weight: 400;
  src: url('../fonts/NotoSansSC-Black.otf') format('opentype');
}
/* NotoSansSC Bold */
@font-face {
  font-family: 'NotoSansSC Bold';
  font-style: bold;
  font-weight: 400;
  src: url('../fonts/NotoSansSC-Bold.otf') format('opentype');
}
/* NotoSansSC Regular */
@font-face {
  font-family: 'NotoSansSC Regular';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/NotoSansSC-Regular.otf') format('opentype');
}

但如果想支持多种浏览器,建议切换到WOFF和TTF字体。

可以通过以下工具转换。https://transfonter.org/

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

3. 引用

在archive主题中,可以通过修改themes/archie/assets/css/main.css来修改某个标签的字体或全局字体

strong {
    font-family: 'NotoSansSC Bold', sans-serif;
    line-height: 1.5;
}