为你的 VOID 主题个性化的博客标题字体

为你的博客标题实现个性化吧!

请注意,本文编写于 157 天前,最后修改于 5 天前,其中某些信息可能已经过时。

此文转载自木石微言,获得作者许可后转载。

更换了 VOID 的主题之后,雅黑的标题不是很喜欢,所以就想换个字体。

一、寻找字体

首先找到一个喜欢的字体,到字体天下找一个喜欢的字体,例如:金陵简体.ttf


二、字体子集化

如果你要引入一个完整的字体,一个字体一般都有好几兆,那么势必会对你的博客的加载速度产生很大的影响,所以最好能够把你想要用到的几个字提取出来引入这样就可以几乎不影响网站的加载速度又可以达到字体的效果,所以这里考虑做一个字体子集化,这里我们使用了百度开源的一个子集化方案:http://ecomfe.github.io/fontmin
百度提供了两种方案:

  1. 通过npm来自己生成;
  2. 直接下载软件:软件发布地址,新版本的 Fontmin App 会自动生成后缀为 -embed.css 的文件。将最常用的 TTF 字体以 data-uri 方式内嵌至 CSS,让字体的加载速度更快。而且你也不需要引入生成的其他文件了,只需要embed.css就拥有你想要的字体了。

三、范例

这里我们用第二种方法:
通过软件发布地址找到下载软件地址

下载地址
下载地址

根据你的系统下载对应版本的软件
解压运行Fontmin-v0.2.0-win64.exe

输入你想要的字,把字体拖到此处
输入你想要的字,把字体拖到此处

点击生成!得到如下图的结果

生成结果
生成结果


四、引入字体

把 -embed.css 结尾的文件放到博客的根目录某个文件夹下,编辑主题的 header.php(VOID 是 head.php)文件,在首页引入这个字体 css, 添加如下(href 的路径是你自己的博客存放 -embed.css 文件的路径

<link rel="stylesheet" href="https://chenly.me/usr/themes/VOID/assets/方正细金陵简体-embed.css" />
<style>.brand{font-family:方正细金陵简体,serif;font-weight:normal!important;}</style>

<style> </style> 里就是 css 语法,.brand 就是指代你的网站 html 里的 css 类名,font-family 就是 -embed.css 里的 font-family 也就是字体名字,保存编辑。

你可以在我博客首页,chrome 浏览器下右键查看网页源代码,找到我的这两行代码放置的位置,你就大概知道你自己应该放 head.php 哪里了,照猫画老虎即可。


五、刷新博客

刷新一下即可看到你新字体效果

img
img

添加新评论

评论会不定时的看,但如果着急请直接联系我

评论列表