【HTML&CSS】补充：导入字体库定义字体图标效果的方法

学习目标

1. 掌握导入字体库定义字体效果的方法
2. 掌握字体图标

 图标

当我们写一些项目时，通常会涉及到各种各样的图标，推荐一个免费图标下载网站——阿里巴巴矢量图标库，该网站首页如下图(iconfont-阿里巴巴矢量图标库)。

在首页搜索栏里输入更多

 即可继续查找自己想要的图标，比如输入“购物车”

单击所需图标即可下载，并且在下载之前可以配置图标的颜色。将下载的图标存储于icons文件夹中，并且将该文件夹复制到新建的项目文件夹中。下载后的图标如图所示。

应用时只需要在html文件当中用<img>标签去引入（跟引入图片的方法一样），样式通过写css去改变。

字体

字体样式

Font-    例如： font-family、font-size、color、font-weight、font-style

Text-    例如： text-shadow阴影、text-align文字居中、text-overflow

1、导入外部字体的方法：

1. 编写@font-face字体样式选择器，写入font-family（自定义名称）和src（ttf字体路径）属性；
2. 在要改变字体的选择器里用font-family引用该字体。

2、font-awesome字体图标

加载步骤：

1. 复制font-awesome字体图标库的css和fonts文件夹到网站css文件夹；
2. 导入font-awesome图标库:

<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />

编写html代码，例如

以上是今天分享的内容，小编决定保持两日一更，以此来监督自己的学习，也欢迎大家来观看笔记，指出不足。