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

1. 下载字体

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

2. 添加字体

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

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

 1/* NotoSansSC Black */
 2@font-face {
 3  font-family: 'NotoSansSC Black';
 4  font-style: black;
 5  font-weight: 400;
 6  src: url('../fonts/NotoSansSC-Black.otf') format('opentype');
 7}
 8/* NotoSansSC Bold */
 9@font-face {
10  font-family: 'NotoSansSC Bold';
11  font-style: bold;
12  font-weight: 400;
13  src: url('../fonts/NotoSansSC-Bold.otf') format('opentype');
14}
15/* NotoSansSC Regular */
16@font-face {
17  font-family: 'NotoSansSC Regular';
18  font-style: normal;
19  font-weight: 400;
20  src: url('../fonts/NotoSansSC-Regular.otf') format('opentype');
21}

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

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

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

3. 引用

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

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

除另有声明外本博客文章均采用 知识共享 (Creative Commons) 署名 4.0 国际许可协议 进行许可转载请注明原作者与文章出处