11.26web字体&图标

wbe字体 & 图标

web字体

解决用户电脑上没有安装相应字体的问题

当用户电脑上没有安装相应字体的话，强制让用户下载该字体

使用@font-face指令，制作一个新字体

写法：
@font-face{
font-family: “这里面写字体的名称”;
src:url(“这里面写路径”);
}

字体图标

iconfont.cn网站，可以上这个网站找字体图标

网站用法：

直接下载的话，下载的是图片格式

1. 可以将想要的图标加到购物车里面去，然后点击添加至项目，接着到项目里面去点击添加代码(这里上面选的是Font class，意思是用类名表示图标)，然后会出来一个地址，里面是一个CSS文件

接下来就是如何在我们自己写的网页里面用它:

2. 直接在网页代码上link这个地址，然后想用具体图标的话就用i元素(一般图标用的是i元素)，给它一个类名.iconfont(上面那个网站的代码是这么写的) & .要用的图标的类名(到那个网站上面去复制) 就大功告成啦

项目里面去点击添加代码(这里上面选的是Font class，意思是用类名表示图标)这里也可以选择Unicode，这种方法没有生成CSS文件，只有代码，所以直接将代码复制到我们自己的CSS文件里面(这一串代码其实就是@font-face指令)，要用的时候直接写就行了，写实体字符，对应的数字还是去网站直接复制，记得把涉及到的元素的font-family样式属性设置为对应的值

注意，我们使用的这个图标其实算是一个文字，所以控制文字的css样式都可以用来控制它
另，你也可以把一整个文件下载到本地，然后路径改为本地路径即可实现离线使用