前言

大多数站长在使用博客初期，喜欢魔改美化自己的网站

博客的建设主要方便访客高质量的阅读 所以对字体的选择非常重要

本期博主给大家出一期如果给自己的博客资源网自定义自己喜欢的字体

教程开始

• 下载自己喜欢的字体

在这里我给大家推荐的几款免费的字体下载站

100字体下载站

• 转换自己的字体包格式

当我们下载字体之后会有一个压缩包

里面会有一个.ttf的字体文件包

因为有些浏览器不支持这种字体的格式显示 所以我们需要对字体格式转换

如果不进行转换字体格式，有些浏览器会无法显示自己设置的喜欢的字体

如果你毫无技术不会转换字体格式不要怕，这里我给你们提供一个免费快捷的字体转换网站

字体格式在线转换器

你只需要转换.ttf文件为eot,woff,woff2,svg,tff 格式

如下图，我已经用红色框框给你标记，按图操作即可

• 使用字体

将字体文件上传到GitHub仓库

这个有很多方法，可以将字体存储在cos，oss或者本地，本地的话会加载非常缓慢

不利于网站速度优化，cos，oss非常耗费流量，早上一起来可能不注意一套房子就没了

在这里我推荐大家使用GitHub仓库，利用jsDelivr+Github的方法实现即可

如图所示我将字体文件转换之后依次上传至自己的GitHub的仓库

jsDelivr+Github的cdn使用方法是：https://cdn.jsdelivr.net/gh/{user}/{repo}/文件路径

这里简单解释一下各个参数值是什么意思

user是填写你的GitHub的id，repo是填写你的仓库id，文件路径直接填写你的字体文件名称就好了

在这里提示一下字体文件不要太大，也不要字体文件名称使用中文名称

• 编写css字体样式代码

如果你是小白不懂css，这没关系，只需要按照我的方法即可

代码格式如下：

@font-face{

font-family: 'zti';

src:  url('文件直链.tff');

src:  url('文件直链.eot');

src:  url('文件直链.svg');

src:  url('文件直链.woff');

src:  url('文件直链.woff2');

}

body{

font-family:'zti';

}