迫于还有小伙伴不懂怎么改,这里加一些截图示例
更换了VOID的主题之后,雅黑的标题不是很喜欢,所以就想换个字体。
寻找字体
首先找到一个喜欢的字体,到字体天下找一个喜欢的字体,例如:金陵简体.ttf
字体子集化
如果你要引入一个完整的字体,一个字体一般都有好几兆,那么势必会对你的博客的加载速度产生很大的影响,所以最好能够把你想要用到的几个字提取出来引入这样就可以几乎不影响网站的加载速度又可以达到字体的效果,所以这里考虑做一个字体子集化,这里我们使用了百度开源的一个子集化方案:http://ecomfe.github.io/fontmin
百度提供了两种方案:
- 通过npm来自己生成;
- 直接下载软件:软件发布地址,新版本的 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://chenliny.com/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
哪里了,照猫画老虎即可。
或者在主题的外观设置-head 标签输出内容把这段代码放进去。
刷新博客
刷新一下即可看到你新字体效果
谢谢大佬!正好这几天也有这个问题,我也是把字体文件放到了 `assets` 目录下,但地址一直 404…… 打算照着这里的步骤再充实一次!
成功了,谢谢教程指导!
DaLao!能否发一份金陵简体的ttf给我?字体天下需要手机号,我不想泄露这种信息啊!!!
http://www.xiazaiziti.com/4092.html?btwaf=34994452
你好,又有新的问题产生了。更改后桌面端看生效,但是移动端没用,这是什么原因呢。 (。•ˇ‸ˇ•。)
我在移动端看我自己的是生效的,不知道你是不是设置或者其他问题引起的
我也遇到了这个问题。
已解决。
问题在于生成的embed.css文件是一个css字体文件用于加载,其中font-family字段为字体名称,填在后边的.brand{font-family:font-name}中,不一致的话不能加载成功。
移动端加载不上字体的原因可能是填了原字体名称,导致在电脑上打开时加载了电脑本地客户端的字体文件而不是自己制作的embed.css。
809230364@qq.com
万分感谢!写的很清楚,一下子就搞定了。可以保存一份到我的网站吗,会标明来源的那种。
可以的哈~~
所以具体是怎么把主题左上角,首页顶部那几个字引用所选的字体!
你看第二种方法不是可以使用软件子集化吗,输入你想要的字,生成子集化就好了