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 国际许可协议 进行许可。转载请注明原作者与文章出处。