avatar

Matery主题自定义字体

全局字体自定义

  1. 博客站点根目录下的 source 文件夹内创建一个名为 font 的文件夹,即文件夹路径为 /source/font/ ,用来统一存放你要用到的字体。
  2. 将你要用到的字体放入上述创建的文件夹内,字体名称最好为英文,如 /source/font/myFont.ttf
  3. 找到主题文件夹下的 my.css 文件,路径为 /themes/matery/source/css/my.css ,填入下面的代码:
1
2
3
4
5
6
7
8
@font-face{
font-family: 'myFont';
src: url('../font/myFont.ttf');
}

body{
font-family: 'myFont';
}

将上面的 myFont 改成你自己的字体名称即可

局部字体自定义

如果你不想全局字体自定义的话,就可以尝试一下局部字体自定义。

  1. 与全局字体自定义一样,我们需要创建 font 文件夹,将需要的字体放入,与上面的第1、2步一样,可以参考一下
  2. 找到主题文件夹下的 my.css 文件,路径为 /themes/matery/source/css/my.css ,并将下面的代码填入文件中。
1
2
3
4
5
6
7
8
@font-face{
font-family: 'myFont';
src: url('../font/myFont.ttf');
}

.diyFont{
font-family: 'myFont';
}

注意:这里是创建了一个 diyFont 的类,注意与全局字体自定义相区别

当想要指定某个地方的字体自定义时候,可以通过右键审查元素找到那个字体的类,给于或者在原有的类下面给于属性即可。

例子:

找到你要自定义的区域,如我要自定义博客主页的标题字体,那么就要找到相应的文件,也就是 /themes/matery/layout/_partial/bg-cover-content.ejs ,在相应的地方加入我刚刚自定义的 diyFont 类。如将下面的:

1
2
3
4
5
6
7
<div class="title center-align">
<% if (config.subtitle && config.subtitle.length > 0) { %>
<%= config.subtitle %>
<% } else { %>
subtitle
<% } %>
</div>

改为

1
2
3
4
5
6
7
<div class="title center-align diy-font">
<% if (config.subtitle && config.subtitle.length > 0) { %>
<%= config.subtitle %>
<% } else { %>
subtitle
<% } %>
</div>

修改方法也就是在<div class="title center-align">中增加自己定义的 CSS 类名,什么是类名,有些小伙伴也许不知道其含义,自行百度吧:rofl:,也就是在class=""中添加自己自定义的名称。

之后的方法跟全局自定义字体一样,只不过需要将原本直接给body的属性变成给你设置的类,比如

1
2
3
4
5
6
7
8
@font-face{
font-family: '字体名字';
src: url('../font/你的字体.ttf');
}

.diy-font{
font-family: '字体名字';
}

然后执行命令,查看本地效果即可。

我用的字体是汉仪行楷字体。

参考https://www.bwxyz.top/posts/7

文章作者: Yafine
文章链接: https://yafine-blog.cn/posts/49fb.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 过客~励む
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论