自定义网站字体

Matery主题

准备

首先确保主题存在css文件：(hexo-theme-matery/source/css/.mycss)

路径很重要！文件没有用就自己创！

本站使用的开源字体:JetBrains Mono

网站局部个性化字体

一般网站的web字体都可以直接从Google-Font获取资源，这样不用担心字体商业带来的法律问题

1）创建web字体引用

@font-face{
    font-family: '引用的字体名称';
    src: url('谷歌字体路径（或者其他什么字体引用）');   
}

2）在网页合适的位置进行字体引用

①利用浏览器检查元素，获取需要定义字体的部分

②在主体的配置文件中(hexo-theme-matery/layout/…)找到对应的渲染(.ejs)文件，查找需要修改的部分

①演示一下利用浏览器获取定义字体的部分

对获取到的id选择器：#artDetail进行css渲染

#artDetail {
    font-family: '引用的web字体';
}

②利用主体的ejs渲染文件找出需要修饰的部分（加入自定义类）

/*使用我在文章内容详情定义的diyFnot类**/
.diyfont {
   font-family: '引用的web字体'; 
}

/*也可以使用自带的id*/
#artDetail {
    font-family: '引用的web字体'; 
}

网站全局化字体定义

@font-face{
    font-family: '引用的字体名称';
    src: url('谷歌字体路径（或者其他什么字体引用）');   
}

body {
    font-family: '引用的web字体名称'; 
}

引用本地的字体文件

当然有时候那个谷歌字体的网站可能登录不上去，需要科学上网，很烦人！我们也可以直接下载下字体文件，将他放在本地，进行直接引用！看下面操作

标签：Butterfly,web,自定义,family,文件,主题,字体,引用,font
来源： https://blog.csdn.net/m0_46296826/article/details/115350456