更换博客的标题字体

Typecho自定义博客标题字体

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

迫于还有小伙伴不懂怎么改,这里加一些截图示例


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

寻找字体

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

字体子集化

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

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

范例

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

软件下载地址.png
软件下载地址.png

根据你的系统下载对应版本的软件
解压运行Fontmin-v0.2.0-win64.exe
输入你想要的字,把字体拖到此处.png
输入你想要的字,把字体拖到此处.png

点击生成!得到如下图的结果
生成的内容.png
生成的内容.png

引入字体

-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哪里了,照猫画老虎即可

刷新博客

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

添加新评论

已有 10 条评论

DaLao!能否发一份金陵简体的ttf给我?字体天下需要手机号,我不想泄露这种信息啊!!!

http://www.xiazaiziti.com/4092.html?btwaf=34994452

你好,又有新的问题产生了。更改后桌面端看生效,但是移动端没用,这是什么原因呢。 (。•ˇ‸ˇ•。)

我在移动端看我自己的是生效的,不知道你是不是设置或者其他问题引起的

果冻 果冻 回复 @东
0 0

我也遇到了这个问题。

果冻 果冻 回复 @东
0 0

已解决。
问题在于生成的embed.css文件是一个css字体文件用于加载,其中font-family字段为字体名称,填在后边的.brand{font-family:font-name}中,不一致的话不能加载成功。
移动端加载不上字体的原因可能是填了原字体名称,导致在电脑上打开时加载了电脑本地客户端的字体文件而不是自己制作的embed.css。
809230364@qq.com

万分感谢!写的很清楚,一下子就搞定了。可以保存一份到我的网站吗,会标明来源的那种。

可以的哈~~

所以具体是怎么把主题左上角,首页顶部那几个字引用所选的字体!

你看第二种方法不是可以使用软件子集化吗,输入你想要的字,生成子集化就好了