偶然间看到博主“老狮的梦”发表的“更换网站字体”,随即动了给自己博客更换字体的念头,现将详细步骤附上,供大家借鉴(参考“老狮的梦”及网络部分教程)。

第一步:下载字体

下载自己喜欢的字体,字体格式为.ttf,这里推荐一个字体网站非常的不错:
http://www.zhaozi.cn/s/all/ttf/

第二步:转换字体

将下载好的字体转换成.eot、 .woff、 .woff2三种格式,文件名可以是任意英文,没有特殊要求,可以根据自己的喜好命名(不要设置为中文就可以了)。这里推荐一个在线转化的网站:https://www.fontke.com/tool/convfont/

第三步:上传字体

在网站根目录新建fonts文件夹,将转换好的.eot、 .woff、 .woff2三种格式字体上传到fonts文件夹,记住字体文件路径,后面CSS样式文件代码中要用。
注意:上传的文件中只有以上三种格式,具体如图:
fonst文件

第四步:调用代码

打开网站/博客主题CSS文件里面的style.css文件(不同程序命名可能不一样,请自行查找,joe主题是joe.min.css,路径为usr/themes/Typecho-Joe-Theme/assets/css/joe.min.css,注意:是joe.min.css,不是joe.min.scss),在最下面(位置没有固定要求)放入以下代码,建议使用文本编辑器Notepad++,在本地将css文件代码修改完成后再上传。

<div>@font-face {
  font-family: "Ravoqy(字体名字可自行修改)";
  src: url(fonts/Ravoqy.woff2(根据自己的字体路径修改)) format("woff2"),
       url(fonts/Ravoqy.woff(根据自己的字体路径修改)) format("woff"),
       url(fonts/Ravoqy.ttf(根据自己的字体路径修改)) format("truetype"),
       url(fonts/Ravoqy.eot(根据自己的字体路径修改)) format("embedded-opentype"),
       url(fonts/Ravoqy.svg(根据自己的字体路径修改)) format("svg");
}</div>

上面的代码里.ttf和 .svg的文件是没有的,但是路径要和.eot、 .woff、 .woff2三种格式路径保持一致,否则字体将不会正常显示。

然后继续在style.css(joe主题的是joe.min.css)文件里添加以下代码

<div>body {    
    font-family: Ravoqy(名称和上面字体名称一致);    
}</div>

如果CSS文件本身就有body {的话就把font-family: Ravoqy(名称和上面字体名称一致);添加到原有的body {里面。
代码截图如下:
代码2.png

温馨提示

字体的名字请取纯英文的,然后代码中中文解释连同前后括号部分删除如(字体名字可自行修改)
如果字体未显示,请刷新浏览器或清除缓存查看效果,若仍无法显示,请检查代码!

补充更新

JOE5.0版本主题更新方法同上,只是CSS文件为/usr/themes/Joe/assets/css/joe.normalize.css

特别说明

参考:老狮的梦 https://laolion.com/archives/2430.html

最后修改:2021 年 02 月 15 日
如果觉得我的文章对你有用,请随意赞赏鼓励!