为博客标题自定义字体

这个教程应该是适用于所有的博客系统甚至是HTML网站的。方法大同小异，自己倒腾一下就好。本文用我最惯用的 Wordpress 作为例子。

最近 @Shawn 的群里超级多人问 Shawn 博客标题字体怎么弄的。（其实我的博客也弄了只不过他们不看而已）。

呐，就长这样

其实 Shawn 是发了文章解释的，只不过他们貌似都看不懂。我自己是通过 扒他的 style.css 实现的。当然我们先不说怎么扒 style.css，毕竟肯定又会有人看不懂。所以这次我们一步一步来。

首先，我在 Cloudflare 的 控制面板 把域名调成了 Development Mode（开发模式）；因为我的网站都是使用了 Cloudflare 的 Cache Everything 以提升速度的，所以现在要关掉，以便于实时预览效果。

开启 Cloudlfare 的 开发模式

然后我给自己解析了一个新的子域名，testing.hxco.de，进入虚拟主机后台，在这个子域名下面装了个最新版 Wordpress。

虚拟主机安装 Wordpress

安装好了以后，我又去下载了一次 Shawn 给我的付费主题包。

下载付费版 Memory 主题

然后上传到Wordpress 的 主题目录，即 /wp-content/themes/ 。

上传主题

简单地启用主题并且修改了一些基本信息以后，我们就可以看到 Memory 主题的样子了。可以看到，左上方的博客标题部分，用的是类似于 微软雅黑 这样的字体。

Memory 初始样式

Firefox 开发者工具

我们在博客标题的上方 单击右键 - 选择“审查元素”。我用的是英文版本的浏览器所以相应的菜单也是英文的。

审查元素

然后我们就可以看到，博客标题处用的是 #menu-logo 这个选择器（Selector），font-family 为 ‘mingchao’，也就是告诉浏览器渲染这个字体的时候要使用 ‘mingchao’ 这个字体。我们右键复制这个代码块，待用。

但是在浏览器里面，我们看到字体仍然是微软雅黑，并没有使用所谓 ‘mingchao’ 字体。这是因为 Shawn 在主题里面并没有声明 ‘mingchao’ 字体是哪里来的，浏览器在系统里面也找不到这个字体，所以浏览器就用默认设置 - 也就是 微软雅黑 给我们渲染了。

审查元素 - CSS

然后你还需要决定你想要把博客标题换成什么字体。这里我选择了 “方正清刻本悦宋简体“。上网随便下了一个下来然后解压缩，把字体文件（一般都是以 .ttf 结尾；ttf 是 TrueType Font File 的意思。）

下载字体

中文字体是很大的，因为中文有那么多个汉字呢；每一个字都需要单独设置。但是英文字体因为只有26个字母，所以就算整个引用也不需要加载很大的文件。

一般的中文字体是 3-6M，部分特殊的（比如苹果的 PingFang SC）可以达到 10M。

如果让访客加载这么大的字体，加载速度一定会很慢。而且博客标题也就那么几个字，不需要那么多的多余字体。这个时候，我们需要一种叫 Subfont（字体子集）的东西；它可以把一个字体里面的几个字符单独地提取出来。

这里推荐一个叫 字客网 的网站。它提供非常简单的字符子集生成服务。

https://www.fontke.com/tool/subfont/

把我们刚刚下载好的字体拖进去上传。

上传字体

然后输入你的博客标题；为了进一步减小字体大小，把下面的 半角符号 啥的全部反选（反正你也不需要在博客标题里面放标点符号）。

最后点击一键生成。

生成字体子集

点击生成以后网站会自动把生成好的字体下载下来。

右键 - 属性 看了下，6个中文字体的字体子集只有 4KB。随便啥服务器都可以一秒钟加载完毕。

字体子集大小

然后上传到虚拟主机或者随便什么可以托管文件的地方。当然了，如果你非常在意速度，那么还是建议你放到 CDN 上比较好。这里为了开发方便和兼容性，我把原来的字体名称改成了 ‘FangZheng.ttf’。

然后找出你字体文件的绝对地址：例如我上传到了 https://testing.hxco.de 的根目录，那么我的绝对地址就是：

https://testing.hxco.de/FangZheng.ttf

上传字体到你的网络服务

然后我们需要使用 CSS 的 font-face 属性声明字体。不会怎么声明？我们可以到 Firefox 提供的 MDN（Mozilla Developer Network）学习一下。

怎么学习？使用 Google 搜索关键词 ”font face mdn“ 即可。如果英文读不懂可以把网址里面的 en-US 改成 zh-CN，就可以看到中文版本的了。

MDN 教程

如果你的主题有提供 ”额外 CSS“ 选项，就可以直接在里面添加。如果没有，则需要到主题根目录找到 style.css 然后添加。

添加以下 CSS 代码即可（千万不要直接复制，需要自己定义自己的）

@font-face {
    font-family: 'FangZheng'; /* 告诉浏览器我们现在有一种叫 FangZheng 的字体需要使用 */
    src: url(https://testing.hxco.de/FangZheng.ttf); /* 告诉浏览器这个字体从哪里找到 */
    font-weight: normal; /* 告诉浏览器这字体的字重，比如是普通还是粗体 */
    font-style: normal; /* 告诉浏览器这字体的形式，比如正常还是斜体还是下划线 */
}

#menu-logo #logo a, #foot a:first-child { /* 这里就是你刚刚复制的代码块了 */
    font-family: 'FangZheng'; /* 告诉浏览器这个元素需要使用这种字体 */
    font-weight: lighter!important; /* 告诉浏览器这个字体的字重 */
}

然后刷新页面看一看，成功了！