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

}

目录
相关文章
|
6月前
|
缓存 前端开发 JavaScript
通过jsDelivr实现Github图床CDN加速
jsdelivr是一个免费的公共CDN(内容分发网络)服务,它允许网站开发者将他们的代码库、JavaScript库、字体和其他资源托管在jsdelivr上,并通过jsdelivr的CDN网络进行快速分发。使用jsdelivr可以有效地减少用户下载资源的时间,提高网页加载速度,同时减轻原始服务器的负载。
423 1
|
6月前
|
程序员 SEO
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
209 2
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
|
19天前
|
JSON 缓存 JavaScript
使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
使用 jsDelivr 加速 GitHub Pages 的图片资源和动态编译的 JSON 资源。
18 2
|
3月前
|
前端开发 JavaScript 开发工具
使用jsDelivr和GitHub,上传本地静态资源到免费CDN
本文介绍了一种将本地图片和静态资源(如 js、css、文档等)上传至免费CDN的方法,便于随时调用。具体步骤包括:在GitHub创建仓库`resources`存放资源;通过上传或Git命令同步文件;在仓库中创建新版本并发布。之后即可通过指定格式的URL访问这些CDN资源。此方法简单高效,适合开发者快速部署和共享静态内容。
126 2
使用jsDelivr和GitHub,上传本地静态资源到免费CDN
|
3月前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
11月前
|
JavaScript 开发工具 git
保姆级教程:从零构建GitHub Pages静态网站(下)
保姆级教程:从零构建GitHub Pages静态网站(下)
326 0
|
11月前
|
前端开发 JavaScript
保姆级教程:从零构建GitHub Pages静态网站(上)
保姆级教程:从零构建GitHub Pages静态网站
4726 0
|
资源调度 JavaScript 前端开发
用vuepress2搭建自己的github网站
最近打算自己做一个博客网站记笔记,然后部署到github上,最终选择了vuepress的最新版本v2(使用的是vue3和TypeScript开发,默认使用Vite作为打包工具)
79 0
|
Arthas 算法 Java
这5个GitHub项目+3个网站,助你一飞冲天!
这5个GitHub项目+3个网站,助你一飞冲天! 小伙伴们周末好呀,这次来更新一波学习资源啦~ 👍 之前推荐过一些书,这次我们就来看看 4ye 平时常关顾的一些学习网站叭!😋 (同时会更新在菜单栏的 宝藏资源 中,方便查找) 资源一览 image-20210807235820378 CyC2018 / CS-Notes 高达 136K star 的项目! 😄 📚 技术面试必备基础知识、Leetcode、计算机操作系统、计算机网络、系统设计 概览图 地址👉 github.com/CyC2018/CS-… ima
770 0
github pages 用法详解 发布自己的网站
github pages 用法详解 发布自己的网站
279 0