css3@font-face的使用方法

举报
July_ 发表于 2020/06/19 11:48:13 2020/06/19
【摘要】 使用字体图标的优点为: 矢量(无限缩放、高清) CSS 样式(通用、灵活) 体积更小(快速)


使用字体图标的优点为:

  • 矢量(无限缩放、高清)

  • CSS 样式(通用、灵活)

  • 体积更小(快速)


有优点必然有缺点,缺点是后期加入新的字体图标麻烦点,不过新的技术当然还是得使用啦~


下面就来说说使用方法:

1.这里推荐阿里巴巴字体图标库(https://www.iconfont.cn/);

2.进入阿里巴巴字体图标库网站首页,登录,没有账号先注册一个;

3.在输入框里输入名字(名字可以是中文,英文,拼音都行),比如我这里输入的是“爱心“,回车后如下图:

4.找到自己喜欢的图标,鼠标移上去,会出现一个购物车的图标,点击会加入到右上角的购物车(前提是要登录哦~)

如下图,右上角的购物车上显示1,代表加入了一个图标……


5.点击右上角购物车,这时浏览器右边显示一个侧栏,我们添加的图标就在这里呀,如下图:

6.可以看到,上图有三个按钮,添加至项目,下载素材,下载代码;分别是什么意思呢?

  • 添加至项目:可以理解为一个网站上用到的所有图标代表一个项目

  • 下载素材:直接下载当前的图标,可以设置图标的颜色,大小,图标格式有SVG、AI、PNG

  • 下载代码:这个是今天的重点,以css3@font-face方式引入字体文件



7.首先下载代码,解压之后,如下图:

其中里面重点是是:iconfont.css、iconfont.ttf,这两个文件是会使用到的。


8.新建一个文件夹,名字随意,比如我这里是demo名字,将iconfont.css和iconfont.ttf复制到demo文件夹里,然后新建一个index.html页面,目录结构如下图:


  •     我们打开iconfont.css,看到的如下图:

  • 把iconfont.css文件里的一些不需要的东西去掉,@font-face里引入了多个字体,我们这里只用到了ttf格式的,还有一个很长一串的base64格式的需要保留,这里其它的都可以去掉,最终如下图:

    

  • 准备工作做完了,下面我们来看看怎么使用吧?


9.使用方法:

    • 我们在刚刚新建的index.html里,在<head>标签里,引入iconfont.css,如下图:

    • 引入之后我们还记得刚刚下载的字体图标文件夹里有个demo_index.html的文件吗?,我们双击文件浏览器打开,显示如下图:

    • 可以看到这里也有使用说明,我们等到Font class,使用class方式,如下图:

      上图有一个.icon-aixin的类名

    • 下面在html标签里使用,如下图:

        这里注意,i标签里有两个类名,iconfont是必须的,icon-aixin是具体的图标,不过这个颜色爱心的图标有点问题…………

        我这为了演示,换一个图标,第一个,如下图:


打开浏览器可以看到:(加了颜色和大小)

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200