为博客标题自定义字体

这个教程应该是适用于所有的博客系统甚至是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 浏览器。因为 Firefox 可以直接看到某个元素的 css,而且可以实时修改预览(虽然我们今天用不到)。

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; /* 告诉浏览器这个字体的字重 */
}

然后刷新页面看一看,成功了!

点赞
  1. 龙笑天说道:

    φ( ̄∇ ̄o) 涨姿势了 可以这样提取制作web字体~~

    1. 惶心说道:

      能帮到你就好~

  2. 青山说道:

    你的主机控制面板好眼熟,和我老薛香港一样

    1. Huangxin说道:

      就是老薛主机 ==

  3. Corps说道:

    版权警告.
    方正字体不允许用做web展示等各种用途
    另外ttf也不是最好选择
    还有就是可以考虑typekit,这是个好东西,动态加载字体,按需加载.

    1. Huangxin说道:

      这里的重点是字符子集,也就是 subfont,当然也可以做成其他格式,这里仅仅是最简单的一种方式而已。方正字库对个人开发者免费开放,只要非商业用途,即可通过途径获得字体。

发表评论

电子邮件地址不会被公开。必填项已用 * 标注