归途.
每天都是一个全新的自己!!
归途.

最近收集网站常用的图标库都是免费开源的,直接调用图标开源库就可以使用到里面的图标了,十分的方便

  1. Font Awesome

Font Awesome一套绝佳的图标字体库和CSS框架。

官网:https://fontawesome.com

  1. iconfont-阿里巴巴矢量图标库

iconfont-国内功能很强大且图标内容很丰富的矢量图标库。

官网:https://www.iconfont.cn

  1. flaticon

flaticon有8,000多个SVG和基于矢量的最佳Web字体图标,适用于Web、iOS和Android应用程序。

官网:https://www.flaticon.com/uicons

  1. feather icons

feather是一组简单漂亮的开源图标,每个图标都设计在 24x24 网格上,强调简单性、一致性和灵活性。

官网:https://feathericons.com

  1. iconoir

Iconoir 是最大的开源图标库之一。

官网:https://iconoir.com

  1. Ionicons

Ionicons是一个完全开源的图标集,包含1300个图标,专为Web、iOS、Android和桌面应用程序设计。

官网:https://ionic.io/ionicons

2022年11月27日
归途.

简约好看个人主页,主页的名称字体已经过压缩,若用名称以外的字母会变回默认字体
由于 CDN 缓存原因,查看最新效果可能需要 Ctrl + F5 强制刷新浏览器缓存
载入动画,站点简介,Hitokoto 一言,日期及时间,实时天气,时光进度条,音乐播放器,移动端适配
源码截图
Demo    点我前去下载

2022年07月31日
归途.

前言

  这是一款彩色动态文字,该效果用纯CSS写的,昨晚写的代码,感觉不错,就发出来了,但我不知道你们喜欢不喜欢,个人观点不同。这个代码通用,喜欢的话就拿走吧~

代码奉上
下面的CSS代码放到Joe主题自定义CSS里面即可
如果不是没有自定义CSS,就放在<head></head>里面,记得在前边和后边加上<style></style>,一个在前,一个在后,不懂问我

@keyframes move { 0% {background-position: 0 0;} 100% { background-position: -300px 0; } } .wrap { background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red); -webkit-background-clip: text; animation: move 5s infinite; color: transparent; width: 300px;}

下面代码就是设置文字的颜色了,放在<body></body>里面即可
注:直接在输入框添加代码就行
<div class="wrap">人心's Blog</div>

2021年06月16日
归途.

看惯了千篇一律的宋体、微软雅黑等系统自带的字体,想换一个彰显个性的字体。于是在网上找了教程并在自己的博客上用了起来,感觉还不错,在这里分享给大家。(其实网上的教程非常的多,这边也只是做一个简单的搬运)。

第一步:下载字体

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

第二步:转换字体

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

第三步:上传字体

将转换好的.eot、 .woff、 .woff2三种格式字体上传到自己网站任何位置,只要和后面的代码路径一致就可以了。

第四步:调用代码

打开网站/博客主题CSS文件里面的style.css文件(不同程序命名可能不一样,请自行查找,主题是min.css),在最下面(位置没有固定要求)放入以下代码

@font-face {
  font-family: 'abcd';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), 
         url(.../字体路径/abcd.woff2) format("woff2"),
         url(.../字体路径/abcd.woff) format("woff"),
         url(.../字体路径/and.eot) format("embedded-opentype"),
         url(.../字体路径/abcd.svg) format("svg");
  font-display: swap; 
}
body {
    font-family: abcd;
}

说明

以上代码的“abcd”为字体名称,在与字体文件名称相同的前提下可随意更改英文,Joe主题可直接在后台-主题外观-设置主题-公共设置-自定义CSS放入代码即可!

2021年04月24日
归途.

食用本博客同款字体:

@font-face {
  font-family: "nexzhu";
  src: local('PingFang SC'),local('Hiragino Sans GB'),local('Microsoft YaHei'),url(https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.woff2) format("woff2"),
  url(https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.woff) format("woff"),
  url(https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.eot) format("embedded-opentype");
  font-display: swap;
}
body {font-family: nexzhu!important;}

优化说明

font-display: swap;

swap告诉浏览器使用字体的文本应立即使用系统字体显示。自定义字体准备好后,它将替换系统字体。避免显示隐形文字。

预加载网页字

用于更早获取字体文件。要开启此优化,需在博客 head 中插入一下代码。比如:

<!-- laod fonts -->
<link rel="preload" href="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.woff" as="font" type="font/woff2" crossorigin>
 

as = "font" type =" font / woff2" 属性告诉浏览器以字体形式下载此资源,并有助于确定资源队列的优先级。

crossorigin 属性指示是否应该使用CORS请求获取资源,因为字体可能来自不同的域。如果没有这个属性,预加载的字体将被浏览器忽略。

2021年04月23日
Icefox Theme . 赣ICP备2022007513号-4