写在前面
大多数站长在使用博客初期,喜欢魔改美化自己的网站
博客的建设主要方便访客高质量的阅读 所以对字体的选择非常重要
本期博主给大家出一期如果给自己的博客资源网自定义自己喜欢的字体
教程开始
1.下载自己喜欢的字体包
在这里我给大家推荐的几款免费的字体下载站
2.转换自己的字体包格式
当我们下载字体之后会有一个压缩包
里面会有一个.ttf的字体文件包

因为有些浏览器不支持这种字体的格式显示 所以我们需要对字体格式转换
如果不进行转换字体格式,有些浏览器会无法显示自己设置的喜欢的字体
如果你毫无技术不会转换字体格式不要怕,这里我给你们提供一个免费快捷的字体转换网站
你只需要转换.ttf文件为eot,woff,woff2,svg,tff 格式
如下图,我已经用红色框框给你标记,按图索骥即可

3.将字体文件上传到GitHub仓库
这个有很多方法,可以将字体存储在cos,oss或者本地,本地的话会加载非常缓慢
不利于网站速度优化,cos,oss非常耗费流量,早上一起来可能不注意一套房子就没了
在这里我推荐大家使用GitHub仓库,利用jsDelivr+Github的方法实现即可
在此之前非常感谢强仔,夏目贵志的指导我才搞明白如果cdn加GitHub的使用方法

如图所示我将字体文件转换之后依次上传至自己的GitHub的仓库
jsDelivr+Github的cdn使用方法是
https://cdn.jsdelivr.net/gh/{user}/{repo}/文件路径
这里简单解释一下各个参数值是什么意思
user是填写你的GitHub的id,repo是填写你的仓库id,文件路径直接填写你的字体文件名称就好了
在这里提示一下字体文件不要太大,也不要字体文件名称使用中文名称
https://cdn.jsdelivr.net/gh/qunlin20/qunlin/ql.eot
以上就是我的文件,你照葫芦画瓢即可
4.编写css字体样式代码
如果你是小白不懂css,这没关系,只需要按照我的方法即可
代码格式如下,因为文章制作不易,十分的详细,请评论鼓励一下博主才可以查看如下代码
将如下代码添加你的主题文件css样式即可
字体样式提供
但是有很多朋友,不太喜欢动手,也可以调用我现成的字体代码
但是也有一部分小伙伴非常喜欢本站的字体样式,在这里因为属于付费字体
所以不在免费提供给大家,喜欢的可以自行下载字体文件转换即可
本站使用的字体文件属于方正兰亭圆
好了,教程就到这里,感谢大家的访问与支持
感谢您的访问
本站名称:云仙小站
本站永久网址:https://52ql.cn
版权声明:
知识共享署名-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)协议进行许可
转载时请以超链接形式标明文章原始出处和作者信息,谢谢合作。
本网站的文章部分内容可能来源于网络,仅供大家学习与参考
如有侵权,请联系站长小赵同学进行删除
请登录后发表评论
注册
社交帐号登录