为博客标题自定义字体

这个教程应该是适用于所有的博客系统甚至是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; /* 告诉浏览器这个字体的字重 */
}

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

ASP.NET DropDownList1_SelectedIndexChanged使用

今天写代码给DropDownList1添加DropDownList1_SelectedIndexChanged事件,在运行测试时发现DropDownList1的...

19310
来自专栏coding for love

CSS入门1-认识html之标签

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

11520
来自专栏不止是前端

Vue:VSCode完美配置指南

5K80
来自专栏DeveWork

阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了)。拿来调试DeveMobile 与EaseMobi...

3.4K100
来自专栏前端布道

前端开发必备之Chrome开发者工具(上篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介...

390110
来自专栏腾讯大讲堂的专栏

移动H5前端性能优化指南

移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点,首屏加载3秒...

56360
来自专栏前端小叙

推荐两款简单好用的图片放大jquery插件

一、zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件 引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zo...

73690
来自专栏jeremy的技术点滴

前端ReactJS技术介绍

44230
来自专栏coding

vue.js组件间通信

组件间需要能相互通信才价值,通信包括数据的传递,方法的调用。这样才能将不同组件结合起来搭建页面

9810
来自专栏小狼的世界

Vimperator的有用操作

可以有一个变通的办法复制,先按下"Ctrl+V",然后再用快捷键复制,接下来Vim的快捷键又起作用了。现在还有一个困惑的地方是不用鼠标,如何选中网页中自己希望的...

9830

扫码关注云+社区

领取腾讯云代金券