一. CSS字体设置
通常我们设置CSS的字体的时候有以下几种方法
- 通过图片转换为图标在网页中引用(耗费资源)
- 精灵图,通过背景图片的坐标进行切换(需要对一张精灵图进行不停的切换坐标,并且不易于维护)
- 字体图标,将图标设立成字体来使用
下面讲的主要是第三种方法,字体图标,可以随意的改变图标的大小和颜色,并且易于维护
1.1 字体图标的优点
可以做出跟图片一样可以做的事情,改变透明度、旋转度,等…
但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等…
本身体积更小,但携带的信息并没有削减。
几乎支持所有的浏览器,最重要的是几乎支持所有的浏览器,这就很香
1.2 字体图标使用流程
- 获得字体图标库或者UI人员生成的字体图标效果图
- 将其导入自己的项目当中
- 引入相关的CSS样式
- 页面渲染调用即可
简而言之就是我们只是调用已经生成好的字体图标,并根据网页需求进行渲染即可
1.3 常见字体图标库
当UI设计人员给我们svg文件的时候,我们需要转换成我们页面能使用的字体文件, 而且需要生成的是
兼容性的适合各个浏览器的。
推荐网站: http://icomoon.io
icomoon字库
IcoMoon成立于2011年,推出的第一个自定义图标字体生成器,它允许用户选择他们所需要的图标,使
它们成一字型。 内容种类繁多,非常全面,唯一的遗憾是国外服务器,打开网速较慢。
推荐网站: http://www.iconfont.cn/
阿里icon font字库
http://www.iconfont.cn/
这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库。可以使用
AI制作图标上传生成。 一个字,免费,免费!!
fontello
http://fontello.com/
在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的。
Font-Awesome
http://fortawesome.github.io/Font-Awesome/
这个字体库更新比较快。目前已经有369个图标了。
Glyphicon Halflings
http://glyphicons.com/
这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。
Icons8
https://icons8.com/
提供PNG免费下载,像素大能到500PX
这里只讲前两种
1.3.1 icomoon库
国内国外都有比较完整的字体图标库
国外的有
https://icomoon.io/
这里面有很多的字体图标选择项,选择下载即可
下面将一步一步的将字体图标导入自己的网页当中
打开网站之后会呈现这个页面
选择字体图标,点击右下角
下载字体图标
下载之后会出现一个压缩包,将压缩包压缩即可得到下面的文件
添加文件目录
这里面有两种调用方式
第一种引用方式
1. 编写CSS样式
2. 然后打开上面解压缩文件夹里面的demo.html网页
3. 然后在网页粘贴上
4. 然后打开网页就有了字体图标了
第二种
1. 这种比较简单,也比较推荐,引入解压缩中的style.css文件
- 在body中使用i标签进行调用
- 打开网页查看效果
以上就是icomoon库的使用方法,第二种调用方法比较方便也比较适合,推荐第二种
1.3.2 阿里icon fonts字体库
这个是国内使用偏多的一个字体库,里面包含的字体也有很多,基本满足开发了
下面就讲讲如何使用
https://www.iconfont.cn/
- 打开网页进入到这个页面,选择需要的字体
- 一步一步操作下载
-
进入购物车后点击下载代码,然后点击,会自动下载一个压缩包
-
进入压缩包就会发现里面的文件和icomoon库里面的文件一样,然后和上面一样调用即可
1.4 建站基本配置
网页小图标设置
每个网页上面都会有相应的网页图标
获取网页图标直接在网站的尾部添加上favicon.ico即可
将下载好的图标放在项目的目录文件夹下
然后根据下面代码调用即可
网站三大标签
- 题目
- 网站描述
- 关键字
都是为了方便检索的时候能够显示你的网站,这个现在的我用处不大
三. 总结
以上便是CSS字体图标的演示
最近在跟着网上写一个博客管理系统的项目,涉及到了前端和后端的协同开发,里面后端使用了Springboot和JPA,前端使用了Semantic UI
这里想说一下Semantic UI的强大,Semantic说起来是一个和Bootstrap差不多的一个组件库,在Bootstrap使用人增多的情况下,Semantic UI的一些组件处理都比较优秀,布局和Bootstrap也有些不同,里面一些字体图标也是比较多的,调用的方法基本都是上面说到的第二种方法调用,直接使用i标签进行调用,同时他的一个前端分页处理,前端表格处理,表单的处理各个方面都比较优秀。
目前我所涉及到的前端框架有四个,想安利安利
- Element UI 这个是基于Vue的一个前端框架,以前在学vue的时候视频中提到过,不过基本没有在自己的项目中用过,只是感觉里面页面元素也很简洁,里面也有很多实例,很适合后端人员的开发。
- Bootstrap 这个是一个组件库,里面的优点也比较多,用的人也很多,也很实用,组件实例丰富,这个我用的比较少,可能自己的审美有问题,不是很喜欢里面的一些组件元素
- Layui 这个也是一个组件库,这个是我用的最多的一个组件库了,里面很多组件都挺不错的,我刚开始用它的时候是要写一个后台页面的时候,那个时候不想自己写,就把里面的后台布局给拷贝下来了,毕竟CV工程师嘛,里面的分页很优秀很优秀很优秀!!!表格渲染做的也很棒,不过里面的富文本编辑器有些鸡肋
- Semantic UI 这个是刚刚接触的一个组件库,跟着前端大佬把一个页面完完全全写下来了,感觉调用很舒服,各种布局,标签之类的直接进行属性添加即可,用起来也很方便,有时间要好好看一看里面的组件实例。不过有一点不好,这个网站有时候进不去,也不知道是网的问题还是什么问题,就是进不去,而且里面全英文,对于我这个英语不好的人体验感挺差,不过这不妨碍他的强大。
以上就是这篇博客的全部了,写的不是很好,本人是一名刚步入前端的小白,很多东西都需要学习,大家看后有不对的欢迎评论,互相学习,共同进步!!!