自定义网站字体

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字体名称';
}

引用本地的字体文件

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

Hexo自定义字体（Matery主题与Butterfly主题）相关推荐

Hexo搭建博客教程-基于Butterfly主题
title: Hexo搭建博客教程 tags: Hexo 博客教程 categories: Hexo keywords: 'Hexo,博客教程' description: Hexo搭建博客,以及主题b ...
hexo的yelee主题使用本地自己指定的自定义字体
研究了老半天,好了,我们切入正题. 因为网上居多都是next主题来指定自定义字体的, 对于yelee这种主题想要制指定自己喜欢的字体,就显得困难重重. 说具体步骤: 1.在[1]中上传你的字体,我的是 ...
hexo的yelee主题使用自定义字体并用字蛛进行字体压缩的sed脚本
说真的,这个操作有点复杂,我也是花了一天时间才搞定,大部分时间都消耗在font-spider的调试上面了. 根目录路径: /home/appleyuchi/桌面/Github博客/整体测试/blog_ ...
hexo个人博客搭建（二）butterfly主题配置
Butterfly主题安装文档(二)之主题配置一.回顾安装butterfly主题 1.在hexo项目根目录下执行操作clone主题 git clone -b master https://githu ...
02 Hexo博客Butterfly主题配置博客评论邮件提醒
概述个人博客搭建成功后已经上线运行了好久,但是一直没有时间配置评论区的邮件提醒功能,所以今晚有时间就抽空配置了,然后将操作过程做一下记录. 前提条件一个已经上线运行的Hexo博客(至于用什么主题都 ...
Hexo+Butterfly主题美化
前言本博客基于Hexo框架搭建,用到 hexo-theme-butterfly 主题(本人博客Butterfly版本3.4.0),hexo-theme-butterfly是基于Molunerfinn ...
在hexo的butterfly主题中开启看板娘配置
在hexo的butterfly主题中开启看板娘官网地址配置:https://www.npmjs.com/package/hexo-helper-live2d 1.安装依赖卸载命令:npm unin ...
Hexo 中 Butterfly主题和看板娘的使用
默认的 Hexo 主题为 landscape,我选择了 Butterfly 作为博客主题 Butterfly 主题使用 Butterfly 安装 Git 安装在博客的根目录执行 git clone ...
hexo博客matery主题的个性化配置
文章目录一.matery主题的下载与安装二.基本配置 1.根目录下的 `_config.yml` 1.1. title 1.2. deploy与theme 2.themes目录下的`_config ...

Hexo自定义字体（Matery主题与Butterfly主题）