基于jsDelivr+Github给网站如何换个漂亮的字体。

简介: 本文介绍了如何为博客自定义字体。首先,从免费字体网站(如100字体下载站)下载字体,然后使用在线工具(如fontformat.com)转换字体格式为eot, woff, woff2, svg和ttf。接着,将字体文件上传至GitHub仓库,利用jsDelivr+GitHub的CDN服务获取文件链接。最后,通过编写@font-face的CSS样式代码,将自定义字体应用到博客中。注意文件名避免使用中文,并确保所有浏览器兼容。

前言

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

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

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

教程开始

  • 下载自己喜欢的字体

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

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';

}

目录
相关文章
|
2月前
|
缓存 前端开发 JavaScript
通过jsDelivr实现Github图床CDN加速
jsdelivr是一个免费的公共CDN(内容分发网络)服务,它允许网站开发者将他们的代码库、JavaScript库、字体和其他资源托管在jsdelivr上,并通过jsdelivr的CDN网络进行快速分发。使用jsdelivr可以有效地减少用户下载资源的时间,提高网页加载速度,同时减轻原始服务器的负载。
187 1
|
2月前
|
程序员 SEO
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
155 2
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
|
7月前
|
JavaScript 开发工具 git
保姆级教程:从零构建GitHub Pages静态网站(下)
保姆级教程:从零构建GitHub Pages静态网站(下)
223 0
|
7月前
|
前端开发 JavaScript
保姆级教程:从零构建GitHub Pages静态网站(上)
保姆级教程:从零构建GitHub Pages静态网站
2869 0
|
8月前
|
资源调度 JavaScript 前端开发
用vuepress2搭建自己的github网站
最近打算自己做一个博客网站记笔记,然后部署到github上,最终选择了vuepress的最新版本v2(使用的是vue3和TypeScript开发,默认使用Vite作为打包工具)
54 0
|
11月前
github pages 用法详解 发布自己的网站
github pages 用法详解 发布自己的网站
238 0
|
Arthas 算法 Java
这5个GitHub项目+3个网站,助你一飞冲天!
这5个GitHub项目+3个网站,助你一飞冲天! 小伙伴们周末好呀,这次来更新一波学习资源啦~ 👍 之前推荐过一些书,这次我们就来看看 4ye 平时常关顾的一些学习网站叭!😋 (同时会更新在菜单栏的 宝藏资源 中,方便查找) 资源一览 image-20210807235820378 CyC2018 / CS-Notes 高达 136K star 的项目! 😄 📚 技术面试必备基础知识、Leetcode、计算机操作系统、计算机网络、系统设计 概览图 地址👉 github.com/CyC2018/CS-… ima
721 0
|
JavaScript 网络协议 Shell
Hexo+GitHub+Vercel搭建个人博客网站
直接安装,完成后,在cmd上输入node -v和npm -v查看是否安装成功,这两条命令如果都输出了版本号,那么就表示安装成功了
630 0
|
域名解析 缓存 负载均衡
如何使用jsDelivr+Github 实现免费CDN加速?
如何使用jsDelivr+Github 实现免费CDN加速?
459 0
如何使用jsDelivr+Github 实现免费CDN加速?
|
iOS开发
iOS 开发-教大家如何使用github客户端上传自己的代码到github网站
iOS 开发-教大家如何使用github客户端上传自己的代码到github网站
159 0
iOS 开发-教大家如何使用github客户端上传自己的代码到github网站