hexo博客next主题添加自定义字体comic neue

想要添加一个可爱的字体,选了这个http://comicneue.com/

先下载解压,然后把Web文件夹下的所有内容放入这个路径中themes/next/source/fonts

然后themes/next/source/css/_custom/custom.styl在这个官方专门给用户进行自定义美化的文件中加入如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
//字体
@font-face {
font-family: 'Comic Neue';
src: url('/fonts/ComicNeue-Light.eot');
src: url('/fonts/ComicNeue-Light.eot?#iefix') format('embedded-opentype'),
url('/fonts/ComicNeue-Light.woff2') format('woff2'),
url('/fonts/ComicNeue-Light.woff') format('woff'),
url('/fonts/ComicNeue-Light.ttf') format('truetype');
font-weight: 300;
}

@font-face {
font-family: 'Comic Neue';
src: url('/fonts/ComicNeue-Light-Oblique.eot');
src: url('/fonts/ComicNeue-Light-Oblique.eot?#iefix') format('embedded-opentype'),
url('/fonts/ComicNeue-Light-Oblique.woff2') format('woff2'),
url('/fonts/ComicNeue-Light-Oblique.woff') format('woff'),
url('/fonts/ComicNeue-Light-Oblique.ttf') format('truetype');
font-weight: 300;
font-style: oblique;
}

@font-face {
font-family: 'Comic Neue';
src: url('/fonts/ComicNeue-Regular.eot');
src: url('/fonts/ComicNeue-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/ComicNeue-Regular.woff2') format('woff2'),
url('/fonts/ComicNeue-Regular.woff') format('woff'),
url('/fonts/ComicNeue-Regular.ttf') format('truetype');
font-weight: 400;
}

@font-face {
font-family: 'Comic Neue';
src: url('/fonts/ComicNeue-Regular-Oblique.eot');
src: url('/fonts/ComicNeue-Regular-Oblique.eot?#iefix') format('embedded-opentype'),
url('/fonts/ComicNeue-Regular-Oblique.woff2') format('woff2'),
url('/fonts/ComicNeue-Regular-Oblique.woff') format('woff'),
url('/fonts/ComicNeue-Regular-Oblique.ttf') format('truetype');
font-weight: 400;
font-style: oblique;
}

@font-face {
font-family: 'Comic Neue';
src: url('/fonts/ComicNeue-Bold.eot');
src: url('/fonts/ComicNeue-Bold.eot?#iefix') format('embedded-opentype'),
url('/fonts/ComicNeue-Bold.woff2') format('woff2'),
url('/fonts/ComicNeue-Bold.woff') format('woff'),
url('/fonts/ComicNeue-Bold.ttf') format('truetype');
font-weight: 700;
}

@font-face {
font-family: 'Comic Neue';
src: url('/fonts/ComicNeue-Bold-Oblique.eot');
src: url('/fonts/ComicNeue-Bold-Oblique.eot?#iefix') format('embedded-opentype'),
url('/fonts/ComicNeue-Bold-Oblique.woff2') format('woff2'),
url('/fonts/ComicNeue-Bold-Oblique.woff') format('woff'),
url('/fonts/ComicNeue-Bold-Oblique.ttf') format('truetype');
font-weight: 700;
font-style: oblique;
}

@font-face {
font-family: 'Comic Neue Angular';
src: url('/fonts/ComicNeue-Angular-Light.eot');
src: url('/fonts/ComicNeue-Angular-Light.eot?#iefix') format('embedded-opentype'),
url('/fonts/ComicNeue-Angular-Light.woff2') format('woff2'),
url('/fonts/ComicNeue-Angular-Light.woff') format('woff'),
url('/fonts/ComicNeue-Angular-Light.ttf') format('truetype');
font-weight: 300;
}

@font-face {
font-family: 'Comic Neue Angular';
src: url('/fonts/ComicNeue-Angular-Light-Oblique.eot');
src: url('/fonts/ComicNeue-Angular-Light-Oblique.eot?#iefix') format('embedded-opentype'),
url('/fonts/ComicNeue-Angular-Light-Oblique.woff2') format('woff2'),
url('/fonts/ComicNeue-Angular-Light-Oblique.woff') format('woff'),
url('/fonts/ComicNeue-Angular-Light-Oblique.ttf') format('truetype');
font-weight: 300;
font-style: oblique;
}

@font-face {
font-family: 'Comic Neue Angular';
src: url('/fonts/ComicNeue-Angular-Regular.eot');
src: url('/fonts/ComicNeue-Angular-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/ComicNeue-Angular-Regular.woff2') format('woff2'),
url('/fonts/ComicNeue-Angular-Regular.woff') format('woff'),
url('/fonts/ComicNeue-Angular-Regular.ttf') format('truetype');
font-weight: 400;
}

@font-face {
font-family: 'Comic Neue Angular';
src: url('/fonts/ComicNeue-Angular-Regular-Oblique.eot');
src: url('/fonts/ComicNeue-Angular-Regular-Oblique.eot?#iefix') format('embedded-opentype'),
url('/fonts/ComicNeue-Angular-Regular-Oblique.woff2') format('woff2'),
url('/fonts/ComicNeue-Angular-Regular-Oblique.woff') format('woff'),
url('/fonts/ComicNeue-Angular-Regular-Oblique.ttf') format('truetype');
font-weight: 400;
font-style: oblique;
}

@font-face {
font-family: 'Comic Neue Angular';
src: url('/fonts/ComicNeue-Angular-Bold.eot');
src: url('/fonts/ComicNeue-Angular-Bold.eot?#iefix') format('embedded-opentype'),
url('/fonts/ComicNeue-Angular-Bold.woff2') format('woff2'),
url('/fonts/ComicNeue-Angular-Bold.woff') format('woff'),
url('/fonts/ComicNeue-Angular-Bold.ttf') format('truetype');
font-weight: 700;
}

@font-face {
font-family: 'Comic Neue Angular';
src: url('/fonts/ComicNeue-Angular-Bold-Oblique.eot');
src: url('/fonts/ComicNeue-Angular-Bold-Oblique.eot?#iefix') format('embedded-opentype'),
url('/fonts/ComicNeue-Angular-Bold-Oblique.woff2') format('woff2'),
url('/fonts/ComicNeue-Angular-Bold-Oblique.woff') format('woff'),
url('/fonts/ComicNeue-Angular-Bold-Oblique.ttf') format('truetype');
font-weight: 700;
font-style: oblique;
}

然后进入主题配置文件themes/next/_config.yml

搜索font,可以得到如下部分:

我想把标题和文章中的字体都设置成这个,那么只需要在family后面加上即可:

然后hexo clean hexo s一下就可以看效果啦


字体参考自这里,超级可爱ᶘ ᵒᴥᵒᶅ -> https://milktea.info/2019/01/25/ComicNeue/

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2018-2020 LeFlacon

奶茶一杯 快乐起飞

支付宝
微信